/* Diagram Planner mobile/tablet polish — scoped; desktop layout unchanged above 768px */

.diagram-editor-toolbar-mobile {
    display: none;
}

.diagram-editor-toolbar-desktop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.diagram-editor-page {
    --diagram-editor-mobile-toolbar-height: 7.25rem;
    --diagram-editor-site-header-offset: 0px;
}

html.planner-mobile-active,
html.planner-mobile-active body {
    overscroll-behavior-y: none;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    .el-root:has(.diagram-editor-page) {
        --diagram-editor-site-header-offset: 2.75rem;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .el-root:has(.diagram-editor-page) .topbar,
    .el-root:has(.diagram-editor-page) .header-inner,
    .el-root:has(.diagram-editor-page) .search-top,
    .el-root:has(.diagram-editor-page) .search-bar-top,
    .el-root:has(.diagram-editor-page) .right-bar,
    .el-root:has(.diagram-editor-page) .mobile-nav {
        display: none !important;
    }

    .el-root:has(.diagram-editor-page) .middle-inner {
        padding: 2px 0;
    }

    .el-root:has(.diagram-editor-page) .middle-inner .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .el-root:has(.diagram-editor-page) .logo,
    .el-root:has(.diagram-editor-page) .logo-width-1 {
        margin: 0;
    }

    .el-root:has(.diagram-editor-page) .logo img,
    .el-root:has(.diagram-editor-page) .logo-width-1 img {
        max-height: 30px;
        width: auto;
    }

    .el-root:has(.diagram-editor-page) .header.shop {
        flex-shrink: 0;
    }

    .el-root:has(.diagram-editor-page) .el-main {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .el-root:has(.diagram-editor-page) .footer.footer {
        flex-shrink: 0;
        margin-top: auto;
    }

    .diagram-editor-page {
        padding: 0.3rem 0.4rem 0.35rem;
        gap: 0.3rem;
        overflow: hidden;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-width: 100%;
    }

    .diagram-editor-main {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .diagram-editor-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.35rem 0.4rem;
        flex-shrink: 0;
    }

    .diagram-editor-toolbar-desktop {
        display: none;
    }

    .diagram-editor-toolbar-mobile {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        width: 100%;
    }

    .diagram-editor-toolbar-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
        min-width: 0;
    }

    .diagram-editor-toolbar-row-head {
        justify-content: space-between;
    }

    .diagram-editor-toolbar-row-head .diagram-editor-title-shell {
        flex: 1 1 6rem;
        min-width: 0;
    }

    .diagram-editor-toolbar-row-head .diagram-editor-title {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .diagram-editor-toolbar-row-head .diagram-editor-save-status {
        flex-shrink: 0;
        max-width: 42%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .diagram-editor-toolbar-row-primary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
        align-items: stretch;
    }

    .diagram-editor-toolbar-row-primary .diagram-editor-btn-primary {
        font-weight: 700;
        box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35);
    }

    .diagram-editor-toolbar-more-wrap {
        position: relative;
        grid-column: 1 / -1;
        display: flex;
        justify-content: stretch;
    }

    .diagram-editor-btn-touch {
        min-height: 2.5rem;
        min-width: 2.5rem;
        padding: 0.45rem 0.5rem;
        font-size: 0.78rem;
        touch-action: manipulation;
    }

    .diagram-editor-btn-more {
        width: 100%;
        min-width: 0;
    }

    .diagram-editor-toolbar-more-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1200;
        border: 0;
        padding: 0;
        margin: 0;
        background: rgba(0, 0, 0, 0.5);
        cursor: pointer;
        touch-action: manipulation;
    }

    .diagram-editor-toolbar-more-menu {
        display: none;
        position: fixed;
        left: 0.5rem;
        right: 0.5rem;
        bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        top: auto;
        z-index: 1201;
        max-height: min(70vh, 28rem);
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.65rem;
        border-radius: 14px 14px 10px 10px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(15, 23, 32, 0.98);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    }

    .diagram-editor-toolbar-more-menu.is-open {
        display: flex;
    }

    .diagram-editor-toolbar-more-menu .diagram-editor-btn-touch {
        width: 100%;
        justify-content: center;
        min-height: 2.75rem;
    }

    .diagram-editor-page.mobile-more-open .diagram-editor-toolbar {
        position: relative;
        z-index: 1202;
    }

    .diagram-editor-body {
        flex: 1 1 auto;
        min-height: 0;
        gap: 0.28rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .diagram-editor-statusbar {
        flex-shrink: 0;
        gap: 0.28rem;
        padding: 0.3rem 0.4rem;
    }

    .diagram-editor-status-chip {
        min-height: 1.3rem;
        padding: 0.06rem 0.38rem;
        font-size: 0.7rem;
    }

    .diagram-editor-status-chip--optional {
        display: none;
    }

    .diagram-editor-rename-panel--compact {
        flex-shrink: 0;
    }

    .diagram-editor-rename-panel--compact .diagram-editor-rename-controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .diagram-editor-rename-panel--compact .diagram-editor-btn {
        width: 100%;
        min-height: 2.5rem;
    }

    .diagram-editor-canvas-shell,
    .diagram-editor-canvas-host {
        flex: 1 1 auto;
        min-height: calc(100dvh - var(--diagram-editor-mobile-toolbar-height) - var(--diagram-editor-site-header-offset) - 4.75rem);
        max-height: none;
        border-radius: 10px;
        touch-action: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .diagram-editor-canvas-shell ::deep .e-diagram,
    .diagram-editor-canvas-shell ::deep .e-diagram-content,
    .diagram-editor-canvas-shell ::deep .e-diagram-layer,
    .diagram-editor-canvas-shell ::deep .e-diagram-blazor-diagramcontent,
    .diagram-editor-canvas-shell ::deep .e-diagram-blazor-svg-layer {
        touch-action: none;
    }

    .diagram-editor-versions-panel {
        flex-shrink: 0;
    }

    .diagram-editor-versions-accordion > .diagram-editor-versions-accordion-summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .diagram-editor-versions-accordion > .diagram-editor-versions-accordion-summary::-webkit-details-marker {
        display: none;
    }

    .diagram-editor-versions-accordion > .diagram-editor-versions-accordion-summary::after {
        content: "▾";
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.55);
        transition: transform 140ms ease;
    }

    .diagram-editor-versions-accordion[open] > .diagram-editor-versions-accordion-summary::after {
        transform: rotate(-180deg);
    }

    .diagram-editor-versions-accordion-body {
        margin-top: 0.3rem;
    }

    .diagram-editor-version-action {
        min-height: 2.5rem;
        min-width: 2.5rem;
        padding: 0.35rem 0.65rem;
        font-size: 0.78rem;
    }

    .diagram-editor-version-row {
        flex-direction: column;
        align-items: stretch;
    }

    .diagram-editor-version-actions {
        width: 100%;
        justify-content: stretch;
    }

    .diagram-editor-version-actions .diagram-editor-version-action {
        flex: 1 1 calc(50% - 0.2rem);
    }

    .diagram-editor-versions-list {
        max-height: min(28vh, 11rem);
    }

    .diagram-editor-export-panel {
        flex-shrink: 0;
    }
}

@media (min-width: 769px) {
    .diagram-editor-versions-accordion > .diagram-editor-versions-accordion-summary {
        pointer-events: none;
        cursor: default;
    }

    .diagram-editor-versions-accordion > .diagram-editor-versions-accordion-summary::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .diagram-editor-page {
        --diagram-editor-mobile-toolbar-height: 8.75rem;
        padding: 0.22rem 0.32rem 0.3rem;
    }

    .diagram-editor-version-stat,
    .diagram-editor-versions-help {
        display: none;
    }

    .diagram-editor-toolbar-row-primary {
        grid-template-columns: 1fr 1fr;
    }

    .diagram-editor-toolbar-row-primary .diagram-editor-btn-touch:nth-child(1) {
        grid-column: 1;
    }

    .diagram-editor-toolbar-row-primary .diagram-editor-btn-touch:nth-child(2) {
        grid-column: 2;
    }

    .diagram-editor-toolbar-row-primary .diagram-editor-btn-primary {
        grid-column: 1 / -1;
    }

    .diagram-editor-canvas-shell,
    .diagram-editor-canvas-host {
        min-height: calc(100dvh - var(--diagram-editor-mobile-toolbar-height) - var(--diagram-editor-site-header-offset) - 4rem);
    }
}

@media (max-width: 430px) {
    .diagram-editor-status-chip--connectors {
        display: none;
    }

    .diagram-editor-status-chip {
        font-size: 0.66rem;
        padding: 0.05rem 0.32rem;
    }
}