/* =========================
   Global / Reset / Body
   ========================= */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #000; /* Black background */
  color: #d3d3d3; /* Light gray text */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  /* Background image */
  background-image: url('path_to_your_hd_image.jpg'); /* Replace with your image path */
  background-size: cover;   /* Ensures the image covers the entire background */
  background-attachment: fixed; /* Keeps the image fixed during scrolling */
  background-position: center; /* Centers the image */
}

/* Ensure all headings inherit light gray globally */
h1, h2, h3, h4, h5, h6 {
  color: #d3d3d3;
}

/* Links globally */
a {
  color: #d3d3d3; /* Light gray links */
  text-decoration: none;
}

a:hover, a:focus {
  color: #fff; /* White on hover */
  text-decoration: underline; /* Optional hover effect */
}


/* =========================
   Navbar Styles
   ========================= */
/* Main navbar appearance */
.navbar {
  background-color: #000; /* Black background */
  border-bottom: 1px solid #333; /* Subtle border */
  min-height: 70px;
}

/* Logo styling */
.navbar-brand img {
  height: 150px !important;
  width: auto !important;
  max-width: none !important; /* Remove any max-width constraints */
  object-fit: contain;        /* Ensures the image doesn’t get cropped */
}

/* Menu links default style */
.navbar-nav .nav-link {
  color: #d3d3d3 !important; /* Light gray text */
  transition: color 0.2s ease, background-color 0.2s ease; /* Smooth transitions */
}

/* Hover effect for menu links */
.navbar-nav .nav-link:hover {
  color: #444; /* Dark gray text on hover */
  background-color: #666; /* Darker gray background on hover */
  border-radius: 5px; /* Optional rounded corners for a better hover effect */
  padding: 0.5rem; /* Slight padding to emphasize hover effect */
}

/* Mobile view: make the toggler button light gray with darker bars */
.navbar-toggler {
  background-color: #d3d3d3; /* Light gray button background */
  border: none; /* Optional: remove border for cleaner look */
  padding: 8px; /* Slight padding for a better touch area */
  border-radius: 5px; /* Optional rounded corners */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  filter: brightness(90%); /* Darker bars */
}

/* Greeting text under navbar */
.user-greeting {
  font-style: italic;
  margin-left: 15px;
  color: #d3d3d3; /* Light gray */
}







/* =========================
   Footer Styles
   ========================= */
.site-footer {
  background-color: #000; /* Black background */
  padding: 20px 0;
  color: #555; /* Subtle dark gray */
  border-top: 1px solid #333;
}

.footer-links a {
  color: #d3d3d3;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* Social icons in the footer center */
.social-icons {
  text-align: center;
}

.social-icons a {
  margin: 0 5px;
  color: #d3d3d3;
  font-size: 20px;
  display: inline-block;
}

.social-icons a:hover {
  color: #fff;
}

/* =========================
   Modal Styles
   ========================= */
.modal-content {
  background-color: #fff; /* White background */
  color: #4d4d4d; /* Dark gray text */
  border-radius: 10px;
}

.modal-header, .modal-body, .modal-footer {
  color: #4d4d4d; /* Dark gray text */
}

.modal-header {
  border-bottom: 1px solid #ddd;
}

.modal-footer {
  border-top: 1px solid #ddd;
}

/* =========================
   WhatsApp Floating Icon
   ========================= */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  background-color: #25D366; /* WhatsApp green */
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-decoration: none;
}

.whatsapp-float:hover {
  background-color: #128c7e;
  color: #fff;
}

/* =========================
   Buttons
   ========================= */
button, .btn {
  background-color: #333; /* Dark gray background */
  color: #d3d3d3; /* Light gray text */
  border: 1px solid #555;
  transition: all 0.3s ease;
}

button:hover, .btn:hover {
  background-color: #555; /* Slightly lighter gray */
  color: #fff; /* White text */
}










/* Target only view_service_request.php using the unique class */
.view-service-requests {
    color: #fff; /* Default white font for the page */
}

/* Ensure table text is also white */
.view-service-requests th, 
.view-service-requests td {
    color: #fff !important;
    border: 1px solid #555; /* Optional: darker border for contrast */
}

/* Links on this page */
.view-service-requests a {
    color: #fff; /* White links */
    text-decoration: none;
}

.view-service-requests a:hover {
    color: #ddd; /* Slightly darker gray on hover */
}