/*this is the style sheet for the adminDashboard. */

/* 
Global Reset (`*`)

* Purpose: Ensure consistent layout across all browsers.
* Properties:

  * `margin: 0` — removes default outer spacing from all elements.
  * `padding: 0` — removes default inner spacing.
  * `box-sizing: border-box` — ensures padding and borders are included within the total width/height of elements.

Base HTML & Body (`html, body`)

* Purpose: Establish a full-height layout and apply a standard font across the page.
* Properties:

  * `height: 100%` — allows containers to stretch to the full viewport height.
  * `font-family: Arial, sans-serif` — applies a clean, readable sans-serif font.

Main Layout Wrapper (`.wrapper`)

* Purpose: Create a flexible, vertical layout that fills the entire screen.
* Properties:

  * `display: flex` — enables flexbox for layout control.
  * `flex-direction: column` — stacks children vertically.
  * `min-height: 100vh` — ensures the wrapper always covers full screen height.

Section Heading (`h2`)

* Purpose: Style the headings prominently for section separation.
* Properties:

  * `font-size: 32px` — makes the heading large and noticeable.
  * `font-weight: bold` — emphasizes text.
  * `margin-bottom: 50px` — creates space below the heading.
  * `color: #003e3e` — uses a strong teal for visual anchoring.

Main Content Section (`.main-content`)

* Purpose: Layout the main content with padding and a background image.
* Properties:

  * `flex-grow: 1` — lets the content fill the available vertical space.
  * `padding: 40px` — adds internal spacing around content.
  * `display: flex` and `flex-direction: column` — organizes content in a vertical stack.
  * `text-align: center` — centers the text.
  * `background-image: url("index.png")` — sets a full-screen dashboard background.
  * `background-size: cover` — ensures the image covers the whole section.
  * `background-position: center` — centers the image.
  * `background-repeat: no-repeat` — avoids tiling the image.
  * `background-attachment: fixed` — fixes the image while scrolling.

Primary Button (`button`)

* Purpose: Design prominent, interactive buttons for main actions.

* Properties:

  * `background-color: #A62B1F` — sets a bold red color.
  * `color: white` — makes text stand out.
  * `border: none` — removes any outline/border.
  * `border-radius: 12px` — creates rounded corners.
  * `padding: 10px 20px` — gives space inside the button.
  * `margin-top: 20px` — adds spacing above the button.
  * `width: 200px` — ensures consistent button width.
  * `cursor: pointer` — shows a hand icon on hover.
  * `font-size: 16px` — makes the text readable.

* On Hover:

  * Retains the same red background to maintain branding.

Admin Button (`.adminBtn`)

* Purpose: Provide a secondary button style for admin-specific actions.

* Properties:

  * `background-color: #f4f4f4` — uses a light grey background.
  * `color: #333` — uses dark text for contrast.
  * `font-weight: bold` — emphasizes text.
  * `width: 110px` — smaller, compact width.
  * `padding: 10px 0` — vertical padding only.
  * `border: none` — clean look.
  * `cursor: pointer` — indicates it's clickable.

* On Hover**:

   Changes text color to `#A62B1F` for brand consistency while keeping the background same.


*/