/* CSS File: main.css */
/* Modern scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(59, 130, 246, 0.7); /* Tailwind blue-500 */
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}


.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(59, 130, 246, 0.7); /* Tailwind blue-500 */
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}


/* ===========================
   RESPONSIVE FIX FOR MOBILE VIEW
=========================== */
@media only screen and (max-width: 768px) {

  /* Hide sidebar by default */
  .sidebar {
    display: none !important;
    width: 100% !important;
  }

  /* Show when user taps Menu button */
  .sidebar.show {
    display: block !important;
    background: #ffffff;
    position: relative;
    z-index: 999;
  }

  /* Stack layout vertically */
  .dashboard-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Main content full width */
  .main-content {
    width: 100% !important;
    padding: 10px !important;
  }

  /* Cards stack vertically */
  .dashboard-card {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  /* Fix overlapping header */
  header, .top-bar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .top-bar button,
  .top-bar a {
    font-size: 14px !important;
    padding: 6px 10px !important;
  }

  /* Allow scrolling */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Show the menu button only on mobile */
  .sidebar-toggle {
    display: block !important;
    width: 100%;
    background: #007bff;
    color: #fff;
    padding: 12px;
    border: none;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
  }
}

/* Hide the menu button on desktop */
@media only screen and (min-width: 769px) {
  .sidebar-toggle {
    display: none !important;
  }
}