/* ───────────── SIDEBAR ───────────── */
#x-sidebar { width:260px; height:100vh; background:var(--surface,#fff); border-right:1px solid var(--glass-stroke,#e2a8a8); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow,0 4px 6px rgba(0,0,0,0.05)); padding:0; position:fixed; top:0; left:0; z-index:200; transition:transform .3s ease; transform:translateX(-100%); overflow-y:hidden; overflow-x:hidden; }
#x-sidebar::before, #x-sidebar::after { content:''; position:absolute; left:0; right:0; height:20px; pointer-events:none; z-index:1; transition:opacity .3s ease; }
#x-sidebar::before { top:0; background:linear-gradient(to bottom,var(--surface,#fff) 0%,transparent 100%); opacity:0; }
#x-sidebar::after { bottom:0; background:linear-gradient(to top,var(--surface,#fff) 0%,transparent 100%); opacity:0; }
#x-sidebar:hover::before, #x-sidebar:hover::after { opacity:1; }
@media(min-width:1200px){ #x-sidebar{transform:translateX(0);} main{margin-left:280px; margin-top:90px; padding:20px;} }
@media(max-width:1199.98px){ #x-sidebar{transform:translateX(-100%); width:80%;} #x-sidebar.x-show{transform:translateX(0);} main{margin-left:0; margin-top:80px; padding:20px;} }

/* ───────────── APP BRAND ───────────── */
.x-app-brand { padding:1.5rem 1rem; display:flex; justify-content:center; align-items:center; border-bottom:1px solid var(--glass-stroke,#e2a8a8); position:relative; }
.x-app-brand .logo { max-width:140px; height:auto; display:block; margin:0 auto; }
.x-app-brand .x-sidebar-toggle { position:absolute; right:1rem; }

/* ───────────── TOGGLE BUTTON ───────────── */
.x-sidebar-toggle { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-stroke); color:var(--ink); transition:background .25s,color .25s; line-height:1; text-decoration:none; }
.x-sidebar-toggle i { font-size:1.25rem; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.x-sidebar-toggle:hover { background:rgba(226,168,168,.15); color:var(--primary,#e2a8a8); }

/* ───────────── USER PROFILE ───────────── */
.x-user-profile { display:flex; align-items:center; padding:1rem; margin:.5rem; background:rgba(255,255,255,0.5); border-radius:999px; }
.x-user-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; margin-right:12px; border:2px solid var(--glass-stroke,#e2a8a8); }
.x-user-avatar img { width:100%; height:100%; object-fit:cover; }
.x-user-name { font-weight:600; font-size:.95rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.x-user-role { font-size:.8rem; color:var(--muted); margin-top:2px; }

/* ───────────── MENU ───────────── */
hr.x-divider { border:none; height:1px; background:var(--glass-stroke); margin:1rem 0; }
.x-menu-title { padding:.5rem 1rem; }
.x-menu-title span { font-size:.75rem; text-transform:uppercase; font-weight:600; color:var(--muted); }
.x-menu { list-style:none; margin:0; padding:0; flex-grow:1; }
.x-menu-item { margin:.2rem .5rem; border-radius:999px; }
.x-menu-link { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; font-weight:600; color:var(--ink); text-decoration:none; border-radius:999px; transition:background .25s,color .25s; }
.x-menu-link:hover { background:rgba(226,168,168,.15); color:var(--primary); }
.x-menu-item.active > .x-menu-link { background:var(--primary); color:#fff; }
.x-menu-icon { font-size:1.25rem; color:inherit; }
.x-submenu { list-style:none; padding-left:1rem; margin-left:.5rem; margin-top:.25rem; display:none; transition:all .3s ease; }
.x-submenu .x-menu-link { font-weight:500; font-size:.9rem; color:var(--muted); padding:.5rem .75rem; }
.x-submenu .x-menu-link:hover { color:var(--primary); }
.x-submenu .x-menu-item.active > .x-menu-link { color:var(--primary-600); font-weight:600; background:none!important; }
.x-menu-item.open > .x-submenu { display:block; }

/* ───────────── OVERLAY ───────────── */
#x-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:150; }
#x-overlay.active { opacity:1; visibility:visible; }

/* ───────────── NAVBAR ───────────── */
#x-navbar { background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--glass-stroke); border-radius:var(--radius); padding:.25rem; margin:1rem; z-index:120; transition:margin .3s ease; }
@media(max-width:1199.98px){ #x-navbar .x-search-box{display:flex!important; flex:1; margin:0 .5rem; align-items:center;} .x-navbar-inner{flex-wrap:nowrap; padding:.25rem;} .x-search-box input{font-size:.9rem; padding:.5rem; width:100%;} }
@media(min-width:1200px){ .x-search-box{margin-left:1rem; width:300px;} }
#x-navbar .nav-item.dropdown { position:relative; }
#x-navbar .dropdown-menu { background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--glass-stroke); border-radius:var(--radius); box-shadow:var(--shadow); min-width:220px; padding:.5rem 0; overflow:hidden; }
#x-navbar .dropdown-menu .dropdown-item { color:var(--ink); font-weight:500; padding:.5rem 1rem; transition:background .25s,color .25s; }
#x-navbar .dropdown-menu .dropdown-item:hover { background:rgba(226,168,168,.15); color:var(--primary); }
#x-navbar .dropdown-menu .dropdown-divider { margin:.5rem 0; border-top:1px solid var(--glass-stroke); }
@media(max-width:1199.98px){ #x-navbar .dropdown-menu{position:fixed!important; left:0; right:0; width:auto!important; top:5px auto!important; margin:10px 0 0!important; border-radius:var(--radius)!important; z-index:130!important; background:#fff;} #x-navbar{overflow:visible!important;} }
@media(min-width:1200px){ #x-navbar .dropdown-menu{position:absolute!important; top:calc(100% + 6px)!important; right:0!important; left:auto!important; transform:none!important; z-index:130!important;} #x-navbar .dropdown-menu-end{right:0!important; left:auto!important;} }
@media(max-width:1199.98px){ .x-navbar-inner{flex-wrap:nowrap;} .x-search-box{min-width:0; margin-right:.5rem;} .navbar-nav{flex-direction:row!important;} .avatar img{width:32px; height:32px;} }

/* ───────────── TOGGLE BTN ───────────── */
.x-toggle-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius); background:var(--glass); border:1px solid var(--glass-stroke); box-shadow:var(--shadow); color:var(--ink); transition:background .25s,color .25s; line-height:1; padding:0; text-decoration:none; }
.x-toggle-btn i { font-size:20px; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.x-toggle-btn:hover { background:rgba(226,168,168,.15); color:var(--primary); }