/* ============================================================================
   Masahati - 3D planner structure (Phase 3B)
   Loaded AFTER style.css (and theme-pink.css). Contains ONLY the rules the
   3D-only workspace needs, so it works with whichever style.css is deployed.
   ============================================================================ */

/* Workspace: the Konva container (kept alive in the background for PNG export)
   and the 3D container share one stack. Konva keeps real layout dimensions via
   visibility:hidden - never display:none - so its stage stays correctly sized. */
.canvas-stack {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.canvas-stack > .canvas-container {
    position: absolute;
    inset: 0;
    flex: none;
}

.canvas-stack > .canvas-container.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

/* 3D view */
.canvas-container.three-view {
    display: flex;
    flex-direction: column;
    background-color: #F3E9E4;
}

.three-view-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(90deg, #F6DAD4, #F1C9C0);
    color: #5B3A3F;
    font-size: 13px;
    border-bottom: 1px solid #E8C7C2;
}

.three-hint {
    opacity: 0.95;
    text-align: center;
}

.three-canvas-host {
    flex: 1;
    position: relative;
    min-height: 0;
    background-color: #F3E9E4;
}

.three-canvas-host canvas {
    display: block;
    outline: none;
    /* No text selection / long-press callouts while dragging furniture or looking around */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---- Properties panel on narrower screens ----
   style.css hides .right-panel (the furniture properties: rotation, size,
   duplicate, delete) at 1200px and below. In a 3D-only planner that panel is the
   ONLY place to edit a selected piece, so it must stay reachable: it drops to a full-width row under the
   workspace. (Nothing else about the existing layout changes.) */
@media (max-width: 1200px) {
    .planner-container {
        height: auto;
    }

    .left-panel,
    .canvas-area {
        height: calc(100vh - 120px);
        min-height: 460px;
    }

    .right-panel {
        display: block;
        grid-column: 1 / -1;
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 768px) {
    .three-view-bar {
        font-size: 11.5px;
        padding: 0.4rem 0.5rem;
    }

    /* Small screens stack everything in one column. The older rule fixed the
       whole workspace at 400px, which the header, hint bar and ad slot almost
       entirely consumed - leaving the 3D view ~95px tall. Give the 3D stack its
       own real height and show the room first, controls below it. */
    .canvas-area {
        height: auto;
        min-height: 0;
        order: -2;
    }

    .left-panel {
        height: auto;
        min-height: 0;
    }

    .right-panel {
        grid-column: auto;
        order: -1;
    }

    .canvas-stack {
        flex: none;
        height: 62vh;
        min-height: 340px;
        max-height: 560px;
    }
}

/* ---- Precise rotation control (Phase 3C): layout only, colors come from the active theme ---- */
.rotation-buttons {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    direction: ltr;               /* row reads  -15°  |  90°  |  +15°  left-to-right, even inside the RTL panel */
}

.rotation-buttons .btn {
    flex: 1;
    width: auto;
    margin-bottom: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    min-height: 40px;             /* comfortable touch target */
    direction: ltr;               /* keep "-15°  90°  +15°" reading left-to-right, minus on the left */
    white-space: nowrap;
}

.rotation-readout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    direction: ltr;
}

.rotation-readout input[type="number"] {
    width: 6.5rem;
    text-align: center;
    font-weight: 600;
}

.rotation-unit {
    font-weight: 600;
}