/*THIS ARE THE STYLES FOR THE HOME SCREEN*/

/* Home Screen Top Bar */
.header-home {
    background-color: #004080; /* Blue background */
    color: white; /* White text */
    height: 180px; /* Increased height for top bar */
    display: flex; /* Flexbox for alignment */
    flex-direction: column; /* Stacks logo and text vertically */
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding: 20px; /* Adds spacing inside the bar */
}

/* Home Screen Logo */
.header-home img {
    max-height: 120px; /* Adjusts logo size */
    max-width: 300px;
    margin-bottom: 10px; /* Adds space below the logo */
}

/* Home Screen Welcome Message */
.header-home h1 {
    font-size: 32px; /* Larger font size for welcome text */
    font-weight: bold;
    margin: 0;
}


/* Location Container */
.location-container {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 50px; /* Increased space between images */
    justify-items: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    margin: 60px auto; /* Adds more margin above and below */
    width: 80%; /* Expands the width of the container */
}

/* Location Images */
.location-image {
    width: 300px; /* Even larger image width */
    height: auto; /* Maintains aspect ratio */
    border-radius: 20px; /* Adds rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Strong shadow for emphasis */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.location-image:hover {
    transform: scale(1.1); /* Slightly enlarges the image on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); /* Enhances shadow on hover */
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .location-container {
        grid-template-columns: repeat(2, 1fr); /* Adjusts to 2 columns for smaller screens */
        gap: 30px; /* Reduces spacing for smaller devices */
    }
    .location-image {
        width: 300px; /* Reduces the size for smaller screens */
    }
}


/*THIS ARE THE STYLES FOR ALL THE SCREENS*/

/* Header layout */
.header-layout {
    position: relative; /* Ensure child elements are positioned relative to the header */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    height: 120px; /* Adjust height to make space for the button */
    background-color: #004080;
    color: white;
}

/* Menu Button (☰ Icon) */
#menu-btn {
    position: absolute; /* Keeps the button positioned relative to the header */
    top: 120px; /* Places it at the bottom of the top bar */
    left: 10px; /* Aligns it with the left side of the top bar */
    margin-left:10px;
    background: none;
    border: none;
    color: white;
    font-size: 30px; /* Maintains a visible size for the icon */
    cursor: pointer; /* Makes it interactive */
    z-index: 1200; /* Ensures it stays above other elements */
}



/* Style for the logo */
.logo-left {
    width: 200px;
    height: 125px;
    margin-left: -10px;
}

/* Style for the UserName */


#profile-icon {
    width: 40px; /* ✅ Adjust icon size */
    height: 40px;
    border-radius: 50%; /* ✅ Makes it circular */
    object-fit: cover;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}



.logged-user {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px; /* Enhances readability */
}



/* Menu icon container */
.menu-icon-container {
    position: absolute; /* Keeps the icon container positioned relative to the header */
    bottom: 0px; /* Moves the menu icon to the bottom of the top bar */
    left: 20px; /* Aligns it to the left side under the logo */
    cursor: pointer; /* Changes cursor to a pointer */
}

/* Menu icon style */
.menu-icon {
    font-size: 24px;
    color: white;
    user-select: none;
}


/* Sidebar container */
#sidebar {
    position: fixed;
    left: -350px; /* Initially hidden outside the viewport */
    top: 160px; /* Matches the height of the top bar */
    width: 350px; /* Sidebar width */
    height: calc(100vh - 120px); /* Full height minus the top bar */
    background-color: #004080; /* Sidebar background color */
    color: white;
    padding-top: 20px; /* Adds padding at the top */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3); /* Subtle shadow effect */
    transition: left 0.3s ease-in-out; /* Smooth slide-in transition */
    z-index: 1100; /* Places the sidebar above other elements */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures logout button stays at the bottom */

}


/* Sidebar menu items */
#sidebar ul {
    list-style-type: none; /* Removes default bullets */
    padding: 0; /* No padding */
    margin: 0; /* No margin */
}

#sidebar ul li {
    padding: 15px; /* Adds space around menu items */
    text-align: left; /* Aligns menu text to the left */
    border-bottom: 1px solid white; /* Adds a separator line */
}

#sidebar ul li a {
    color: white; /* Link color */
    text-decoration: none; /* Removes underline */
    font-size: 18px; /* Adjust font size for readability */
    display: block;
}

