/* Global Admin Layout from Figma (responsive) */
:root{
  --sidebar-w:282px;
  --bg:#FFFFFF;
  --border:#E0E0E0;
  --accent:#D3DBFF;
  --text:#000000;
  --muted:#F7F7F7;
  --success:#64D93A;
  --active:#4D76FF;
}
*{box-sizing:border-box}
html,body {margin:0; padding:0; width:100%; height:100%; 
    overflow:hidden;}
body {font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--text);} 

.page-wrapper{display:flex; height:100vh; width:100%; overflow:hidden;}
.sidebar{height:100vh; max-height:100vh; flex-shrink:0; overflow:auto; width:var(--sidebar-w); min-width:var(--sidebar-w); max-width:var(--sidebar-w); background:var(--bg); border-right:1px solid var(--border); padding:24px 8px; min-height:0;}
.main-content{flex:1; overflow-y:auto; height:100vh; min-width:0; min-height:0; display:flex; flex-direction:column; overscroll-behavior:contain;}

/* Sidebar content */
.sidebar .title{font-weight:600;font-size:20px;line-height:150%; letter-spacing:-.01em; margin:1px 0 8px 16px;}
.sidebar .subtitle{font-weight:400;font-size:12px;line-height:150%; letter-spacing:-.01em; margin:8px 0 24px 16px; color:#666;}
.sidebar .section-label{margin:16px 16px 8px 16px; font-size:14px; font-weight:600; line-height:150%; color:#666; text-transform:uppercase; letter-spacing:0.5px;}
.sidebar .section-divider{height:1px; background:var(--border); margin:20px 16px 12px 16px;}
.menu{display:flex; flex-direction:column; gap:2px; padding:0 0 8px 0;}
.menu .children{margin-left:0px; padding-top:4px;}
.menu-item{display:flex; flex-direction:row; align-items:center; gap:12px; border-radius:0px; padding:12px 16px; color:var(--text); cursor:pointer; text-decoration:none; width:100%; transition:all 0.2s ease;}
.menu-item.parent{padding:14px 16px; font-weight:500;}
.menu-item.child{padding:12px 16px; margin-left:0px; font-size:15px;}
.menu-item .icon{width:20px; height:20px; color:var(--text); display:inline-flex; align-items:center; justify-content:center; transition:color 0.2s ease;}
.menu-item .text{font-weight:500; font-size:14px; line-height:150%; flex:1;}
.menu-item.active {
    background: var(--accent); 
    font-weight: 600;
    position: relative;
    box-shadow: 0 1px 3px rgba(77, 118, 255, 0.1);
    border-radius: 0px;
}

.menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--active);
    border-radius: 0px;
}

.menu-item.active .icon {
    color: var(--active);
}

.menu-item.active .text {
    color: var(--active);
}

.menu-item:not(.active):hover {
    background: #f8f9ff;
    transform: translateX(2px);
}

.menu-item:not(.active):hover .icon {
    color: var(--active);
}

/* Top Navigation Bar */
.top-navbar{
    position:sticky; 
    top:0; 
    z-index:10; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    height:60px; 
    padding:16px 32px; 
    background:var(--bg); 
    border-bottom:1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-left{
    display: flex;
    align-items: center;
    height: 100%;
}

.page-title{
    font-weight:700; 
    font-size:24px; 
    line-height:1.2; 
    color:var(--text);
}

.breadcrumb{
    display: flex;
    align-items: center;
    height: 100%;
    gap: 8px;
    font-size: 14px;
    color: #666;
    margin: 0;
    padding: 0;
}

.breadcrumb-item{
    color:#666;
}

.breadcrumb-item.current{
    color:var(--active); 
    font-weight:500;
}

.breadcrumb-separator{
    color:#ccc;
}

.navbar-right{
    display: flex;
    align-items: center;
    height: 100%;
}

.navbar-actions{
    display:flex; 
    align-items:center; 
    gap:16px;
}

.action-btn{
    display:flex; 
    align-items:center; 
    justify-content:center; 
    width:40px; 
    height:40px; 
    border:none; 
    background:transparent; 
    border-radius:8px; 
    cursor:pointer; 
    transition:all 0.2s ease;
    position:relative;
}

.action-btn:hover{
    background:#f8f9ff;
}

.action-btn svg{
    width:20px; 
    height:20px; 
    color:#666;
}

.notification-badge{
    position:absolute; 
    top:6px; 
    right:6px; 
    background:var(--active); 
    color:white; 
    border-radius:50%; 
    width:18px; 
    height:18px; 
    font-size:11px; 
    font-weight:600; 
    display:flex; 
    align-items:center; 
    justify-content:center;
}

.submit-btn{
    display:flex; 
    align-items:center; 
    justify-content:center; 
    height:40px; 
    padding:0 20px; 
    background:var(--active); 
    color:white; 
    border-radius:8px; 
    font-weight:600; 
    font-size:14px; 
    text-decoration:none; 
    transition:all 0.2s ease;
}

.submit-btn:hover{
    background:#3d5afe; 
    transform:translateY(-1px); 
    box-shadow:0 4px 12px rgba(77, 118, 255, 0.3);
}

/* Content */
.content{padding:24px; min-height:0; flex:1; overflow:auto; width:100%; max-width:100%;} 
.content .tbd{color:#FF0004; font-weight:700; font-size:32px; line-height:150%; text-align:center; margin-top:120px;}

/* Bottom Update button */
.update-btn{position:fixed; right:67px; bottom:24px; height:40px; padding:0 16px; background:var(--success); border-radius:8px; display:flex; align-items:center; font-weight:700; font-size:16px; color:#000;}

.mq-container{
    padding: 24px 2px 40px;
}
/* Small screens: optional narrower sidebar */
@media (max-width: 900px){
  :root{ --sidebar-w:220px; }
}