/* Overall layout adjustments for responsiveness */
#wrapper {
  display: flex; /* Make the wrapper a flex container */
  min-height: 100vh; /* Ensure it takes full viewport height */
}

#sidebar-wrapper {
  width: 250px; /* Fixed width for the sidebar */
  flex-shrink: 0; /* Prevent sidebar from shrinking */
  background-color: #f8f9fa; /* Added for consistency, or use #ffffff if it matches your design */
}

#page-content-wrapper {
  flex-grow: 1; /* Allow main content to grow and fill available space */
  padding-left: 1.5rem; /* Add some padding to the left */
  padding-right: 1.5rem; /* Add some padding to the right */
  padding-top: calc(
    56px + 1.5rem
  ); /* Adjust for fixed navbar height + padding */
  padding-bottom: 1.5rem;
}

/* Ensure the main content is visible once loaded */
#mainContent {
  display: block !important; /* Override d-none for demonstration */
}

/* Center the card within the main content area and control its max-width */
.row.justify-content-center {
  margin-left: 0;
  margin-right: 0;
}

.col-lg-8.col-md-10 {
  width: 100%; /* Ensure it takes full column width */
  max-width: 900px; /* Set a maximum width for the card on larger screens */
  margin-left: auto; /* Center the card */
  margin-right: auto; /* Center the card */
}

/* Consistent card styling with pending-submissions.css */
.card {
  border-radius: 0.75rem;
  overflow: hidden; /* Ensures header corners are rounded */
}

/* Specific styles for add task form card header */
.card-header.bg-primary {
  background: linear-gradient(
    135deg,
    #007bff,
    #0056b3
  ) !important; /* Blue gradient for consistency with Bootstrap primary */
  color: #fff;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  display: flex;
  align-items: center;
}

.card-header.bg-primary h5 {
  margin-bottom: 0;
  font-weight: 600;
}

/* Form element styling for consistency */
.form-label.fw-bold {
  font-weight: 600 !important;
  color: #495057;
  margin-bottom: 0.5rem;
}

.form-control,
.form-select {
  border-radius: 0.5rem;
  border: 1px solid #ced4da;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control:focus,
.form-select:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

textarea.form-control {
  resize: vertical;
}

/* Button styling for consistency */
.btn-success {
  background-color: #28a745;
  border-color: #28a745;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
}

.btn-lg {
  padding: 0.8rem 1.8rem;
  font-size: 1.25rem;
}

/* Utility for small text */
.form-text.text-muted {
  font-size: 0.875em;
  color: #6c757d !important;
}

/* Specific adjustments for layout if needed, though Bootstrap handles most */
.container-fluid.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

#mainContent hr {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  #sidebar-wrapper {
    width: 0;
    overflow: hidden;
    position: absolute;
    height: 100%;
    z-index: 1000;
    transition: width 0.3s ease;
  }

  #page-content-wrapper {
    margin-left: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .col-lg-8.col-md-10 {
    width: 100%;
    max-width: none;
  }
}

/* Custom Primary Color for Navbar */
.bg-custom-primary {
  background-color: #1c78b2 !important;
}

/* Text color for specific elements in the navbar */
.navbar-brand,
.navbar-nav .nav-link,
.navbar-nav .dropdown-toggle {
  color: #fff !important;
}

/* Sidebar active item styling to keep dark text and blue border */
.list-group-item.active {
  background-color: #e9ecef !important;
  color: #212529 !important;
  border-color: #1c78b2 !important;
  border-left: 5px solid #1c78b2 !important;
}

.list-group-item.active .fas {
  color: #212529 !important;
}

/* Adjust hover state for consistent visual feedback */
.list-group-item.bg-light:hover {
  background-color: #e2e6ea !important;
}

/* --- Notification Toast Styling --- */

/* Container for centering the toast */
.centered-toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1100; /* Ensure it's above other elements */
  width: 100%; /* Allows for max-width on the toast itself */
  max-width: 380px; /* Max width of the toast area */
  padding: 0 15px; /* Padding for small screens */
  pointer-events: none; /* Allow clicks to pass through the container */
}

/* Base style for the toast */
.centered-toast {
  width: 100%;
  text-align: center;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.25) !important; /* Stronger shadow */
  border-radius: 1rem; /* More rounded corners */
  overflow: hidden; /* Ensures content stays within rounded corners */
  color: #fff; /* Default text color for toast body */
  background-color: #343a40; /* Fallback background */
  border: none; /* Remove default bootstrap border */
  display: block; /* Ensure it starts as block for animation */
  opacity: 0; /* Start hidden for animations */
  visibility: hidden;
  will-change: transform, opacity; /* Optimize animation performance */
  transition: none !important; /* Disable Bootstrap's default transition */
}

/* Show animation */
.centered-toast.showing {
  animation: fadeInDown 0.5s ease-out forwards;
}

/* Hide animation (optional, if you want a separate exit animation) */
.centered-toast.hiding {
  animation: fadeOutUp 0.5s ease-in forwards;
}

.centered-toast .toast-header {
  justify-content: center; /* Center header content */
  padding: 1rem 1.5rem 0.75rem 1.5rem; /* Adjust padding */
  border-bottom: none; /* Remove default border */
  color: #fff;
  font-weight: bold;
  position: relative; /* For the close button position */
}

.centered-toast .toast-header .btn-close {
  filter: invert(1); /* Make the close button white */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem; /* Make it easier to click */
}

.centered-toast .toast-header .me-auto {
  margin-right: 0 !important; /* Override default margin to truly center */
}

.centered-toast .toast-body {
  padding: 0.75rem 1.5rem 1.5rem 1.5rem; /* Adjust padding */
  font-size: 1.1rem;
  line-height: 1.4;
}

/* Specific styling for success toast */
.centered-toast.toast-success {
  background: linear-gradient(135deg, #28a745, #218838); /* Green gradient */
}
.centered-toast.toast-success .toast-header {
  background: linear-gradient(
    135deg,
    #218838,
    #1e7e34
  ); /* Darker green for header */
}
.centered-toast.toast-success #notificationIcon {
  color: #fff; /* White icon */
}

/* Specific styling for error toast */
.centered-toast.toast-danger {
  background: linear-gradient(135deg, #dc3545, #c82333); /* Red gradient */
}
.centered-toast.toast-danger .toast-header {
  background: linear-gradient(
    135deg,
    #c82333,
    #bd2130
  ); /* Darker red for header */
}
.centered-toast.toast-danger #notificationIcon {
  color: #fff; /* White icon */
}

/* Specific styling for info toast */
.centered-toast.toast-info {
  background: linear-gradient(135deg, #17a2b8, #138496); /* Blue-ish gradient */
}
.centered-toast.toast-info .toast-header {
  background: linear-gradient(
    135deg,
    #138496,
    #117a8b
  ); /* Darker info for header */
}
.centered-toast.toast-info #notificationIcon {
  color: #fff; /* White icon */
}

/* Keyframe Animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -100px); /* Start further up */
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%); /* End centered */
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -100px); /* Move further up as it fades */
  }
}