/* ==========================================
   WEBSITE BUILDER - NO SCROLL CORE
========================================== */

/* Universal Reset and Scrollbar Control */
* {
    box-sizing: border-box;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* Firefox and IE/Edge support */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

/* Chrome, Safari, and Opera scrollbar control */
*::-webkit-scrollbar {
    display: none;
}

/* Lock the viewport entirely */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    background: #1b1b1b;
}

/* Builder fills exactly 100% of the viewport */
#builder {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #1b1b1b;
}

/* ======================
   SIDEBAR
====================== */

#builder-sidebar {
    width: 280px;
    background: #222;
    border-right: 1px solid #333;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

/* Page list */

#page-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    overflow-y: auto; /* Allow internal scrolling if many pages */
    flex: 1;
}

.builder-page-btn {
    padding: 10px;
    border: none;
    border-radius: 4px;
    background: #333;
    color: #fff;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.builder-page-menu {
    padding: 10px;
    border: none;
    border-radius: 4px;

    background:#3498db;
    color: #fff;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ======================
   WORKSPACE
====================== */

#builder-workspace {
    flex: 1;
    padding: 20px;
    overflow-y: auto;    /* ONLY this area can scroll vertically */
    overflow-x: hidden;  /* Prevents horizontal overflow in workspace */
}

/* ==========================================
   MOBILE (Responsive)
========================================== */

@media (max-width: 768px) {

    #builder {
        flex-direction: column;
        height: 100vh; /* Keep fixed to viewport height */
        overflow: hidden;
    }

    #builder-sidebar {
        width: 100%;
        height: auto;
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid #333;
    }

    #page-list {
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* Internal horizontal scroll for buttons */
        overflow-y: hidden;
        padding: 10px;
        gap: 8px;
        width: 100%;
    }

    .builder-page-btn {
        min-width: 100px; 
        max-width: 150px;
        padding: 8px;
        font-size: 14px;
    }

    #builder-workspace {
        width: 100%;
        flex: 1;
        padding: 10px;
        overflow-y: auto; /* Keep content scrollable here */
    }

    .component-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .component-controls button {
        flex: 1 1 calc(50% - 10px);
        margin: 2px !important;
    }
}