@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/MatrixComponents/MatrixComponents.ezjjssjs7t.bundle.scp.css';

/* /Components/Common/Editors/ColorPickerComponent.razor.rz.scp.css */
/* ============================================================
   ColorPickerComponent — Compact, responsive color picker
   Collapsed : swatch + hex code + chevron toggle
   Expanded  : Gradient+Hue+Alpha  |  HEX  |  CMJN  |  Recents
   Target    : fits inside a ~220-260 px sidebar panel
   ============================================================ */

.color-picker-enhanced[b-4par4xkoq0] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Header row: swatch + hex label + chevron ── */
.cpk-header[b-4par4xkoq0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    user-select: none;
    border-radius: 6px;
}

.cpk-header-toggle[b-4par4xkoq0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 6px;
    padding: 2px 4px;
}

.cpk-header-toggle:hover[b-4par4xkoq0] {
    background: rgba(0, 0, 0, 0.04);
}

/* ── Clear/reset button inside header ── */
.cpk-clear-btn[b-4par4xkoq0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background: var(--linkooc-surface, #fafafa);
    color: var(--linkooc-text-muted, #6c757d);
    font-size: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    margin-left: auto;
}

.cpk-clear-btn:hover[b-4par4xkoq0] {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.cpk-swatch-preview[b-4par4xkoq0] {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
    transition: box-shadow 0.15s ease;
}

.cpk-header:hover .cpk-swatch-preview[b-4par4xkoq0] {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.cpk-hex-label[b-4par4xkoq0] {
    font-family: 'Cascadia Code', 'Consolas', 'SF Mono', monospace;
    font-size: 0.72rem;
    color: var(--linkooc-text-muted, #6c757d);
    letter-spacing: 0.02em;
}

.cpk-chevron[b-4par4xkoq0] {
    color: var(--linkooc-text-muted, #999);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.cpk-chevron-up[b-4par4xkoq0] {
    transform: rotate(180deg);
}

/* ── Expanded panel ── */
.cpk-expanded-panel[b-4par4xkoq0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    padding: 10px;
    background: var(--linkooc-surface, #fafafa);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    animation: cpk-slide-down-b-4par4xkoq0 0.15s ease-out;
}

@keyframes cpk-slide-down-b-4par4xkoq0 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Flat color picker area ── */
.cpk-picker-area[b-4par4xkoq0] {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

/* ─────────────────────────────────────────────────
   Telerik FlatColorPicker overrides (::deep)
   Goal: compact, sidebar-friendly, no redundant UI
   ───────────────────────────────────────────────── */

/* Root container — fill parent, kill hardcoded min-width */
.cpk-picker-area[b-4par4xkoq0]  .k-flatcolorpicker {
    width: 100% !important;
    min-width: 0 !important;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0 !important;
    gap: 6px !important;
}

/* Header bar with view-toggle buttons — compact row */
.cpk-picker-area[b-4par4xkoq0]  .k-coloreditor-header {
    padding: 0 0 4px 0 !important;
    gap: 4px !important;
    min-height: 0 !important;
}

.cpk-picker-area[b-4par4xkoq0]  .k-coloreditor-header .k-button {
    padding: 2px !important;
    min-width: 0 !important;
    width: 28px !important;
    height: 28px !important;
}

.cpk-picker-area[b-4par4xkoq0]  .k-coloreditor-header-actions {
    padding: 0 !important;
}

.cpk-picker-area[b-4par4xkoq0]  .k-coloreditor-header-actions .k-button {
    padding: 2px !important;
    min-width: 0 !important;
    width: 28px !important;
    height: 28px !important;
}

/* Color gradient container */
.cpk-picker-area[b-4par4xkoq0]  .k-colorgradient {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
}

/* HSV gradient rectangle — responsive square-ish area */
.cpk-picker-area[b-4par4xkoq0]  .k-colorgradient-canvas {
    gap: 8px !important;
    height: 160px !important;  /* fixed compact height */
    flex-shrink: 0;
}

.cpk-picker-area[b-4par4xkoq0]  .k-hsv-rectangle {
    flex: 1 1 auto;
    height: 100% !important;
    border-radius: 8px;
    overflow: hidden;
}

.cpk-picker-area[b-4par4xkoq0]  .k-hsv-gradient {
    border-radius: 8px;
}

/* Drag handle inside gradient */
.cpk-picker-area[b-4par4xkoq0]  .k-hsv-draghandle {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Hue & Alpha sliders — slim vertical bars */
.cpk-picker-area[b-4par4xkoq0]  .k-hsv-controls {
    gap: 6px !important;
    flex-shrink: 0;
    height: 100% !important;
}

.cpk-picker-area[b-4par4xkoq0]  .k-colorgradient-slider {
    width: 14px !important;
    height: 100% !important;
}

.cpk-picker-area[b-4par4xkoq0]  .k-colorgradient-slider .k-slider-track-wrap {
    width: 14px !important;
}

.cpk-picker-area[b-4par4xkoq0]  .k-colorgradient-slider .k-slider-track {
    width: 14px !important;
    border-radius: 7px;
}

.cpk-picker-area[b-4par4xkoq0]  .k-colorgradient-slider .k-slider-selection {
    width: 14px !important;
    border-radius: 7px;
}

.cpk-picker-area[b-4par4xkoq0]  .k-colorgradient-slider .k-draghandle {
    width: 18px !important;
    height: 8px !important;
    border-radius: 4px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* ── HIDE Telerik's built-in RGBA inputs ──
   We provide our own HEX + CMJN so these are redundant */
.cpk-picker-area[b-4par4xkoq0]  .k-colorgradient-inputs {
    display: none !important;
}

/* ── HIDE alpha slider — CMYK has no alpha channel ── */
.cpk-picker-area[b-4par4xkoq0]  .k-alpha-slider {
    display: none !important;
}

/* Coloreditor views container */
.cpk-picker-area[b-4par4xkoq0]  .k-coloreditor-views {
    width: 100% !important;
    gap: 0 !important;
}

/* ── Shared label style ── */
.cpk-label[b-4par4xkoq0] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--linkooc-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    min-width: 34px;
}

/* ── HEX row ── */
.cpk-hex-row[b-4par4xkoq0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cpk-hex-input[b-4par4xkoq0] {
    font-family: 'Cascadia Code', 'Consolas', 'SF Mono', monospace;
    font-size: 0.78rem;
    text-transform: uppercase;
    max-width: 100px;
    border-radius: 6px;
}

/* ── RGB row ── */
.cpk-rgb-row[b-4par4xkoq0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cpk-rgb-inputs[b-4par4xkoq0] {
    display: flex;
    gap: 4px;
    flex: 1;
}

.cpk-rgb-field[b-4par4xkoq0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: 1;
}

.cpk-rgb-letter[b-4par4xkoq0] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--linkooc-text-muted, #6c757d);
    text-transform: uppercase;
}

.cpk-rgb-input[b-4par4xkoq0] {
    width: 100%;
    min-width: 34px;
    max-width: 50px;
    text-align: center;
    font-size: 0.72rem;
    padding: 2px 3px;
    border-radius: 6px;
}

/* ── CMJN row ── */
.cpk-cmyk-row[b-4par4xkoq0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cpk-cmyk-inputs[b-4par4xkoq0] {
    display: flex;
    gap: 4px;
    flex: 1;
}

.cpk-cmyk-field[b-4par4xkoq0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: 1;
}

.cpk-cmyk-letter[b-4par4xkoq0] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--linkooc-text-muted, #6c757d);
    text-transform: uppercase;
}

.cpk-cmyk-input[b-4par4xkoq0] {
    width: 100%;
    min-width: 34px;
    max-width: 50px;
    text-align: center;
    font-size: 0.72rem;
    padding: 2px 3px;
    border-radius: 6px;
}

/* ── Recent colors row ── */
.cpk-recents-row[b-4par4xkoq0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.cpk-recents-swatches[b-4par4xkoq0] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cpk-swatch[b-4par4xkoq0] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cpk-swatch:hover[b-4par4xkoq0] {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

.cpk-swatch.active[b-4par4xkoq0] {
    box-shadow: 0 0 0 2px var(--linkooc-primary, #3b82f6);
    border-color: var(--linkooc-primary, #3b82f6);
}
/* /Components/Common/Editors/SizeConverterComponent.razor.rz.scp.css */
/* SizeConverterComponent — inline input + unit dropdown
   Visual Identity: uses --linkooc-* CSS variables, matches ColorPickerComponent DNA */

.scv-inline[b-owa5dxg2p6] {
    display: flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    width: 100%;
}

.scv-input[b-owa5dxg2p6] {
    flex: 1;
    font-family: 'Cascadia Code', 'Consolas', 'SF Mono', monospace;
    font-size: var(--linkooc-input-size, 0.875rem);
    text-align: center;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface, #fafafa);
    color: var(--linkooc-text-display, #000601);
    min-width: 60px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.scv-input:focus[b-owa5dxg2p6] {
    border-color: var(--linkooc-primary, #08781B);
    box-shadow: 0 0 0 2px var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.1));
    outline: none;
}

.scv-unit-select[b-owa5dxg2p6] {
    width: auto;
    min-width: 80px;
    font-size: var(--linkooc-small-size, 0.75rem);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface, #fafafa);
    color: var(--linkooc-text-display, #000601);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.scv-unit-select:focus[b-owa5dxg2p6] {
    border-color: var(--linkooc-primary, #08781B);
    box-shadow: 0 0 0 2px var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.1));
    outline: none;
}
/* /Components/Common/Feedback/Skeleton.razor.rz.scp.css */
/* ==========================================================================
   Skeleton Component Styles
   A clean, shadcn-inspired skeleton loader for loading states.
   ========================================================================== */

.lk-skeleton[b-3pfoxtsvdf] {
    display: block;
    background-color: hsl(210, 10%, 91%);
    /* Neutral gray - no color tint */
}

/* Variant: Text (default) */
.lk-skeleton--text[b-3pfoxtsvdf] {
    height: 1rem;
    border-radius: 4px;
    transform-origin: 0 55%;
}

.lk-skeleton--text:empty[b-3pfoxtsvdf]::before {
    content: "\00a0";
}

/* Variant: Rectangular */
.lk-skeleton--rect[b-3pfoxtsvdf] {
    border-radius: 0;
}

/* Variant: Circular */
.lk-skeleton--circular[b-3pfoxtsvdf] {
    border-radius: 50%;
}

/* Variant: Rounded */
.lk-skeleton--rounded[b-3pfoxtsvdf] {
    border-radius: 8px;
}

/* Animation: Pulse */
.lk-skeleton--pulse[b-3pfoxtsvdf] {
    animation: lk-skeleton-pulse-b-3pfoxtsvdf 1.5s ease-in-out 0.5s infinite;
}

@keyframes lk-skeleton-pulse-b-3pfoxtsvdf {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Animation: Wave/Shimmer */
.lk-skeleton--wave[b-3pfoxtsvdf] {
    position: relative;
    overflow: hidden;
}

.lk-skeleton--wave[b-3pfoxtsvdf]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
            transparent,
            hsla(0, 0%, 100%, 0.5),
            transparent);
    animation: lk-skeleton-wave-b-3pfoxtsvdf 1.6s linear 0.5s infinite;
}

@keyframes lk-skeleton-wave-b-3pfoxtsvdf {
    100% {
        transform: translateX(100%);
    }
}

/* ==========================================================================
   SkeletonGroup Helper Classes
   Use these for common skeleton patterns.
   ========================================================================== */

.lk-skeleton-group[b-3pfoxtsvdf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lk-skeleton-group--horizontal[b-3pfoxtsvdf] {
    flex-direction: row;
    align-items: center;
}

/* Pre-defined skeleton line widths */
.lk-skeleton--w-25[b-3pfoxtsvdf] {
    width: 25%;
}

.lk-skeleton--w-33[b-3pfoxtsvdf] {
    width: 33%;
}

.lk-skeleton--w-50[b-3pfoxtsvdf] {
    width: 50%;
}

.lk-skeleton--w-66[b-3pfoxtsvdf] {
    width: 66%;
}

.lk-skeleton--w-75[b-3pfoxtsvdf] {
    width: 75%;
}

.lk-skeleton--w-100[b-3pfoxtsvdf] {
    width: 100%;
}

/* Pre-defined skeleton heights */
.lk-skeleton--h-sm[b-3pfoxtsvdf] {
    height: 0.75rem;
}

.lk-skeleton--h-md[b-3pfoxtsvdf] {
    height: 1rem;
}

.lk-skeleton--h-lg[b-3pfoxtsvdf] {
    height: 1.5rem;
}

.lk-skeleton--h-xl[b-3pfoxtsvdf] {
    height: 2rem;
}

.lk-skeleton--h-2xl[b-3pfoxtsvdf] {
    height: 3rem;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-88gi9djuoa] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-88gi9djuoa] {
    flex: 1;
}

.sidebar[b-88gi9djuoa] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-88gi9djuoa] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-88gi9djuoa]  a, .top-row[b-88gi9djuoa]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-88gi9djuoa]  a:hover, .top-row[b-88gi9djuoa]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-88gi9djuoa]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-88gi9djuoa] {
        justify-content: space-between;
    }

    .top-row[b-88gi9djuoa]  a, .top-row[b-88gi9djuoa]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-88gi9djuoa] {
        flex-direction: row;
    }

    .sidebar[b-88gi9djuoa] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-88gi9djuoa] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-88gi9djuoa]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-88gi9djuoa], article[b-88gi9djuoa] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-4ebtrvhael] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-4ebtrvhael] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-4ebtrvhael] {
    font-size: 1.1rem;
}

.bi[b-4ebtrvhael] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-4ebtrvhael] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-4ebtrvhael] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-4ebtrvhael] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-4ebtrvhael] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-4ebtrvhael] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-4ebtrvhael] {
        padding-bottom: 1rem;
    }

    .nav-item[b-4ebtrvhael]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-4ebtrvhael]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-4ebtrvhael]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-4ebtrvhael] {
        display: none;
    }

    .collapse[b-4ebtrvhael] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-4ebtrvhael] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Designer/DesignerHost.razor.rz.scp.css */
