/* tavle-viewport.css - v2.0.3
   The transformed board exists only on touch phones and tablets. Desktop and
   large touch displays keep Tavle's original viewport geometry. */

.board-transform-surface {
    display: contents;
}

.workspace.mobile-board-viewport {
    touch-action: none;
}

.workspace.mobile-board-viewport .board-transform-surface {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}

.workspace.mobile-board-viewport .board-background-surface {
    z-index: 0;
    overflow: hidden;
}

.workspace.mobile-board-viewport .board-widget-surface {
    z-index: 10;
    pointer-events: none;
}

.workspace.mobile-board-viewport .board-widget-surface > .widget {
    pointer-events: auto;
}

.workspace.mobile-board-viewport .board-math-surface {
    z-index: 20;
    pointer-events: none;
}

.workspace.mobile-board-viewport .board-math-surface > :is(.mb-mat, .mb-tools, .mb-total-top, .mb-mat-close) {
    pointer-events: auto;
}

.workspace.mobile-board-viewport .grid-background,
.workspace.mobile-board-viewport .drawing-canvas {
    overflow: visible;
}

body.tavle-mobile-viewport .dagsplan-tab .tab-preview-dots {
    display: none;
}

body.tavle-mobile-viewport .toolbar-container {
    bottom: max(8px, env(safe-area-inset-bottom));
}

body.tavle-mobile-viewport .toolbar,
body.tavle-mobile-viewport .menu-switcher,
body.tavle-mobile-viewport .shape-category-tabs {
    max-width: calc((100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)) / var(--toolbar-scale, 0.7));
}

body.tavle-mobile-viewport .menu-switcher {
    overflow-x: auto;
    flex-shrink: 0;
}

body.tavle-mobile-viewport .menu-switcher > button {
    flex-shrink: 0;
}

body.tavle-mobile-viewport .top-left-controls {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
}

body.tavle-mobile-viewport .top-controls {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    gap: 4px;
}

body.tavle-mobile-viewport .page-navigation {
    right: max(4px, env(safe-area-inset-right));
}

body.tavle-mobile-viewport .top-btn,
body.tavle-mobile-viewport .page-navigation .page-btn {
    min-width: 44px;
    min-height: 44px;
}

@media (orientation: portrait) {
    body.tavle-mobile-viewport .page-navigation {
        right: env(safe-area-inset-right, 0px);
        bottom: max(110px, env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        width: 48px;
        padding: 4px;
        gap: 4px;
    }

    body.tavle-mobile-viewport .page-navigation .page-btn {
        min-width: 0;
        min-height: 0;
        width: 26px;
        height: 26px;
        font-size: 16px;
    }

    body.tavle-mobile-viewport .page-navigation .page-btn.delete {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    body.tavle-mobile-viewport .page-navigation .page-btn.delete svg {
        width: 24px;
        height: 24px;
    }

    body.tavle-mobile-viewport .page-navigation .page-btn svg {
        width: 14px;
        height: 14px;
    }

    body.tavle-mobile-viewport .page-navigation .page-info {
        font-size: 11px;
        padding: 3px 2px;
    }

    body.tavle-mobile-viewport .page-navigation-loading {
        bottom: 17px;
    }
}

body.tavle-mobile-viewport .chalk-panel,
body.tavle-mobile-viewport .bg-panel,
body.tavle-mobile-viewport .starter-panel,
body.tavle-mobile-viewport .mb-panel,
body.tavle-mobile-viewport .cd-picker-panel {
    max-width: calc(100vw - env(safe-area-inset-left));
    max-height: 100dvh;
}

body.tavle-mobile-viewport .bg-panel.helpers {
    width: min(440px, calc(100vw - env(safe-area-inset-left)));
}

@media (orientation: landscape) {
    body.tavle-mobile-viewport .top-left-controls,
    body.tavle-mobile-viewport .top-controls {
        top: max(6px, env(safe-area-inset-top));
    }

    body.tavle-mobile-viewport .toolbar-container {
        bottom: max(6px, env(safe-area-inset-bottom));
    }

    body.tavle-mobile-viewport .page-navigation {
        display: grid;
        grid-template-columns: repeat(2, 44px);
        width: max-content;
        gap: 4px;
        padding: 4px;
        bottom: max(8px, env(safe-area-inset-bottom));
    }

    body.tavle-mobile-viewport .page-navigation > button {
        width: 44px;
        height: 44px;
    }

    body.tavle-mobile-viewport .page-navigation .page-info {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
}