#sidebar ul li a:hover {
    background-color: #003060; /* Darker background on hover */
    border-radius: 4px; /* Rounded corners on hover */
}

/* Menu Button (☰ Icon) */
#menu-btn {
    position: absolute; /* Position relative to the top bar */
    bottom: 10px; /* Position the button at the bottom of the top bar */
    left: 10px; /* Align it to the left side within the top bar */
    background: none;
    border: none;
    color: white;
    font-size: 30px; /* Maintain a readable size for the icon */
    cursor: pointer;
    z-index: 1200; /* Ensure the button stays above other elements */
}


/* Close Button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

/* Overlay Effect */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent overlay */
    display: none; /* Hidden by default */
    z-index: 1050; /* Places overlay below sidebar */
}

/* Sidebar open state */
.sidebar-active #sidebar {
    left: 0; /* Slides the sidebar into view */
}

/* Overlay visible state */
.sidebar-active #overlay {
    display: block; /* Displays overlay */
}



.sidebar-menu {
    flex-grow: 1; /* Pushes logout button down */
}

/* Fix Logout Button Placement */
.logout-section {
    left: -80px; /* Initially hidden outside the viewport */
    width: 350px; /* Sidebar width */
    display: flex;
    justify-content: center;
    padding: 80px;
    position: relative;
}

.logout-button {
    left: -350px; /* Initially hidden outside the viewport */
    top: 160px; /* Matches the height of the top bar */
    width: 350px; /* Sidebar width */
    padding: 12px;
    background-color: #cc0000;
    color: white;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.logout-button:hover {
    background-color: #990000;
}


/* Centering and styling for the location name */
.location-name {
    position: absolute; /* Ensures it stays centered */
    left: 50%; /* Moves it to the center */
    transform: translateX(-50%); /* Perfectly centers the text */
    font-size: 50px; /* Larger font size for the title */
    font-weight: bold; /* Keeps it bold */
    text-transform: uppercase; /* Makes text uppercase */
    margin: 0;
    text-align: center;
    color: white; /* Keeps the text color consistent */
}


/* General body styles */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #e6e6e6;
    margin: 0;
    padding: 0;
}

/* Placeholder content styling */
main {
    padding: 20px;
}

.location-button-container {
    display: flex; /* Flexbox layout */
    justify-content: center; /* Align buttons horizontally */
    align-items: center; /* Align buttons vertically */
    gap: 30px; /* Space between buttons */
    height: calc(100vh - 3.5in); /* Adjust container height */
    margin: 0;
    position: relative; /* Required for positioning pseudo-element */
}

.location-button-container::before {
    content: ''; /* Creates a pseudo-element */
    position: absolute; /* Ensures the image is placed behind the buttons */
    top: 0;
    left: 0;
    width: 100%; /* Fills the container */
    height: 100%; /* Fills the container */
    background-image: url('../images/PTI_icon.webp'); /* Add background image */
    background-repeat: no-repeat; /* Prevent tiling */
    background-size: 2000px; /* Control image size */
    background-position: center; /* Center the image */
    opacity: 0.0; /* Makes the image 20% opaque */
    z-index: -1; /* Places the image behind the buttons */
}

/* Button styles */
.section-button {
    width: 300px; /* Larger width for buttons */
    height: 100px; /* Larger height for buttons */
    background: #0073e6; /* Base color for buttons */
    color: white; /* Button text color */
    border: none; /* Removes default border */
    border-radius: 10px; /* Rounded corners */
    font-size: 24px; /* Larger font size for readability */
    font-weight: bold; /* Makes text bold */
    cursor: pointer; /* Changes cursor to pointer on hover */
    transition: transform 0.2s ease, background-color 0.3s ease; /* Adds hover effect transitions */
}

/* Hover effect for buttons */
.section-button:hover {
    background-color: #003060; /* Darker shade when hovering */
    transform: scale(1.1); /* Enlarges button slightly on hover */
}

/* Active button effect */
.section-button:active {
    background-color: #002040; /* Even darker shade when clicked */
    transform: scale(0.95); /* Shrinks button slightly on click */
}



/* STYLES FOR DEPARTMENT BUTTONS */
.location-button-container {
    display: flex; /* Use flexbox for alignment */
    flex-wrap: wrap; /* Allows wrapping onto multiple rows */
    justify-content: center; /* Centers buttons */
    gap: 40px; /* Space between buttons */
    margin: 50px auto; /* Adjusts spacing */
}

