*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  background:#f4f6fa;
  height:100vh;
  overflow:hidden;
}

/* MAIN LAYOUT */
.main{
  display:flex;
  flex-direction:column;
  height:100vh;
}

/* TOP HEADER */
.top-header{
  background:#fff;
  padding:15px 25px;
  border-bottom:1px solid #eee;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.breadcrumb{
  font-size:14px;
  color:#555;
}

.icons{
  display:flex;
  gap:15px;
  align-items:center;
}

.avatar{
  width:35px;
  height:35px;
  border-radius:50%;
}

/* SECOND NAVBAR */
.subnav{
  background:#fff;
  padding:10px 25px;
  border-bottom:1px solid #eee;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

.subnav-left a{
  margin-right:20px;
  text-decoration:none;
  color:#333;
  font-size:14px;
  padding-bottom:8px;
}

.subnav-left a.active{
  border-bottom:2px solid #000;
}

.subnav-right a{
  margin-left:15px;
  text-decoration:none;
  color:#333;
  font-size:14px;
}

/* CONTENT */
.content{
  flex:1;
  overflow-y:auto;
  padding:25px;
}

/* HEADER */
.page-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.page-header h2{
  font-size:22px;
}

.page-header p{
  font-size:13px;
  color:#777;
}

.btn{
  padding:8px 14px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

/* DASHBOARD BOX */
.dashboard-box{
  height:500px;
  background:#e9ecef;
  border-radius:12px;
}

/* FOOTER */
.footer{
  background:#fff;
  border-top:1px solid #eee;
  padding:15px 25px;
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#555;
}

/* RESPONSIVE */
@media(max-width:768px){
  .subnav{
    flex-direction:column;
    gap:10px;
  }

  .subnav-left{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .page-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
}

/* Dropdown Styling */
.dropdown-container {
  display: inline-block;
  position: relative;
}

.dropdown-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.arrow {
  border: solid #888;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 2px;
  transform: rotate(45deg); /* Yeh arrow banata hai */
  margin-left: 2px;
  margin-bottom: 2px;
}

.dropdown-menu {
  display: none; /* Default hidden */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 180px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
  border-radius: 8px;
  z-index: 1000;
  padding: 10px 0;
  margin-top: 5px;
  border: 1px solid #eee;
}

/* Jab 'show' class add ho tab dikhega */
.dropdown-menu.show {
  display: block;
}

.dropdown-menu a {
  color: #333 !important;
  padding: 10px 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 13px;
  margin: 0 !important;
}

.dropdown-menu a:hover {
  background-color: #f8f9fa;
  color: #007bff !important;
}

.active-item {
  background-color: #f1faff;
  color: #007bff !important;
  font-weight: 500;
}

.icon {
  margin-right: 10px;
  font-style: normal;
}
/* === Global Responsive Boilerplate === */
@media (max-width: 900px) {
    .sidebar { position: absolute; left: -100%; transition: left 0.3s ease; z-index: 1000; box-shadow: 10px 0 30px rgba(0,0,0,0.1); }
    .sidebar.active { left: 0; }
    .main-wrapper { margin-left: 0 !important; width: 100% !important; padding-left: 0 !important; }
    .topbar, .toolbar, .header { flex-direction: column; align-items: flex-start; height: auto !important; padding: 1rem !important; gap: 1rem; }
    .search-box, .search-bar, .search-input { width: 100% !important; max-width: 100% !important; }
    .toolbar-actions, .header-actions { flex-wrap: wrap; width: 100%; justify-content: flex-start; }
    .content, .main-content { padding: 1rem !important; }
    .dashboard-grid, .stats-grid, .features-grid, .mega-menu-content { grid-template-columns: 1fr !important; }
    .overview-grid, .pricing-grid { grid-template-columns: 1fr !important; }
    .profile-header { flex-direction: column; text-align: center; }
    .profile-img-box { margin: 0 auto; }
}