@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

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

 :root {
   --primary-bg: #11101d;
   --secondary-bg: #1d1b31;
   --light-bg: #f5f7fa;
   --light-accent: #e4e9f7;
   --text-light: #fff;
   --text-dark: #333;
   --sidebar-width: 78px;
   --sidebar-width-open: 250px;
 }

 body {
   position: relative;
   min-height: 100vh;
   width: 100%;
   overflow-x: hidden;
   background: var(--light-accent);
 }

 /* --- Sidebar --- */
 .sidebar {
   position: fixed;
   left: 0;
   top: 0;
   height: 100%;
   width: var(--sidebar-width);
   background: var(--primary-bg);
   padding: 6px 14px;
   z-index: 99;
   transition: all 0.5s ease;
 }

 .sidebar.open {
   width: var(--sidebar-width-open);
 }

 .hamburger {
   color: white;
   display: none;
   opacity: 0;
   text-decoration: none !important;
 }

 .sidebar .logo-details {
   height: 60px;
   display: flex;
   align-items: center;
   position: relative;
 }

 a .logo_name {
   text-decoration: none !important;
 }

 .sidebar .logo-details .icon {
   opacity: 0;
   transition: all 0.5s ease;
   font-size: 28px;
   color: var(--text-light);
   min-width: 50px;
   text-align: center;
 }

 .sidebar .logo-details .logo_name {
   color: var(--text-light);
   font-size: 20px;
   font-weight: 600;
   opacity: 0;
   text-decoration: none;
   cursor: pointer;
   transition: all 0.5s ease;
 }

 .sidebar.open .logo-details .icon,
 .sidebar.open .logo-details .logo_name {
   opacity: 1;
   text-decoration: none !important;
 }

 .sidebar .logo-details #btn {
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
   font-size: 22px;
   text-align: center;
   cursor: pointer;
   color: var(--text-light);
   transition: all 0.5s ease;
 }

 .sidebar.open .logo-details #btn {
   text-align: right;
 }

 /* Nav List */
 .sidebar ul {
   margin-top: 20px;
   padding-left: 0;
 }

 .sidebar li {
   position: relative;
   margin: 8px 0;
   list-style: none;
 }

 .sidebar li .tooltip {
   position: absolute;
   top: -20px;
   left: calc(100% + 15px);
   z-index: 3;
   background: var(--text-light);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   padding: 6px 12px;
   border-radius: 4px;
   font-size: 15px;
   font-weight: 400;
   opacity: 0;
   white-space: nowrap;
   pointer-events: none;
   transition: 0s;
 }

 .sidebar li:hover .tooltip {
   opacity: 1;
   pointer-events: auto;
   transition: all 0.4s ease;
   top: 50%;
   transform: translateY(-50%);
 }

 .sidebar.open li .tooltip {
   display: none;
 }

 .sidebar input {
   font-size: 15px;
   color: var(--text-light);
   font-weight: 400;
   outline: none;
   height: 50px;
   width: 100%;
   border: none;
   border-radius: 12px;
   background: var(--secondary-bg);
   padding-left: 50px;
 }

 .sidebar li .bx-search {
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   font-size: 22px;
   background: var(--secondary-bg);
   color: var(--text-light);
   line-height: 50px;
   text-align: center;
   border-radius: 12px;
   width: 50px;
   cursor: pointer;
 }

 .sidebar li a {
   display: flex;
   height: 100%;
   width: 100%;
   border-radius: 12px;
   align-items: center;
   text-decoration: none;
   transition: all 0.4s ease;
   background: transparent;
   padding: 8px 0;
 }

 .sidebar li a:hover {
   background: var(--secondary-bg);
 }

 .sidebar li a .links_name {
   color: var(--text-light);
   font-size: 15px;
   font-weight: 400;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: 0.4s;
 }

 .sidebar.open li a .links_name {
   opacity: 1;
   pointer-events: auto;
 }

 .sidebar li a:hover .links_name,
 .sidebar li a:hover i {
   color: var(--text-light);
 }

 .sidebar li i {
   color: var(--text-light);
   height: 50px;
   min-width: 50px;
   font-size: 28px;
   text-align: center;
   line-height: 50px;
 }

 .sidebar .profile {
   position: fixed;
   height: 60px;
   width: var(--sidebar-width);
   left: 0;
   bottom: 0;
   padding: 10px 14px;
   background: var(--secondary-bg);
   transition: all 0.5s ease;
   overflow: hidden;
 }

 .sidebar.open .profile {
   width: var(--sidebar-width-open);
 }

 .sidebar .profile .profile-details {
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
 }

 .sidebar .profile img {
   height: 45px;
   width: 45px;
   object-fit: cover;
   border-radius: 12px;
   margin-right: 10px;
 }

 .sidebar .profile .name,
 .sidebar .profile .job {
   color: var(--text-light);
   font-size: 15px;
   font-weight: 400;
   white-space: nowrap;
 }

 .sidebar .profile .job {
   font-size: 12px;
 }

 .sidebar .profile #log_out {
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
   background: var(--secondary-bg);
   width: 100%;
   height: 60px;
   line-height: 60px;
   border-radius: 0px;
   color: var(--text-light);
   font-size: 22px;
   text-align: center;
   transition: all 0.5s ease;
 }

 .sidebar.open .profile #log_out {
   width: 50px;
   background: none;
   text-align: center;
   right: 14px;
 }

 .home-section {
   position: relative;
   background: var(--light-accent);
   min-height: 100vh;
   top: 0;
   left: var(--sidebar-width);
   width: calc(100% - var(--sidebar-width));
   padding: 20px;
   transition: all 0.5s ease;
   z-index: 2;
 }

 .sidebar.open~.home-section {
   left: var(--sidebar-width-open);
   width: calc(100% - var(--sidebar-width-open));
 }

 .home-section .section {
   display: none;
 }

 .page-header {
   margin-bottom: 24px;
 }

 .page-header h1 {
   font-size: 28px;
   font-weight: 600;
   color: var(--text-dark);
 }

 .page-header p {
   font-size: 16px;
   color: #666;
 }

 .stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 20px;
   margin-bottom: 30px;
 }

 .stat-card {
   background: #fff;
   padding: 25px;
   border-radius: 10px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   position: relative;
 }

 .stat-card .card-icon {
   font-size: 32px;
   position: absolute;
   top: 25px;
   right: 25px;
   opacity: 0.3;
 }

 .stat-card h3 {
   font-size: 16px;
   color: #555;
   margin-bottom: 8px;
   font-weight: 500;
 }

 .stat-card p {
   font-size: 28px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 0;
 }

 .charts-grid {
   display: grid;
   gap: 20px;
   grid-template-columns: 1fr;
   margin-bottom: 30px;
 }

 .chart-container {
   background: #fff;
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   overflow: hidden;
 }

 .table-container {
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   padding: 20px;
   overflow-x: auto;
 }

 .table-container h2 {
   margin-bottom: 15px;
 }

 .table-container table {
   width: 100%;
   border-collapse: collapse;
   min-width: 800px;
 }

 .table-container th,
 .table-container td {
   padding: 12px 15px;
   border-bottom: 1px solid #eee;
   text-align: left;
 }

 .table-container th {
   background: var(--light-bg);
   font-weight: 600;
 }

 .table-container tbody tr:hover {
   background: #f9f9f9;
 }

 .status.active {
   color: #2ecc71;
   font-weight: 600;
 }

 .status.completed {
   color: #3498db;
   font-weight: 600;
 }

 .pagination-container {
   padding: 20px 0;
   text-align: center;
 }

 .pagination-container button {
   border: 1px solid #ddd;
   background: #fff;
   padding: 8px 14px;
   margin: 0 4px;
   cursor: pointer;
   border-radius: 6px;
   transition: all 0.3s ease;
   font-size: 14px;
 }

 .pagination-container button:hover {
   background: #f0f0f0;
 }

 .pagination-container button.active {
   background: var(--primary-bg);
   color: var(--text-light);
   border-color: var(--primary-bg);
 }


 @media (min-width: 769px) {

   #dashboard .charts-grid {
     grid-template-columns: 2fr 1fr;
   }

   #donors .user-analytics-grid {
     grid-template-columns: 1fr 1fr;
   }

   #analytics .charts-grid {
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   }
 }

 @media (max-width: 768px) {
   .sidebar {
     left: -100%;
     z-index: 1000;
   }

   .sidebar.open {
     width: 200px;
     left: 0;
   }

   .sidebar.open~.home-section {
     left: 0;
     width: 100%;
   }

   .home-section {
     left: 0;
     width: 100%;
     padding: 15px;
   }

   .hamburger {
     opacity: 1;
     font-size: larger;
     color: rgb(255, 255, 255);
     background-color: #1d1b31;
     padding: 10px;
   }

   .sidebar.open .logo-details #btn {
     right: 15px;
   }

   .page-header h1 {
     font-size: 24px;
   }

   .stat-card {
     padding: 20px;
   }

   .stat-card p {
     font-size: 24px;
   }
 }

 .nav a {
   font-size: large;
   text-decoration: none;
   color: #3300ff;
 }
 .nav a:hover{
  text-decoration: underline;
 }