:root{
  --sidebar-width:260px;
  --sidebar-compact:80px;
  --brand:#0f172a;
  --muted:#f8fafc;
  --bg:#ebdddd;
  --card:#bb6060;
  --shadow:0 6px 18px rgba(15,23,42,0.08);
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,Arial;background:var(--bg);color:#0b1220;height:100%}

/* Topbar */
.topbar{position:fixed;top:0;left:0;right:0;height:64px;background:#d83434;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid #eef2f6;z-index:50}
.top-left{display:flex;align-items:center;gap:12px}
.people-icon{width:44px;height:44px;border-radius:10px;background:#f1f7f8;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--brand)}
.comlogo{
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.company-name{font-weight:700;font-size:16px;color:var(--brand)}
 
.toggle-btn{width:44px;height:44px;border-radius:10px;border:1px solid #fff;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--brand)}
.search-wrap{flex:1;display:flex;justify-content:center}
.search{width:360px;max-width:100%;display:flex;align-items:center;background:#faf8f8;border-radius:10px;padding:8px 12px;box-shadow:0 6px 18px rgba(15,23,42,0.08);border:1px solid #eef2f6}
.search input{border:0;outline:0;font-size:14px;width:100%}
.top-right{display:flex;align-items:center;gap:10px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#fff;border:1px solid #eef2f6;cursor:pointer;font-size:16px}
.profile-btn img{width:36px;height:36px;border-radius:50%;object-fit:cover}

/* Mobile search dropdown */
.mobile-search{position:fixed;top:64px;left:0;right:0;background:#fff;padding:10px 12px;border-bottom:1px solid #eef2f6;display:none;z-index:45}
.mobile-search.open{display:block;animation:slide .25s ease}
.mobile-search .search{width:100%}
.mobile-search .close-btn{margin-left:8px;font-size:18px;cursor:pointer;color:#555}
@keyframes slide{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* Sidebar */
.sidebar{position:fixed;top:64px;left:0;bottom:0;width:var(--sidebar-width);background:#f54949;border-right:1px solid #eef2f6;padding:18px;overflow-y:auto;overflow-x:hidden;z-index:30;transition:width .4s ease,padding .4s ease;}
.sidebar.compact{width:var(--sidebar-compact);padding:18px 8px;}
.sidebar .profile{display:flex;align-items:center;gap:12px;margin-bottom:20px;transition:all .4s;}
.sidebar .profile img{width:56px;height:56px;border-radius:10px;transition:all .4s;}
.sidebar.compact .profile .meta{display:none;opacity:0;}
.nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;text-decoration:none;color:#000;transition:all .3s;}
.nav a i{width:18px;text-align:center}
.sidebar.compact .nav a span{display:none;}
.nav a:hover{background:#f1f7f8}
.nav .section-title{margin:18px 8px 8px;font-size:12px;color:var(--muted);text-transform:uppercase;transition:opacity .3s;}
.sidebar.compact .section-title{opacity:0;pointer-events:none;}

/* Scrollbar style */
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius:3px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }

/* Main */
.main{margin-top:64px;margin-left:var(--sidebar-width);padding:20px;transition:margin-left .4s,width .4s;}
.main.sidebar-compact{margin-left:var(--sidebar-compact);width:calc(100% - var(--sidebar-compact))}
.card{background:#e7e1e1;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border:1px solid #eef2f6}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* Mobile */
@media(max-width:900px){
  .sidebar{transform:translateX(-110%);transition:.3s;box-shadow:0 10px 28px rgba(0,0,0,.18)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;width:100%;padding:12px}
  .search-wrap{display:none}
  #mobileSearchBtn{display:inline-flex}
  .company-name{display:none;}
}
@media(min-width:901px){#mobileSearchBtn{display:none}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}