:root {
    --primary-color: #8B0000;
    --card-bg-color: #fff;
    --text-color: #333;
    --border-color: #e8e8e8;
    --success-color: #28a745;
    --danger-color: #dc3545; /* MUST BE DEFINED HERE OR GLOBALLY ACCESSIBLE */
    --info-color: #17a2b8;
    --warning-color: #FF8C00;
    --label-color: #000;
    --bg-color: #f8f4ef;
    --light-text-color: #6c757d;
    /* Add other common variables used across your site */
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  padding: 10px; /* Reduced padding a bit for mobile, container will add more */
  margin: 0; /* Good practice to reset default body margin */
}

h1, h2 {
  color: darkred;
}

/* NEW: Add this general container class */
.site-container {
  width: 100%; /* Takes full available width */
  max-width: 600px; /* Default max-width, good for mobile & small views */
  margin-left: auto;  /* Centers the container */
  margin-right: auto; /* Centers the container */
  padding: 15px;      /* Inner spacing for the content */
  background-color: #ffffff; /* Optional: Give containers a white background */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Optional: A subtle shadow */
  border-radius: 8px; /* Optional: Rounded corners */
}

/* --- Media Queries for Larger Screens --- */

/* For screens 768px wide and larger (tablets and small desktops) */
@media (min-width: 768px) {
  body {
    padding: 20px; /* Can have more body padding on larger screens */
  }
  .site-container {
    max-width: 960px; /* Allow the container to be wider */
    padding: 25px;
  }

  /* Example for admin panel layout with sidebar */
  .admin-page-wrapper { /* Add this class to a div wrapping sidebar and main content in admin pages */
    display: flex;
    max-width: 100%; /* Override site-container's max-width if needed for full-width feel */
    background-color: transparent; /* Override site-container's background */
    box-shadow: none; /* Override site-container's shadow */
    padding: 0; /* Override site-container's padding */
  }

  .admin-sidebar {
    width: 240px; /* Fixed width for sidebar */
    flex-shrink: 0; /* Don't allow sidebar to shrink */
    background-color: #e9e9e9; /* Example sidebar background */
    padding: 20px;
    height: calc(100vh - 40px); /* Example full height minus body padding */
    overflow-y: auto; /* Scroll if content is long */
  }

  .admin-main-content {
    flex-grow: 1; /* Main content takes remaining space */
    padding: 25px;
    background-color: #ffffff;
    margin-left:10px; /* Space between sidebar and content */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
}

/* For screens 1200px wide and larger (larger desktops) */
@media (min-width: 1200px) {
  .site-container {
    max-width: 1140px; /* Even wider for large screens */
  }
  .admin-sidebar {
    width: 280px; /* Slightly wider sidebar on very large screens */
  }
}

/* =================================
   Floating Back Button
==================================== */
.floating-back-btn {
    position: fixed;
    top: 45px;
    left: 0px;
    z-index: 1050;
    
    width: 70px;
    height: 70px;
    background-color: transparent; /* Changed */
    border-radius: 50%;
    box-shadow: none; /* Changed */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: transform 0.2s ease-in-out;
}

.floating-back-btn:hover {
    transform: scale(1.1); /* Slightly enlarges the button on hover */
}

.floating-back-btn img {
    width: 25px !important; /* Add !important here */
    height: auto;
}
.modal-content {
    background: #ffffff !important; /* Force a solid white background */
    border: 1px solid #ddd;
}