/* product_browser.css
 * Styling for product_browser.php's sidebar + iframe layout.
 * Matches preview_wrapper.php's framing: red backdrop, one centred white
 * frame with a border/shadow/rounded corners — here the frame contains
 * the sidebar and the product iframe side by side, instead of just the
 * iframe on its own.
 */

*{margin:0;padding:0;box-sizing:border-box}
html, body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--brand-red, #C81111)}
body{font-family:'Ubuntu',Arial,sans-serif}

.browser-frame{
    display:flex;
    width:90%;
    height:90%;
    margin:3% auto;
    border:2px solid #ffffff;
    border-radius:8px;
    background:#ffffff;
    box-shadow:0 4px 20px rgba(0,0,0,0.3);
    overflow:hidden; /* keeps the sidebar/iframe's own corners inside the rounded frame */
}

.sidebar{
    width:320px;
    flex-shrink:0;
    background:#fff;
    border-right:1px solid var(--card-border-grey, #e5e7eb);
    display:flex;
    flex-direction:column;
    padding:16px;
}
#filterInput{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border-grey, #d1d5db);
    border-radius:6px;
    font-size:14px;
    font-family:inherit;
    margin-bottom:12px;
}
#filterInput:focus{outline:none;border-color:var(--brand-red, #C81111)}

#productList{
    list-style:none;
    overflow-y:auto;
    flex:1;
    min-height:0; /* without this, flex's default min-height:auto lets the list grow to fit ALL items instead of being clipped/scrollable within the sidebar's available height */
}
#productList li{
    padding:10px 12px;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:2px;
}
#productList li:hover{background:var(--page-bg, #f8f9fa)}
#productList li.active{background:#fdecea;border-left:3px solid var(--brand-red, #C81111);padding-left:9px}
.product-list-title{font-size:14px;color:var(--text-dark, #222);font-weight:600}
.product-list-sku{font-size:12px;color:#888}

.no-results{padding:12px;font-size:13px;color:#888;text-align:center}

.product-frame-container{flex:1;min-width:0}
#productFrame{width:100%;height:100%;border:0;display:block}

@media (max-width:768px){
    .browser-frame{flex-direction:column;width:95%;height:95%}
    .sidebar{width:100%;max-height:40%;border-right:0;border-bottom:1px solid var(--card-border-grey, #e5e7eb)}
    .product-frame-container{flex:1}
}