body {
            font-family: 'Inter', sans-serif;

        }

        .login-container {
            height: 100vh;
        }

        .login-left {
            background: #fff;
            padding: 30px;
        }

        .login-right {
            background: #5e2b91;

            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            padding: 20px;
        }

        .login-card {
            max-width: 380px;
            margin: auto;
        }

        .form-control {
            border-radius: 50px;
            padding: 12px 20px;
        }

        .btn-login {
            width: 100%;
            border-radius: 50px;
            padding: 12px;
            font-weight: 600;
            background: #5e2b91;
            color: white;
            border: none;
        }

        .btn-login:hover {
            background: #4a1f75;
            color:white;
        }

        .social-btn {
            width: 60px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 0 8px;
        }

        .form-select {
            border-radius: 50px;
            padding: 10px 20px;
        }

        footer {
            font-size: 13px;
            color: #666;
            text-align: center;
            margin-top: 30px;
        }

        footer span {
            color: #d32f2f;
        }

@media (max-width: 991px) {
    .login-left {
        background: url("../images/bismiallah.jpg") no-repeat center center;
        background-size: contain;

    }
}


/* ------------------------------------------------------campus dashboard */
 /* Sidebar fixed */
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 95vh;
      width: 260px;
      background: #fff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
       box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
      border-radius: 20px;
      z-index: 1000;
      margin: 1% !important;
      transition: transform 0.3s ease-in-out;
    }

    /* Hide sidebar on mobile */
    @media (max-width: 768px) {
      .sidebar {
        transform: translateX(-110%);
      }
      .sidebar.active {
        transform: translateX(0);
      }
      .main {
        margin-left: 0 !important;
        width: 100%;
      }
      .sidebar-toggle {
        display: flex;
      }
    }

    /* Top toggle button for mobile */
   .sidebar-toggle {
  /* REMOVE display: none */
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1100;
  background: #5e2b91;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: flex; /* always show */
}


    /* Close button inside sidebar */
    .close-btn {
      display: none;
    }
    @media (max-width: 768px) {
      .close-btn {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 20px;
        cursor: pointer;
        color: #5e2b91;
      }
    }

    .sidebar .logo img {
      max-height: 100px;
      margin-bottom: 20px;
    }

    .menu-title {
      font-size: 14px;
      color: #555;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 15px;
      border-radius: 10px;
      margin-bottom: 8px;
      font-weight: 500;
      cursor: pointer;
      color: #555;
      transition: 0.3s;
    }

    .menu-item:hover {
      background: #f1e9fa;
      color: #5e2b91;
    }

    .menu-item.active {
      background: #f1e9fa;
      color: #5e2b91;
      font-weight: 600;
    }

    .profile-card {
      background: #f1e9fa;
      padding: 12px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .profile-card img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }

    .sidebar-footer {
      font-size: 12px;
      text-align: center;
      margin-top: 15px;
      color: #666;
    }

    .sidebar-footer strong {
      color: #5e2b91;
    }

    /* Main content */
    .main {
      margin-left: 280px;
      padding: 25px;
      transition: margin-left 0.3s ease-in-out;
    }

    .card-box {
      background: #fff;
      border-radius: 20px;
      padding: 20px;
     /* box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; */
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px !important;

    }

    .stats-card {
      display: flex;
      align-items: center;
      gap: 15px;
      border-radius: 20px;
      padding: 20px;
      background: #fff;
      transition: transform 0.2s ease;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px !important;
    }

    .icon-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

    }

    .icon-circle.student {
      background-color: #8e5cd996;
    }

    .icon-circle.donation {
      background-color: #8e5cd996;
    }

    .icon-circle i {
      font-size: 22px;
      color: #5e2b91;
    }
    @media(max-width:768px){
        .col-md-6, .col-md-3 {
            margin-top: 5%;;
        }
        .smallmargintop{
            margin-top: 20%;
        }

    }

   .sub-menu {
       display: none;
       list-style: none;
       padding-left: 20px;
   }

   .sub-menu.open {
       display: block;
   }

   .arrow-icon {
       transition: transform 0.3s;
   }

   .arrow-icon.rotated {
       transform: rotate(180deg);
   }

   /* -------------------------------------------------------------------------campus courses */
  .btn-add {
      background: #f3f0ff;
      color: #5e2b91;
      font-weight: 500;
      border-radius: 40px;
      padding: 8px 18px;
      border: 1px solid #e0d7ff;
      transition: 0.3s;
    }
    .btn-add:hover {
      background: #5e2b91;
      color: #fff;
    }

    /* Card wrapper */
    .card {
      border-radius: 20px;
      border: none;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px !important;
    }

    /* Top action buttons */
    .btn-outline-primary, .btn-outline-danger, .btn-outline-secondary {
      border-radius: 25px;
      font-size: 14px;
      padding: 6px 16px;
    }
    .btn-outline-primary {
      border: 1px solid #d1d5db;
      color: #374151;
    }
    .btn-outline-danger {
      border: 1px solid #d1d5db;
      color: #ef4444;
    }

    /* Search */
    .custom-search {
      border-radius: 30px;
      padding-left: 38px;
      font-size: 14px;
      border: 1px solid #e5e7eb;
      box-shadow: none;
    }
    .custom-search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #9ca3af;
    }

    /* Table Styling */
    .table {
      border-collapse: separate;
      border-spacing: 0;
    }
    .table thead th {
      border: none;
      font-size: 13px;
      text-transform: none;
      font-weight: 600;
      color: #6b7280;
    }
    .table tbody tr {
      background: #fff;
      border-bottom: 1px solid #f0f0f0;
    }
    .table tbody td {

      padding: 14px 16px;
      font-size: 14px;
      color: #374151;
    }

    /* Calendar Icon */
    .date-icon {
      color: #5e2b91;
      margin-right: 6px;
    }

    /* Pagination */
    .pagination .page-link {
      border-radius: 12px;
      margin: 0 3px;
      border: none;
      font-size: 14px;
      padding: 8px 14px;
      color: #6b7280;
      transition: 0.3s;
    }
    .pagination .page-item.active .page-link {
      background: #5e2b91;
      color: #fff;
      border-radius: 12px;
    }
    .pagination .page-link:hover {
      background: #5e2b91;
      color: #fff;
    }

    /* Rows per page select */
    .form-select {

      font-size: 14px;

      border: 1px solid #e5e7eb;
      padding:12px 40px; border-radius: 30px !important
    }
    .shadowcourses{
          box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
    }


/* ---model styling- */
   .custom-input {
    border-radius: 30px;
    padding: 12px 18px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    background: #fafafa;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px inset;
  }
  .custom-input:focus {
    border-color: #5e2b91;
    box-shadow: 0 0 0 0.25rem rgba(94, 43, 145, 0.25);
  }
/*----------------------------------------------------------------------------admin screens */
   .card-custom {
       border-radius: 20px;
       box-shadow: 0 4px 15px rgba(0,0,0,0.1);
       padding: 20px;
       background: #fff;
       height: 100%; /* ensure it stretches inside column */
   }

   .legend-item {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 14px;
       margin-top: 8px;
   }
   .legend-color {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       display: inline-block;
   }
@media(max-width:768px){
    .margin-top{
        margin-top: 5% !important;
    }
}


   .upload-box {
       width: 100%;
       height: 180px;
       border-radius: 20px;
       background: #fff;

       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
       cursor: pointer;
       transition: all 0.3s ease-in-out;
   }

   .upload-box input {
       display: none;
   }
   .upload-icon {
       font-size: 40px;
       color: #6a1b9a;
       margin-bottom: 10px;
   }
   .upload-text {
       font-weight: 500;
       color: #333;
   }