/* ============================================================
   canvas-mobile.css  —  import AFTER canvas.css
   ============================================================ */

/* ── 1. Sidebar overlay < 1024px ─────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 500;
        width: 0 !important;
        overflow: hidden;
        transition: width 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s ease !important;
    }

        .sidebar.open {
            width: 260px !important;
            overflow: visible !important;
            box-shadow: 4px 0 24px rgba(0,0,0,.18) !important;
        }

    .canvas-app.sidebar-open-mobile::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 499;
        pointer-events: auto;
    }

    .canvas-main {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ── 2. Right panel ẩn ≤ 768px ───────────────────────────────── */
@media (max-width: 768px) {
    .right-panel {
        display: none !important;
    }
}

/* ── 3. Panel trigger — chỉ hiện ≤ 768px ────────────────────── */
.panel-trigger-btn {
    display: none;
}

@media (max-width: 768px) {
    .panel-trigger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 7px;
        border: none;
        background: none;
        cursor: pointer;
        color: #6b7280;
        padding: 0;
        flex-shrink: 0;
        position: relative;
        transition: background 0.1s, color 0.1s;
    }

        .panel-trigger-btn:hover,
        .panel-trigger-btn.active {
            background: #eff6ff;
            color: #2563eb;
        }

        .panel-trigger-btn .color-indicator {
            position: absolute;
            bottom: 3px;
            right: 3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            border: 1.5px solid #fff;
            box-shadow: 0 0 0 1px rgba(0,0,0,.1);
            pointer-events: none;
        }
}

/* ── 4. Overflow fix để popup không bị clip ──────────────────── */
@media (max-width: 768px) {
    .canvas-main {
        overflow: visible !important;
    }

    .canvas-workspace {
        overflow: hidden !important;
    }

    .toolbar-right {
        overflow: visible !important;
    }
}

/* ── 5. Mobile panel popup ───────────────────────────────────── */
.mobile-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

    .mobile-panel-overlay.open {
        display: block;
    }

.mobile-panel-popup {
    display: none;
}

@media (max-width: 768px) {
    .mobile-panel-popup {
        position: absolute;
        bottom: calc(100% + 8px);
        right: 0;
        z-index: 200;
        display: none;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,.14);
        min-width: 180px;
        width: max-content;
    }

        .mobile-panel-popup.open {
            display: flex;
            animation: mpFadeUp 0.15s cubic-bezier(.4,0,.2,1);
        }

    @keyframes mpFadeUp {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mp-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #9ca3af;
        margin-bottom: 5px;
    }

    .mp-divider {
        height: 1px;
        background: #f0f0f0;
    }

    .mp-colors {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .mp-color-dot {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid transparent;
        cursor: pointer;
        padding: 0;
        transition: transform 0.1s, border-color 0.1s;
    }

        .mp-color-dot:hover {
            transform: scale(1.15);
        }

        .mp-color-dot.active {
            border-color: #3b82f6;
            transform: scale(1.1);
        }

    .mp-slider-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .mp-slider-row svg {
            flex-shrink: 0;
            color: #9ca3af;
        }

    .mp-slider {
        flex: 1;
        cursor: pointer;
        accent-color: #3b82f6;
    }

    .mp-sizes {
        display: flex;
        gap: 4px;
    }

    .mp-size-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 5px 2px;
        border: 1.5px solid #e5e7eb;
        border-radius: 7px;
        background: none;
        cursor: pointer;
        font-size: 11px;
        font-weight: 600;
        color: #6b7280;
        transition: border-color 0.1s, background 0.1s, color 0.1s;
    }

        .mp-size-btn:hover {
            background: #f3f4f6;
        }

        .mp-size-btn.active {
            border-color: #2563eb;
            background: #eff6ff;
            color: #2563eb;
        }

    .mp-size-dot {
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

    .mp-grids {
        display: flex;
        gap: 4px;
    }

    .mp-grid-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 0;
        border: 1.5px solid #e5e7eb;
        border-radius: 7px;
        background: none;
        cursor: pointer;
        color: #6b7280;
        transition: background 0.1s, border-color 0.1s;
    }

        .mp-grid-btn:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
            color: #111;
        }
}