#pages-container[b-96ocnoki3t] {
    position: relative;
}

.anchors-legend-overlay[b-96ocnoki3t] {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 100;
    max-width: 280px;
    background-color: var(--linkooc-bg, #ffffff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    box-shadow: var(--linkooc-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    cursor: move;
    user-select: none;
    padding: var(--linkooc-spacing-md, 1rem);
}

.anchors-legend-swatch[b-96ocnoki3t] {
    width: 12px;
    height: 12px;
    border-radius: var(--linkooc-radius-xs, 0.25rem);
    display: inline-block;
    flex: 0 0 auto;
    margin-top: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.anchors-legend-row[b-96ocnoki3t] {
    line-height: 1.2;
    padding: var(--linkooc-spacing-xs, 0.25rem) 0;
}

.anchors-legend-row:not(:last-child)[b-96ocnoki3t] {
    border-bottom: 1px solid var(--linkooc-border-color-light, #f1f3f4);
    padding-bottom: var(--linkooc-spacing-sm, 0.5rem);
    margin-bottom: var(--linkooc-spacing-xs, 0.25rem);
}

.anchors-legend__header[b-96ocnoki3t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--linkooc-spacing-sm, 0.5rem);
    padding-bottom: var(--linkooc-spacing-sm, 0.5rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
}

.anchors-legend__title[b-96ocnoki3t] {
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 600;
    color: var(--linkooc-text, #212529);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.anchors-legend__close[b-96ocnoki3t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--linkooc-text-muted, #6c757d);
    border-radius: var(--linkooc-radius-sm, 0.375rem);
    cursor: pointer;
    transition: all 0.15s ease;
}

.anchors-legend__close:hover[b-96ocnoki3t] {
    background-color: var(--linkooc-surface, #f8f9fa);
    color: var(--linkooc-text, #212529);
}

.anchors-legend__label[b-96ocnoki3t] {
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-text, #212529);
    line-height: 1.3;
}

.anchors-legend__desc[b-96ocnoki3t] {
    font-size: var(--linkooc-small-size, 0.75rem);
    color: var(--linkooc-text-muted, #6c757d);
    line-height: 1.3;
}

/* ── Color Palette Floating Panel ── */

.color-palette-overlay[b-96ocnoki3t] {
    position: fixed;
    right: 20px;
    bottom: 160px;
    z-index: 100;
    max-width: 280px;
    min-width: 220px;
    background-color: var(--linkooc-bg, #ffffff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    box-shadow: var(--linkooc-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    cursor: move;
    user-select: none;
    padding: var(--linkooc-spacing-md, 1rem);
}

.color-palette__header[b-96ocnoki3t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--linkooc-spacing-sm, 0.5rem);
    padding-bottom: var(--linkooc-spacing-sm, 0.5rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
}

.color-palette__title[b-96ocnoki3t] {
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 600;
    color: var(--linkooc-text, #212529);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.color-palette__close[b-96ocnoki3t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--linkooc-text-muted, #6c757d);
    border-radius: var(--linkooc-radius-sm, 0.375rem);
    cursor: pointer;
    transition: all 0.15s ease;
}

.color-palette__close:hover[b-96ocnoki3t] {
    background-color: var(--linkooc-surface, #f8f9fa);
    color: var(--linkooc-text, #212529);
}

.color-palette__section[b-96ocnoki3t] {
    margin-top: var(--linkooc-spacing-sm, 0.5rem);
}

.color-palette__section-label[b-96ocnoki3t] {
    font-size: var(--linkooc-small-size, 0.75rem);
    color: var(--linkooc-text-muted, #6c757d);
    display: block;
    margin-bottom: 4px;
}

.color-palette__swatches[b-96ocnoki3t] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.color-palette__swatch[b-96ocnoki3t] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.color-palette__swatch:hover[b-96ocnoki3t] {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
/* /Pages/Designer/Dialogs/Components/LayersPanel.razor.rz.scp.css */
/* LayersPanel scoped styles */

/* Axis labels — compact z-order direction hints */
.layer-axis-label[b-fq3ztlznrc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.32);
    padding: 0.15rem 0.5rem;
    user-select: none;
}

.layer-axis-label i[b-fq3ztlznrc] {
    font-size: 0.5rem;
}

.layer-page-label[b-fq3ztlznrc] {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.4);
}

.layer-row[b-fq3ztlznrc] {
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    border-radius: 6px;
}

.layer-row:hover[b-fq3ztlznrc] {
    background: rgba(8, 120, 27, 0.04);
}

.layer-drag-handle[b-fq3ztlznrc] {
    cursor: grab;
    user-select: none;
    font-size: 1.1rem;
    opacity: 0.35;
    padding: 0 2px;
    transition: opacity 0.15s;
}

.layer-drag-handle:hover[b-fq3ztlznrc] {
    opacity: 0.8;
}

.layer-row:active .layer-drag-handle[b-fq3ztlznrc] {
    cursor: grabbing;
    opacity: 1;
}

/* Layer type badge — same as sidebar Elements tab */
.layer-type-badge[b-fq3ztlznrc] {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.55rem !important;
    min-width: 28px;
    text-align: center;
    pointer-events: none;
}

/* SortableJS feedback */

[b-fq3ztlznrc] .sortable-ghost {
    opacity: 0.35;
    background: rgba(8, 120, 27, 0.06) !important;
    border: 1.5px dashed rgba(8, 120, 27, 0.4) !important;
    border-radius: 6px;
}

[b-fq3ztlznrc] .sortable-chosen {
    box-shadow: 0 1px 6px rgba(8, 120, 27, 0.15);
}

[b-fq3ztlznrc] .sortable-drag {
    opacity: 0.92;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
}
/* /Pages/Designer/Dialogs/LayersDialog.razor.rz.scp.css */
.layers-title[b-ja3ankup1j] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.layers-title i[b-ja3ankup1j] {
    font-size: 0.75rem;
    opacity: 0.55;
}
/* /Pages/Designer/Panels/ElementDesigner/DocumentElementDesigner.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   DocumentElementDesigner - Scoped styles using Linkooc design tokens
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────── 
   Header bar - Element inspector summary strip
   ─────────────────────────────────────────────────────────────────────────── */
.linkooc-element-header[b-qnhgftuhci] {
    background-color: var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.08));
    border: 1px solid var(--linkooc-green-100, rgba(8, 120, 27, 0.15));
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    padding: var(--linkooc-spacing-xs, 0.25rem) var(--linkooc-spacing-sm, 0.5rem);
    font-size: var(--linkooc-small-size, 0.75rem);
    box-shadow: var(--linkooc-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* ─────────────────────────────────────────────────────────────────────────── 
   Element type badge (PIC, CAT, LOG, etc.)
   ─────────────────────────────────────────────────────────────────────────── */
.linkooc-element-type-badge[b-qnhgftuhci] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    padding: 0.125rem var(--linkooc-spacing-sm, 0.5rem);
    font-size: var(--linkooc-tiny-size, 0.65rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: var(--linkooc-primary, #08781B);
    color: #fff;
    cursor: default;
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────── 
   Element display name & category text
   ─────────────────────────────────────────────────────────────────────────── */
.linkooc-element-type-name[b-qnhgftuhci] {
    font-weight: 600;
    color: var(--linkooc-green-600, #025212);
    font-size: var(--linkooc-body-size, 0.875rem);
    line-height: 1.2;
}

.linkooc-element-category[b-qnhgftuhci] {
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: var(--linkooc-small-size, 0.75rem);
}

/* ─────────────────────────────────────────────────────────────────────────── 
   Matrix file indicator
   ─────────────────────────────────────────────────────────────────────────── */
.linkooc-element-matrixfile[b-qnhgftuhci] {
    display: inline-flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    max-width: 8.5rem;
    font-size: var(--linkooc-small-size, 0.75rem);
    line-height: 1.1;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.linkooc-element-matrixfile i[b-qnhgftuhci] {
    font-size: 0.85rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

/* ─────────────────────────────────────────────────────────────────────────── 
   Page badge
   ─────────────────────────────────────────────────────────────────────────── */
.linkooc-page-badge[b-qnhgftuhci] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--linkooc-spacing-sm, 0.5rem);
    border-radius: var(--linkooc-radius-lg, 1rem);
    background-color: var(--linkooc-primary, #08781B);
    color: #fff;
    font-size: var(--linkooc-tiny-size, 0.65rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────── 
   Preview mode badge
   ─────────────────────────────────────────────────────────────────────────── */
.linkooc-preview-badge[b-qnhgftuhci] {
    display: inline-flex;
    align-items: center;
    gap: var(--linkooc-spacing-xs, 0.25rem);
    padding: 0.125rem var(--linkooc-spacing-sm, 0.5rem);
    border-radius: var(--linkooc-radius-lg, 1rem);
    background-color: var(--linkooc-warning-light, rgba(255, 152, 0, 0.12));
    color: var(--linkooc-warning, #ff9800);
    font-size: var(--linkooc-tiny-size, 0.65rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────────────────── 
   Empty state - No element selected
   ─────────────────────────────────────────────────────────────────────────── */
.linkooc-element-empty[b-qnhgftuhci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--linkooc-spacing-xl, 2rem);
    margin: var(--linkooc-spacing-md, 1rem);
    border-radius: var(--linkooc-radius-md, 0.75rem);
    background-color: var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.06));
    border: 1px dashed var(--linkooc-green-100, rgba(8, 120, 27, 0.15));
}

.linkooc-element-empty-icon[b-qnhgftuhci] {
    font-size: 2rem;
    color: var(--linkooc-primary, #08781B);
    opacity: 0.5;
    margin-bottom: var(--linkooc-spacing-sm, 0.5rem);
}

.linkooc-element-empty-text[b-qnhgftuhci] {
    font-size: var(--linkooc-body-size, 0.875rem);
    font-weight: 500;
    color: var(--linkooc-text-secondary, #6d6d6d);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────── 
   Designer preview fieldset (legacy support)
   ─────────────────────────────────────────────────────────────────────────── */
.designer-preview-fieldset[b-qnhgftuhci] {
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
}

.designer-preview-fieldset[disabled][b-qnhgftuhci] {
    opacity: 1;
}
/* /Pages/Designer/Panels/ElementDesigner/DocumentElementDesignerCategoryPlacement.razor.rz.scp.css */
.category-layout-card[b-6bdgy5fjtq] {
    --layout-preview-bg: var(--linkooc-second-bg, #fefefe);
    --layout-preview-primary-row: var(--linkooc-hover-second-bg, #e7f1e8);
    --layout-preview-secondary-row: var(--linkooc-hover-bg, #f7f7f8);
    --layout-preview-tertiary-row: var(--linkooc-border-color, #dee2e6);
    --layout-preview-text-strong: var(--linkooc-text-display, #000601);
    --layout-preview-text-muted: var(--linkooc-text-secondary, #6d6d6d);

    width: 100%;
    border: 2px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    background: var(--linkooc-second-bg, #ffffff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.35rem;
    position: relative;
    color: inherit;
}

.category-layout-card:hover[b-6bdgy5fjtq] {
    border-color: var(--linkooc-button-primary, #08781B);
    box-shadow: 0 2px 6px var(--linkooc-button-primary-rgba, rgba(8, 120, 27, 0.2));
    transform: translateY(-1px);
}

.category-layout-card:focus[b-6bdgy5fjtq] {
    outline: none;
    box-shadow: 0 0 0 2px var(--linkooc-button-primary-rgba, rgba(8, 120, 27, 0.3));
}

.category-layout-card.selected[b-6bdgy5fjtq] {
    border-color: var(--linkooc-button-primary, #08781B);
    background-color: var(--linkooc-button-primary-rgba, rgba(8, 120, 27, 0.08));
    box-shadow: 0 0 0 2px var(--linkooc-button-primary-rgba, rgba(8, 120, 27, 0.25));
}

.category-preview[b-6bdgy5fjtq] {
    width: 120px;
    height: 70px;
    background-color: var(--layout-preview-bg);
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--layout-preview-text-strong);
    font-size: 0.7rem;
    font-weight: 500;
    box-sizing: border-box;
}

.category-preview .category-title[b-6bdgy5fjtq],
.category-preview .category-body.left .category-title-inline[b-6bdgy5fjtq] {
    background-color: var(--layout-preview-primary-row);
    border-radius: 6px;
    padding: 0.15rem 0.3rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.category-preview .category-body[b-6bdgy5fjtq] {
    background-color: var(--layout-preview-secondary-row);
    border-radius: 6px;
    padding: 0.35rem 0.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    flex: 1 1 auto;
    min-height: 36px;
    overflow: hidden;
}

.category-preview .category-body.left[b-6bdgy5fjtq] {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.category-preview .category-body.left .category-title-inline[b-6bdgy5fjtq] {
    flex: 0 0 auto;
}

.category-preview .category-body.left .container-chip[b-6bdgy5fjtq] {
    flex: 0 0 auto;
}

.category-preview .category-body .container-chip[b-6bdgy5fjtq] {
    background-color: var(--layout-preview-tertiary-row);
    border-radius: 999px;
    padding: 0.1rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--layout-preview-text-muted);
    white-space: nowrap;
}

.category-label[b-6bdgy5fjtq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--linkooc-button-primary, #08781B);
}

.layout-selected-badge[b-6bdgy5fjtq] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--linkooc-button-primary, #08781B);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

@media (max-width: 320px) {
    .category-layout-card[b-6bdgy5fjtq] {
        padding: 0.45rem 0.35rem;
    }
}

/* ── Category Title Price section ── */
.category-title-price-section[b-6bdgy5fjtq] {
    font-size: 0.8125rem;
}

/* Tighter border-radius on ComboBox & inputs for readability */
.category-title-price-section[b-6bdgy5fjtq]  .k-combobox .k-input-inner,
.category-title-price-section[b-6bdgy5fjtq]  .k-combobox,
.category-title-price-section[b-6bdgy5fjtq]  .k-input,
.category-title-price-section[b-6bdgy5fjtq]  .k-picker,
.category-title-price-section .form-control[b-6bdgy5fjtq] {
    border-radius: 4px !important;
}

/* Dropdown popup border-radius: handled globally in app.css
   (Telerik renders popups at <body> level, outside component scope) */
/* /Pages/Designer/Panels/ElementDesigner/DocumentElementDesignerLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   DocumentElementDesignerLayout — inline preview + Modifier btn
   ═══════════════════════════════════════════════════════════ */

/* Inline preview of selected layout in sidebar */
.layout-inline-preview[b-d7480oafvq] {
    display: flex;
    justify-content: center;
    padding: 0.35rem 0.2rem;
    border: 1.5px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 6px;
    background: var(--linkooc-second-bg, #ffffff);
    pointer-events: none;
    white-space: normal;
    /* override Telerik .k-menu-link nowrap inheritance */
}

/* Shared max-width column visual — identical to sub-panel cards */
.layout-inline-preview[b-d7480oafvq]  .lp-width-area {
    position: relative;
    width: 130px;
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 2px dashed rgba(8, 120, 27, 0.35);
}

.layout-inline-preview[b-d7480oafvq]  .layout-preview-items {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Mock item styles — identical to sub-panel */
.layout-inline-preview[b-d7480oafvq]  .lp-mock-item {
    padding: 0.15rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.layout-inline-preview[b-d7480oafvq]  .lp-mock-item:last-child {
    border-bottom: none;
}

.layout-inline-preview[b-d7480oafvq]  .lp-vertical,
.layout-inline-preview[b-d7480oafvq]  .lp-two-area {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
}

.layout-inline-preview[b-d7480oafvq]  .lp-primary-line {
    font-size: 0.6rem;
    line-height: 1.3;
}

.layout-inline-preview[b-d7480oafvq]  .lp-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.layout-inline-preview[b-d7480oafvq]  .lp-desc {
    font-size: 0.6rem;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.3;
}

.layout-inline-preview[b-d7480oafvq]  .lp-trad {
    font-size: 0.6rem;
    font-weight: 400;
    font-style: italic;
    color: #7c3aed;
    line-height: 1.3;
}

.layout-inline-preview[b-d7480oafvq]  .lp-inline {
    display: inline;
}

.layout-selected-summary[b-d7480oafvq] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0 0.1rem;
}

.layout-modifier-btn[b-d7480oafvq] {
    flex-shrink: 0;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--linkooc-button-primary, #08781B);
    border-radius: 4px;
    background: transparent;
    color: var(--linkooc-button-primary, #08781B);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.layout-modifier-btn:hover[b-d7480oafvq] {
    background: var(--linkooc-button-primary, #08781B);
    color: #fff;
}

.layout-modifier-btn:focus[b-d7480oafvq] {
    outline: none;
    box-shadow: 0 0 0 2px var(--linkooc-button-primary-rgba, rgba(8, 120, 27, 0.3));
}
/* /Pages/Designer/Panels/LayoutPreview/LayoutPreviewPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   LayoutPreviewPanel — compact, color-coded layout previews
   At least 4 cards visible on a standard desktop viewport.
   Max-width column visualization shows wrapping behavior.
   ═══════════════════════════════════════════════════════════ */

.layout-preview-panel[b-vzispx951k] {
    position: fixed;
    top: var(--linkooc-navbar-designer-height, 56px);
    right: var(--linkooc-sidebar-designer-width, 259px);
    bottom: 0;
    width: 280px;
    background: var(--linkooc-second-bg, #ffffff);
    border-left: 1px solid var(--linkooc-border-color, #dee2e6);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 19;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: layout-panel-slide-in-b-vzispx951k 0.2s ease-out;
}

@keyframes layout-panel-slide-in-b-vzispx951k {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ── Header ── */

.layout-preview-header[b-vzispx951k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--linkooc-text-primary, #000601);
    flex-shrink: 0;
}

.layout-preview-close[b-vzispx951k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    transition: background 0.15s;
}

.layout-preview-close:hover[b-vzispx951k] {
    background: var(--linkooc-hover-bg, #f0f0f0);
}

/* ── Color legend strip ── */

.lp-legend[b-vzispx951k] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    flex-shrink: 0;
}

.lp-legend-dot[b-vzispx951k] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lp-legend-name[b-vzispx951k] {
    background: #1e293b;
}

.lp-legend-desc[b-vzispx951k] {
    background: #6b7280;
}

.lp-legend-trad[b-vzispx951k] {
    background: #7c3aed;
}

.lp-legend-desc-trad[b-vzispx951k] {
    background: #2563eb;
}

.lp-legend-label[b-vzispx951k] {
    font-size: 0.62rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    margin-right: 0.3rem;
}

/* ── Scrollable list ── */

.layout-preview-list[b-vzispx951k] {
    flex: 1;
    overflow-y: auto;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* ── Each clickable layout card ── */

.layout-preview-option[b-vzispx951k] {
    position: relative;
    width: 100%;
    padding: 0.35rem 0.45rem;
    border: 1.5px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 6px;
    background: var(--linkooc-second-bg, #ffffff);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left;
    color: inherit;
    font: inherit;
}

.layout-preview-option:hover[b-vzispx951k] {
    border-color: var(--linkooc-button-primary, #08781B);
    box-shadow: 0 1px 4px rgba(8, 120, 27, 0.1);
}

.layout-preview-option:focus[b-vzispx951k] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(8, 120, 27, 0.25);
}

.layout-preview-option.selected[b-vzispx951k] {
    border-color: var(--linkooc-button-primary, #08781B);
    background: rgba(8, 120, 27, 0.03);
    box-shadow: 0 0 0 1.5px rgba(8, 120, 27, 0.18);
}

/* ── Check badge ── */

.layout-preview-check[b-vzispx951k] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--linkooc-button-primary, #08781B);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ── Card body: centers the width-area ── */

.lp-card-body[b-vzispx951k] {
    display: flex;
    justify-content: center;
}

/* ── Max-width column — the key visual ──
   A constrained-width zone with a dashed green right border
   so the user sees exactly how text wraps at the boundary.
   Width is kept tight so text ACTUALLY hits the edge & wraps. */

[b-vzispx951k] .lp-width-area {
    position: relative;
    width: 130px;
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 2px dashed rgba(8, 120, 27, 0.35);
}

/* ── Preview items area ── */

.layout-preview-items[b-vzispx951k] {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════
   Mock item styles — color-coded by role
   Using ::deep since these are rendered via RenderTreeBuilder
   ═══════════════════════════════════════════════════════════ */

/* Item wrapper */
[b-vzispx951k] .lp-mock-item {
    padding: 0.15rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

[b-vzispx951k] .lp-mock-item:last-child {
    border-bottom: none;
}

/* ── Vertical layout (L1, L2) ── */

[b-vzispx951k] .lp-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
}

/* ── Two-area layout (L3, L4, L5) ── */

[b-vzispx951k] .lp-two-area {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
}

[b-vzispx951k] .lp-primary-line {
    font-size: 0.6rem;
    /* match desc so strut doesn't inflate lines */
    line-height: 1.3;
}

/* ── Role colors ── */

/* Item name: dark, bold */
[b-vzispx951k] .lp-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

/* Description: gray, lighter weight */
[b-vzispx951k] .lp-desc {
    font-size: 0.6rem;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.3;
}

/* Translation: purple, italic */
[b-vzispx951k] .lp-trad {
    font-size: 0.6rem;
    font-weight: 400;
    font-style: italic;
    color: #7c3aed;
    line-height: 1.3;
}

/* Description translation: blue, italic */
[b-vzispx951k] .lp-desc-trad {
    font-size: 0.6rem;
    font-weight: 400;
    font-style: italic;
    color: #2563eb;
    line-height: 1.3;
}

/* Inline flowing text (for two-area layouts) */
[b-vzispx951k] .lp-inline {
    display: inline;
}
/* /Pages/Designer/Panels/Wizard/DocumentElementWizard.razor.rz.scp.css */