/* ═══ RetailERP — Shell Layout ═══ */

/* Shell */
.shell{display:flex;height:100vh;overflow:hidden}

/* Sidebar */
.sidebar{width:var(--sw);background:var(--s1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sb-brand{padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sb-logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--teal),#0284c7);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}
.sb-name{font-size:14px;font-weight:700;color:#fff;line-height:1.1}
.sb-name sub{font-size:9px;color:var(--t3);display:block;font-weight:400;letter-spacing:.5px;text-transform:uppercase}
.sb-section{padding:6px 0;border-bottom:1px solid var(--border)}
.sb-label{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.4px;padding:8px 14px 3px}
.ni{display:flex;align-items:center;gap:9px;padding:7px 14px;color:var(--t2);cursor:pointer;transition:.15s;border-left:2px solid transparent;font-size:12px;text-decoration:none}
.ni:hover{background:rgba(14,165,233,.06);color:var(--t1)}
.ni.active{background:var(--teal-dim);color:var(--teal2);border-left-color:var(--teal)}
.ni-ico{width:15px;text-align:center;font-size:12px;flex-shrink:0}
.ni-badge{margin-left:auto;background:var(--red);color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;font-weight:700}

/* Topbar */
.topbar{height:var(--th);background:var(--s1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0}
.tb-title{font-size:14px;font-weight:600;color:#fff;flex:1}
.tb-search{display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:6px 12px;width:240px}
.tb-search input{border:none;background:none;outline:none;font-size:12px;color:var(--t1);width:100%}
.tb-search input::placeholder{color:var(--t3)}
.tb-btn{width:32px;height:32px;border-radius:8px;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:.15s}
.tb-btn:hover{background:var(--s3)}
.notif-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--red);border-radius:50%;border:2px solid var(--s1)}
.avatar{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),#0284c7);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer}
.logout-btn{margin-left:4px;padding:6px 10px}

/* Main */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.content{flex:1;overflow-y:auto;padding:20px;background:var(--bg)}

/* Page Header */
.ph{margin-bottom:18px}.ph h2{font-size:18px;font-weight:700;color:#fff}.ph p{color:var(--t2);font-size:12px;margin-top:2px}