/* Page designer (report-card templates and certificate designs) — Components/AcademicComponents/PageDesigner.razor. */
.msd-root {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.msd-panel {
    flex: 0 0 440px;
    max-width: 440px;
    height: calc(100vh - 110px);
    overflow-y: auto;
    padding-inline-end: 6px;
}

.msd-canvas {
    flex: 1 1 auto;
    min-width: 0;
    height: calc(100vh - 110px);
    overflow: auto;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    padding: 12px;
}

.msd-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.msd-zoom {
    margin: 0 auto;
}

.msd-element-list {
    max-height: 260px;
    overflow-y: auto;
}

.msd-element-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .msd-element-row.selected {
        background: var(--mud-palette-primary-hover);
    }

.msd-element-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
}

@media (max-width: 1100px) {
    .msd-root {
        flex-direction: column;
    }

    .msd-panel {
        flex-basis: auto;
        max-width: none;
        width: 100%;
        height: auto;
    }

    .msd-canvas {
        width: 100%;
    }
}