/* =========================================
   JOY NAIL MAKER
   Responsive Styles
========================================= */


/* =========================================
   TABLET
   601px - 991.98px
========================================= */

@media (max-width: 991.98px) and (min-width: 651px) {

    .app-page {
        padding: 24px 18px 20px;
    }

    .brand-header {
        order: 3;
        margin-top: 28px;
        margin-bottom: 10px;
    }

    .brand-logo {
        width: 210px;
        max-width: 62%;
    }

    .editor-shell {
        width: min(900px, 100%);
        padding: 24px;
    }

    .editor-menu {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
        padding: 10px;
        margin-bottom: 22px;
    }

    .menu-item {
        min-width: 0;
        min-height: 44px;
        padding: 8px 6px;
        gap: 6px;
        font-size: 13px;
    }

    .menu-item svg {
        width: 18px;
        height: 18px;
    }

    .editor-workspace {
        grid-template-columns:
            minmax(210px, 0.75fr)
            minmax(0, 1.25fr);

        gap: 20px;
    }

    .tool-panel,
    .canvas-panel {
        height: 500px;
        min-height: 0;
    }

    .app-footer {
        order: 4;
        margin-top: 4px;
    }
}


/* =========================================
   MOBILE
   650px and below
========================================= */

@media (max-width: 650px) {

    body {
        background-attachment: scroll;
    }

    .app-page {
        width: 100%;
    }

    /*
       Full-width mobile editor
    */

    .editor-shell {
        order: 1;

        width: 100%;
        max-width: 500px;

        padding: 14px;

        border-radius: 20px;
    }

    .brand-header {
        order: 2;

        width: 100%;

        margin-top: 24px;
        margin-bottom: 6px;
    }

    .brand-logo {
        width: 170px;
        max-width: 65%;
    }

    .app-footer {
        order: 3;

        margin-top: 2px;

        font-size: 13px;
    }


    /* =====================================
       MENU
    ===================================== */

    .editor-menu {
        display: grid;

        grid-template-columns: repeat(6, minmax(0, 1fr));

        width: 100%;

        gap: 8px;

        padding: 7px;

        margin-bottom: 18px;

        overflow: hidden;
    }

    .menu-item {
        min-width: 0;
        min-height: 58px;

        padding: 6px 1px;

        flex-direction: column;
        justify-content: center;

        gap: 4px;

        border-radius: 9px;

        font-size: 11px;

        white-space: nowrap;
    }

    .menu-item svg {
        width: 17px;
        height: 17px;
    }


    /* =====================================
       WORKSPACE
    ===================================== */

    .editor-workspace {
        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 20px;
    }

    .canvas-panel {
        order: 1;

        width: 100%;
        height: 400px;
        min-height: 0;

        aspect-ratio: 5 / 5;
    }

    .tool-panel {
        order: 2;
        width: 100%;
        height: 360px;
        min-height: 0;
        aspect-ratio: auto;
    }


    /* Zoom */

    .zoom-controls {
        right: 10px;
    }


    /* Bottom actions */

    .canvas-actions {
        bottom: 14px;

        gap: 6px;

        padding: 6px 8px;
    }

    .circle-action {
        width: 34px;
        height: 34px;
    }

    .circle-action svg {
        width: 16px;
        height: 16px;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 420px) {

    .editor-shell {
        padding: 10px;
    }

    .editor-menu {
        gap: 6px;
        padding: 6px;
    }

    .menu-item {
        min-height: 54px;
        font-size: 9px;
    }

    .menu-item svg {
        width: 16px;
        height: 16px;
    }

    .canvas-actions {
        gap: 4px;
    }

    .circle-action {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 650px) {

    .shape-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 8px;
    }

    .shape-card {
        padding:
            9px 4px 8px;
    }

    .shape-preview {
        width: 42px;
        height: 60px;
    }

    .shape-card span {
        font-size: 10px;
    }

}