/* ── 6. Secondary toolbar — ẩn trên desktop ─────────────────── */
.toolbar-secondary {
    display: none;
}

/* ── 7. Primary row wrapper — transparent trên desktop ──────── */
.toolbar-primary-row {
    display: contents; /* trên desktop: như không có wrapper */
}

/* ── 8. MOBILE: 2 toolbar riêng biệt, width vừa đủ ─────────── */
@media (max-width: 768px) {

    /* bottom-toolbar: bỏ background/border gốc,
       thành container vô hình chứa 2 toolbar con */
    .bottom-toolbar {
        left: 50% !important;
        transform: translateX(-50%) !important;
      /*  left: 8px !important;
        right: auto !important;
        transform: none !important;*/

        align-items: flex-start !important;

        width: max-content !important;
        max-width: calc(100vw - 16px) !important;
        bottom: 10px !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* ── Secondary: border riêng, width vừa đủ ── */
    .toolbar-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: max-content;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 3px 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

        .toolbar-secondary .tool-btn,
        .toolbar-secondary .icon-btn {
            width: 28px !important;
            height: 28px !important;
            flex-shrink: 0;
        }

            .toolbar-secondary .tool-btn svg,
            .toolbar-secondary .icon-btn svg {
                width: 13px !important;
                height: 13px !important;
            }

        .toolbar-secondary .toolbar-divider {
            height: 14px;
            margin: 0 2px;
        }

    /* ── Primary row: border riêng, width vừa đủ ── */
    .toolbar-primary-row {
        display: flex;
        align-items: center;
        gap: 2px;
        width: max-content;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 4px 8px;
        box-shadow: 0 4px 16px rgba(0,0,0,.1);
    }

        /* Tool buttons nhỏ hơn trong primary */
        .toolbar-primary-row .tool-btn {
            width: 28px !important;
            height: 28px !important;
            flex-shrink: 0;
        }

            .toolbar-primary-row .tool-btn svg {
                width: 14px !important;
                height: 14px !important;
            }

        /* Zoom */
        .toolbar-primary-row .zoom-btn {
            min-width: 32px !important;
            font-size: 11px !important;
            padding: 3px 4px !important;
        }

        .toolbar-primary-row .toolbar-left .icon-btn.sm {
            width: 26px !important;
            height: 26px !important;
        }

        .toolbar-primary-row .toolbar-left {
            margin-right: 2px !important;
        }

        .toolbar-primary-row .toolbar-right {
            margin-left: 2px !important;
        }

        .toolbar-primary-row .toolbar-divider {
            margin: 0 2px;
        }

        /* Ẩn undo/redo/delete/duplicate/download khỏi primary */
        .toolbar-primary-row .tool-btn[title="Undo (Ctrl+Z)"],
        .toolbar-primary-row .tool-btn[title="Redo (Ctrl+Y)"],
        .toolbar-primary-row .tool-btn[title="Delete"],
        .toolbar-primary-row .tool-btn[title="Duplicate"],
        .toolbar-primary-row .icon-btn[title="Download"] {
            display: none !important;
        }

        /* Ẩn Frame/Image (đã có trong more menu) */
        .toolbar-primary-row .tool-btn[title="Frame (F)"],
        .toolbar-primary-row .tool-btn[title="Image (I)"] {
            display: none !important;
        }

        /* Ẩn divider đầu tiên sau khi undo/redo bị ẩn */
        .toolbar-primary-row .toolbar-center > .toolbar-divider:first-child {
            display: none !important;
        }

        .toolbar-primary-row .toolbar-left {
            display: none !important;
        }
}

/* ── 9. Dark theme ───────────────────────────────────────────── */
[data-theme="dark"] .mobile-panel-popup,
.dark-theme .mobile-panel-popup {
    background: var(--bg-primary, #1e293b);
    border-color: var(--border, #334155);
}

[data-theme="dark"] .toolbar-secondary,
.dark-theme .toolbar-secondary {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border, #334155);
}

[data-theme="dark"] .toolbar-primary-row,
.dark-theme .toolbar-primary-row {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border, #334155);
}