/* Header css  */
    :root{
      --sidebar-width:250px;
      --primary:#4f6ef7;
    }

    body{
      margin:0;
      background:#f5f7fb;
      font-family: system-ui, -apple-system, BlinkMacSystemFont;
    }

    /* App shell */
    .app-shell{
      display:flex;
      min-height:100vh;
    }

    /* Main layout */
    .main-layout{
      margin-left:var(--sidebar-width);
      width:100%;
      transition:.3s;
    }
    .main-layout.full{
      margin-left:0;
    }

    /* Header */
    .topbar{
      background:#ffffff;
      padding:12px 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid #e5e7eb;
      position:sticky;
      top:0;
      z-index:1000;
    }

    .topbar .search input{
      min-width:220px;
      border-radius:8px;
      font-size:14px;
    }

    .topbar .search input:focus{
      box-shadow:none;
      border-color:var(--primary);
    }

    .icon-btn{
      width:36px;
      height:36px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#f1f3f9;
      border:none;
    }

    /* ================= Sidebar ================= */

.sidebar{
  width:250px;
  height:100vh;
  position:fixed;
  left:0;
  top:0;
  background:linear-gradient(180deg,#4f6ef7,#3b36c9);
  color:#fff;
  transition:.3s;
  z-index:1100;
}

.sidebar.hide{
  margin-left:-250px;
}

/* Brand */
.sidebar-brand{
  border-bottom:1px solid rgba(255,255,255,.15);
}

.logo-circle{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#fff;
  color:#4f6ef7;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-name{
  font-size:18px;
  font-weight:600;
}

/* Nav */
.sidebar-nav{
  padding:10px 0;
}

.sidebar-nav .nav-link{
  color:#fff;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-size:14px;
  opacity:.85;
  transition:.2s;
}

.sidebar-nav .nav-link i{
  font-size:16px;
}

.sidebar-nav .nav-link:hover{
  background:rgba(255,255,255,.15);
  opacity:1;
}

.sidebar-nav .nav-link.active{
  background:rgba(255,255,255,.25);
  font-weight:600;
  opacity:1;
}
/* page ke liye */
/* Page spacing */
.page-content{
  margin-left: 25px;     /* sidebar se gap */
  padding: 30px 30px 0 0; /* top & sides gap */
}

/* Sidebar collapse state */
.main-layout.full .page-content{
  margin-left: 0;
}

/* Table compact look */
.table td, .table th{
  vertical-align: middle;
}



/*  sidebar css toggle  */
.footer{
  border-top:1px solid #e5e7eb;
  background:#fff;
  margin-top:auto;
}