/* Individual Location Buttons */
.location-button {
    display: flex; /* Flexbox for content alignment */
    flex-direction: column; /* Stacks icon and text */
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
    width: 220px; /* Adjusted button size */
    height: 220px;
    background-color: #004080; /* Blue background */
    color: white; /* White text */
    border: none;
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Shadow for depth */
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Button Icons */
.location-button img {
    width: 80px; /* Icon size */
    height: 80px;
    margin-bottom: 10px; /* Space between icon and text */
}

/* Hover Effect */
.location-button:hover {
    background-color: #003060;
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}



/* DEPARTMENT SCREENS */

/* Screen Buttons */
.quality-button-container {
    display: flex;
    flex-wrap: wrap; /* ✅ Allows buttons to break into two rows */
    justify-content: center; /* ✅ Ensures even spacing */
    gap: 20px; /* ✅ Reduces space between buttons */
    max-width: 800px; /* ✅ Prevents excessive spreading */
    margin: 40px auto; /* ✅ Centers the grid */
}


/* Individual function Buttons */
.quality-button {
    display: flex; /* Flexbox for alignment */
    flex-direction: column; /* Stacks icon and text */
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
    width: 220px; /* Adjusted button size */
    height: 220px;
    background-color: #004080; /* Blue background */
    color: white; /* White text */
    border: none;
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Shadow for depth */
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Button Icons */
.quality-button img {
    width: 80px; /* Icon size */
    height: 80px;
    margin-bottom: 10px; /* Space between icon and text */
}

/* Hover Effect */
.quality-button:hover {
    background-color: #003060;
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Date & Shift Display */
.date-shift {
    position: absolute;
    right: 20px; /* Align to the right */
    top: 65%;
    transform: translateY(-50%); /* Center vertically */
    font-size: 18px;
    font-weight: bold;
    color: white;
    display: flex;
    flex-direction: column; /* Stacks date and shift vertically */
    align-items: flex-end; /* Aligns text to the right */
    gap: 5px; /* Adds spacing between date and shift */
}

@media screen and (max-width: 768px) {
  .header-layout {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 40px 15px;
    height: auto;
    flex-wrap: nowrap;
  }

  .logo-left {
    width: 140px;
    height: auto;
  }

  .location-name {
    font-size: 30px;
    flex: 1;
    text-align: center;
    margin: 0;
  }

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    font-size: 08px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #profile-icon {
    width: 28px;
    height: 28px;
  }

  .logged-user {
    font-size: 12px;
  }

  .date-shift {
    font-size: 12px;
    text-align: right;
    line-height: 1.1;
  }

  #menu-btn {
    position: absolute;
    top: 75px;
    left: 10px;
    font-size: 22px;
  }
}


.user-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  padding: 8px 0;
  z-index: 999;
  min-width: 160px;
  white-space: nowrap;
}

.user-info {
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1000; /* Optional: makes sure it stays above other elements */
}


.user-menu a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 8px;
}

.user-menu a:hover {
  background-color: #f0f0f0;
}

/* Ensure main can position children absolutely */
main { position: relative; }

.ops-report-cta{
  display: flex;
  justify-content: center;
  margin: 10px auto 60px;   /* space above/below the button */
  width: 100%;
}

/* Neutral, centered CTA button (no absolute positioning) */
.kpi-button{
  position: static;                 /* <-- important: not absolute */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  background: #ffffff;
  color: #004080;
  border: 2px solid #004080;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  width: clamp(240px, 40vw, 360px); /* nice responsive width */
  min-height: 56px;
}

.kpi-button:hover{
  background-color: #f3f7ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}

.kpi-button:active{ transform: translateY(0); }

.kpi-button img{
  width: 20px;
  height: 20px;
  display: block;
}

/* Mobile tweaks */
@media (max-width: 768px){
  .ops-report-cta{ margin: 0 auto 40px; }
  .kpi-button{
    width: 90%;
    font-size: 15px;
    min-height: 52px;
  }
  .kpi-button img{ width: 18px; height: 18px; }
}

/* Pull the Ops Report button up under the grid */
.location-button-container{
  height: auto !important;        /* stop reserving extra space */
  margin: 50px auto 8px !important;  /* was ~50px bottom gap */
}

.ops-report-cta{
  margin: 100px auto 32px !important; /* remove top gap */
}

/* If you want it even tighter, uncomment the line below */
/* .ops-report-cta{ margin-top: -10px !important; } */