/* SIDEBAR */
.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);height:100vh;position:fixed;left:0;top:0;display:flex;flex-direction:column;z-index:100;transition:width var(--transition),transform var(--transition);overflow:hidden}
.sidebar.collapsed{width:72px}
.sidebar-logo{display:flex;align-items:center;gap:12px;padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,0.06);min-height:var(--header-h)}
.logo-icon{width:38px;height:38px;min-width:38px;background:linear-gradient(135deg,#2563EB,#06B6D4);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,0.4)}
.logo-text{white-space:nowrap;overflow:hidden}
.logo-text .brand{font-family:'Poppins',sans-serif;font-size:17px;font-weight:700;color:#fff;line-height:1.2}
.logo-text .tagline{font-size:10px;color:#64748B;letter-spacing:0.5px;text-transform:uppercase}
.sidebar.collapsed .logo-text{display:none}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:14px 16px;margin:12px 12px 4px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);cursor:pointer;transition:background var(--transition)}
.sidebar-user:hover{background:rgba(255,255,255,0.08)}
.user-avatar{width:36px;height:36px;min-width:36px;border-radius:50%;background:linear-gradient(135deg,#8B5CF6,#06B6D4);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}
.user-info .name{font-size:13px;font-weight:600;color:#E2E8F0;white-space:nowrap}
.user-info .role{font-size:11px;color:#64748B}
.sidebar.collapsed .user-info,.sidebar.collapsed .user-arrow{display:none}
.user-arrow{margin-left:auto;color:#475569;font-size:11px}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 10px;scrollbar-width:thin;scrollbar-color:#1E293B transparent}
.nav-section{margin-bottom:20px}
.nav-label{font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#334155;padding:6px 10px 4px;white-space:nowrap;overflow:hidden}
.sidebar.collapsed .nav-label{opacity:0}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--sidebar-text);font-size:13.5px;font-weight:500;cursor:pointer;transition:all var(--transition);position:relative;white-space:nowrap}
.nav-item:hover{background:rgba(255,255,255,0.06);color:#fff}
.nav-item.active{background:rgba(37,99,235,0.18);color:#fff}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--primary);border-radius:0 3px 3px 0}
.nav-item .nav-icon{width:32px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:15px;transition:all var(--transition)}
.nav-item.active .nav-icon{background:rgba(37,99,235,0.3);color:#60A5FA}
.nav-item:hover .nav-icon{background:rgba(255,255,255,0.08)}
.nav-item .nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:20px;min-width:18px;text-align:center}
.sidebar.collapsed .nav-item span:not(.nav-icon),.sidebar.collapsed .nav-badge{display:none}
.sidebar-footer{padding:10px;border-top:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;gap:2px}

/* MAIN */
.main-content{flex:1;margin-left:var(--sidebar-width);min-height:100vh;transition:margin-left var(--transition);display:flex;flex-direction:column;min-width:0;overflow-x:hidden}
.main-content.expanded{margin-left:72px}

/* HEADER */
.top-header{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 24px;position:sticky;top:0;z-index:90;box-shadow:var(--shadow-sm);transition:background var(--transition),border-color var(--transition)}
.sidebar-toggle{width:36px;height:36px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);font-size:16px;transition:all var(--transition);cursor:pointer}
.sidebar-toggle:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted)}
.breadcrumb .current{color:var(--text);font-weight:600}
.breadcrumb i{font-size:10px}
.header-search{flex:1;max-width:360px;margin-left:20px;position:relative}
.header-search input{width:100%;padding:9px 16px 9px 40px;background:var(--surface2);border:1.5px solid var(--border);border-radius:24px;font-size:13.5px;color:var(--text);transition:all var(--transition);outline:none}
.header-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1);background:var(--surface)}
.header-search input::placeholder{color:var(--text-light)}
.header-search .search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:13px}
.header-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.header-btn{width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);font-size:15px;position:relative;transition:all var(--transition);cursor:pointer}
.header-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.header-btn .badge{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;font-size:9.5px;font-weight:800;padding:2px 5px;border-radius:10px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--surface);display:none}
.header-profile{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;background:var(--surface2);border:1px solid var(--border);border-radius:24px;cursor:pointer;transition:all var(--transition)}
.header-profile:hover{border-color:var(--primary)}
.profile-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#8B5CF6,#06B6D4);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.profile-info{font-size:12.5px;font-weight:600;color:var(--text)}

/* PAGE */
.page-body{flex:1;padding:24px;overflow-y:auto}
.page-view{display:none}
.page-view.active{display:block}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-title{font-family:'Poppins',sans-serif;font-size:20px;font-weight:700}
.section-sub{font-size:13px;color:var(--text-muted);margin-top:2px}
.header-actions{display:flex;gap:10px}

/* Sidebar Tree Submenu Styling */
.nav-submenu {
  display: none;
  padding-left: 22px;
  position: relative;
  margin-top: 6px;
  margin-bottom: 6px;
}
.nav-submenu.open {
  display: block;
}
/* Vertical line linking the sub-dropdowns with a premium subtle gradient */
.nav-submenu::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.35) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-radius: 1px;
}
.nav-item-subgroup {
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
}
/* Premium glowing dot for subgroups */
.nav-item-subgroup::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: all var(--transition);
}
.nav-item-subgroup:hover::before {
  background: #a78bfa;
  box-shadow: 0 0 8px #a78bfa;
  transform: scale(1.3);
}
.submenu-item-header {
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-text);
  padding: 6px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition);
}
.submenu-item-header:hover {
  color: #fff;
  transform: translateX(4px);
}
.nav-submenu-child {
  position: relative;
  margin-top: 2px;
  padding-left: 14px;
  margin-bottom: 4px;
}
/* Vertical line for the subgroup children */
.nav-submenu-child::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.submenu-item {
  position: relative;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  padding: 6px 0 6px 20px;
  cursor: pointer;
  transition: all var(--transition);
  display: block;
}
/* Glowing dot indicator next to each submenu leaf item */
.submenu-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all var(--transition);
}
.submenu-item:hover {
  color: #fff;
  transform: translateX(4px);
}
.submenu-item:hover::before {
  background: #3b82f6;
  box-shadow: 0 0 8px #3b82f6;
  transform: translateY(-50%) scale(1.4);
}
.submenu-item.active {
  color: #60a5fa;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.2);
}
.submenu-item.active::before {
  background: #3b82f6;
  box-shadow: 0 0 10px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5);
  transform: translateY(-50%) scale(1.5);
}
/* Sub-dropdown single item (like SMS Master) */
.submenu-single-item {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-text);
  margin-bottom: 4px;
  cursor: pointer;
  transition: all var(--transition);
}
.submenu-single-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: all var(--transition);
}
.submenu-single-item:hover {
  color: #fff;
  transform: translateX(4px);
}
.submenu-single-item:hover::before {
  background: #3b82f6;
  box-shadow: 0 0 8px #3b82f6;
  transform: translateY(-50%) scale(1.4);
}
.submenu-single-item.active {
  color: #60a5fa;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.2);
}
.submenu-single-item.active::before {
  background: #3b82f6;
  box-shadow: 0 0 10px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5);
  transform: translateY(-50%) scale(1.5);
}

.dropdown-chevron {
  transition: transform var(--transition);
}