/* === RESPONSIVE === */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 240px;
    }

    .toolbar .btn-label {
        display: none;
    }

    .canvas-overlay {
        width: 60%;
    }

    .kit-builder {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 100%;
        --toolbar-height: 48px;
    }

    .toolbar-brand .brand-text {
        display: none;
    }

    .toolbar .btn-label {
        display: none;
    }

    .main-content {
        flex-direction: column-reverse;
    }

    .sidebar {
        width: 100%;
        min-width: 100%;
        max-height: 45vh;
        border-right: none;
        border-top: 1px solid var(--border);
    }

    .viewport {
        height: 55vh;
    }

    .canvas-overlay {
        width: 100%;
        height: 100%;
    }

    .viewport-controls {
        flex-direction: row;
        top: auto;
        bottom: 60px;
        right: 50%;
        transform: translateX(50%);
    }

    .toggle-canvas-btn {
        bottom: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .kit-builder {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .color-palette {
        grid-template-columns: repeat(6, 1fr);
    }

    .templates-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .toolbar-center {
        display: none;
    }

    .sidebar-tab .tab-label {
        display: none;
    }

    .sidebar-tab {
        padding: 8px;
    }

    .sidebar-tab .material-icons-outlined {
        font-size: 22px;
    }
}