/*
    Sudoclet UI Designer
    Version 0.3

    The preview now behaves as a two-dimensional drawing surface.
*/


/* Make width/height calculations predictable. */
* {
    box-sizing: border-box;
}


body {
    margin: 0;

    background: #111318;
    color: #eeeeee;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ---------------------------------------------------------
   APPLICATION HEADER
   --------------------------------------------------------- */

.app-header {
    padding: 16px 22px;

    background: #191c22;

    border-bottom: 1px solid #343841;
}

.app-header h1 {
    margin: 0;
}

.app-header p {
    margin: 5px 0 0;

    color: #aaaaaa;
}


/* ---------------------------------------------------------
   MAIN WORKSPACE
   --------------------------------------------------------- */

.workspace {
    display: grid;

    grid-template-columns:
        minmax(230px, 280px)
        minmax(400px, 1fr)
        minmax(300px, 400px);

    gap: 12px;

    padding: 12px;

    min-height: calc(100vh - 85px);
}


.panel {
    padding: 18px;

    background: #191c22;

    border: 1px solid #343841;
    border-radius: 10px;
}


.panel h2 {
    margin-top: 0;
}


/* ---------------------------------------------------------
   PROPERTY CONTROLS
   --------------------------------------------------------- */

.controls-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.controls-panel label {
    margin-top: 8px;

    color: #cccccc;
}


.controls-panel input[type="text"],
.controls-panel input[type="number"] {
    padding: 8px;

    background: #111318;
    color: #eeeeee;

    border: 1px solid #454a55;
    border-radius: 5px;
}


.controls-panel output {
    color: #aaaaaa;
}


/* ---------------------------------------------------------
   PREVIEW PANEL
   --------------------------------------------------------- */

.preview-panel {
    overflow: auto;
}


/*
    This is the ROOT SURFACE.

    Unlike our containers, the surface has a width and height.

    position: relative
        Establishes the coordinate system used by absolutely positioned
        elements inside the surface.

    overflow: hidden
        Causes the browser to clip anything extending beyond the surface.
*/
.preview-surface {
    position: relative;

    width: 390px;
    height: 700px;

    margin: 0 auto;

    background: #f4f4f4;

    border-radius: 8px;

    overflow: hidden;
}


/*
    Every visible UI object generated by the designer uses absolute
    positioning.

    JavaScript supplies the actual left/top coordinates.
*/
.designer-element {
    position: absolute;
}


/*
    Basic appearance for button elements.

    Size, position, colors, font size, etc. will be supplied by the
    JavaScript design model.
*/
.designer-button {
    border: none;

    cursor: default;
}


/* ---------------------------------------------------------
   DESIGN MODEL DISPLAY
   --------------------------------------------------------- */

#designModel {
    margin: 0;

    padding: 12px;

    background: #111318;
    color: #b9e6b9;

    border-radius: 6px;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   SMALLER WINDOWS
   --------------------------------------------------------- */

@media (max-width: 950px) {

    .workspace {
        grid-template-columns: 1fr;
    }

}
/* Button creation and selection are editor controls, outside the design model. */
.add-button {
    padding: 10px 14px;
    border: 1px solid #8892ff;
    border-radius: 5px;
    background: #5865f2;
    color: #ffffff;
    font: inherit;
    cursor: pointer;
}

.controls-panel select {
    width: 100%;
    min-width: 0;
    padding: 8px;
    border: 1px solid #454a55;
    border-radius: 5px;
    background: #111318;
    color: #eeeeee;
    font: inherit;
}

.editor-hint {
    margin: 0 0 12px;
    color: #aaaaaa;
    font-size: 13px;
    line-height: 1.5;
}

.designer-button {
    cursor: pointer;
}

.designer-button.is-selected {
    outline: 3px solid #182747;
    outline-offset: 3px;
}

.add-button:focus-visible,
.controls-panel select:focus-visible,
.designer-button:focus-visible {
    outline: 3px solid #ec9706;
    outline-offset: 3px;
}