/* Dashboard background and shared topbar styles
   Reusable file for pages that want the dashboard look-and-feel.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

html, body, body.bg-gradient-to-br, body[class*="bg-gradient"] {
  font-family: 'Inter', sans-serif;
  /* Apply the gradient to the root elements and make it cover the viewport.
     Using background-attachment: fixed and background-size: cover keeps the
     gradient continuous even when inner containers scroll (mobile long lists). */
  background: linear-gradient(180deg, rgb(34, 197, 94) 0%, rgb(203, 255, 222) 50%, rgb(255, 255, 255) 100%) fixed no-repeat;
  background-size: cover;
  /* Use dark text for main content. Sidebar uses more specific selectors in css/sidebar.css
     so its white text will remain intact. Avoid !important here to let sidebar rules win. */
  color: #111;
  min-height: 100vh;
  height: 100%;
  overflow-x: hidden;
}

/* Shared topbar styles used by dashboard pages */
#topbar {
  background: #0c3f06; /* deep green header */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 300;
}

.menu-icon, #topbarToggle i {
  font-size: 22px;
  cursor: pointer;
  color: #ffffff;
}

/* Ensure topbar text and links are white (pages set body color to dark by default). */
#topbar, #topbar * {
  color: #fff;
}

#topbar a { color: #fff; }

/* Small utility to ensure main headings stand out on the gradient */
#mainContent h1 {
  color: #ffffff;
  text-shadow: 2px 2px #00000066;
}