body {
    min-height: 75rem;
    padding-top: 56px;
    overflow-x: hidden;
  }
  
  h1 {
      color: red;
    }
  
img.cover_image {
    height: 300px;
    width: auto;
  }

/* ========== Mobile-first responsive layout ========== */

/* Page wrapper: stack vertically on small screens */
.page-with-sidebar {
  flex-direction: column !important;
  min-height: 0;
}

/* Sidebar: full width on mobile, fixed 200px on desktop */
.app-sidebar {
  width: 100% !important;
  flex-shrink: 0;
}

/* Main content: stack list + detail on mobile */
.main-content-area {
  flex-direction: column !important;
  min-width: 0;
}

/* Reduce padding on small screens */
.main-content-area .p-4 {
  padding: 0.75rem !important;
}

/* Tables: horizontal scroll without breaking layout */
.table-responsive {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  body {
    min-height: 100vh;
  }

  h1 {
    font-size: 1.5rem;
  }

  img.cover_image {
    height: 180px;
    max-width: 100%;
  }

  .content-div {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

@media (min-width: 768px) {
  .page-with-sidebar {
    flex-direction: row !important;
    min-height: 100vh;
  }

  .app-sidebar {
    width: 200px !important;
  }

  .main-content-area {
    flex-direction: row !important;
  }
}