/* === MODAL SCROLLBAR FIX === */
/* scrollbar-gutter:stable reserves the gutter permanently so no
   padding compensation is ever needed when a modal opens. */
html {
  scrollbar-gutter: stable;
}
body.modal-open {
  overflow: hidden;
  padding-right: 0 !important;
}
/* Bootstrap 5 also pads fixed/sticky positioned elements — suppress those too */
.modal-open .fixed-top,
.modal-open .fixed-bottom,
.modal-open .sticky-top {
  padding-right: 0 !important;
}
.modal {
  scrollbar-gutter: stable;
}

/* === LOGIN MODAL STYLING === */

.login-modal-body {
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 10px;
}

.login-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #212529;
  text-align: center;
}

.login-form-group {
  margin-bottom: 1rem;
}

.login-form-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #495057;
}

.login-form-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

.login-form-input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  outline: none;
}

.login-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: #999;
}

.modal-title {
  font-size: 1.25rem;
}

.modal-body p.small {
  margin-bottom: 1.5rem;
}

.modal-footer {
  padding-top: 1rem;
  justify-content: flex-end;
}

form .form-control {
  padding: 0.6rem 0.75rem;
}


/* === GENERAL STYLING === */


.table-striped tbody tr:nth-of-type(odd):visible {
    background-color: rgba(207, 23, 23, 0.05);  // Adjust the color to match your theme
}

.small-icon {
    font-size: 0.8rem; /* Adjust the font size as needed */
}


.breadcrumb-item + .breadcrumb-item::before {
    content: none;
}


html, body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 40;
    padding: 0;
    xxxcolor: #343a40;
    flex-direction: column;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-top: 40px; /* Reduced the top margin to bring the sidebar up */
}




#xpage-content-wrapper {
  flex: 1;
  overflow-y: auto;
  padding-left: 60px;
}
#xpage-content-wrapper {
  padding-bottom: 60px; /* Add padding to the bottom to make room for the footer */
  margin-left: 60px; /* Adjust according to sidebar width */
  z-index: 1; /* Make sure the content stays below the footer */
}
#xpage-content-wrapper {
  padding-left: 60px; /* Maintain 60px left padding for the sidebar */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
#xxxpage-content-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow the content area to grow to fill available space */
  padding-left: 60px; /* Keep the sidebar visible */
  padding-bottom: 0px;
}
#page-content-wrapper {
  xxxpadding-left: 60px; /* Keep the sidebar visible */
  padding-left: 10px; /* Keep the sidebar visible */
  xxxpadding-right: 10px; /* Keep the sidebar visible */
  display: flex;
  flex-grow: 1;
  height: auto;
  min-height: 100vh; /* Full height of the viewport */
  align-items: flex-start; /* Align content to the top, reducing vertical stretching */
  flex-direction: column;
}





/*  ====================================================================================================  */
/*  ===  START - NAVBAR - Dropdown Menu                                                                   */
/*  ====================================================================================================  */

.dropdown-menu-wide {
  min-width: 300px; /* Minimum width */
  width: 350px;      /* Fixed width */
}

/* Optional: Adjust width for larger screens */
@media (min-width: 768px) {
  .dropdown-menu-wide {
      width: 400px;
  }
}

/* Optional: Adjust width for smaller screens */
@media (max-width: 575.98px) {
  .dropdown-menu-wide {
      width: 100%; /* Full width on extra small devices */
  }
}






/*  ====================================================================================================  */
/*  ===  START - CONTENT                                                                                  */
/*  ====================================================================================================  */

.content {
    flex: 1; /* Grow to fill remaining space */
    padding-bottom: 100px; /* Adjust this value based on the footer height */
}

.expandable-section-white {
    flex: 1;
    height: auto;
    background-color: #fff;
}

.expandable-section-offwhite {
    flex: 1;
    background-color: #f0f0f0; /* Adjust as needed */
}

.xfooter {
    z-index: 1050;
    width: 100%;
    background-color: #212529;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    /* flex-shrink: 0;  Removing this to allow the footer to scroll */
    position: relative;
    bottom: 0; /* Stick to bottom of its container */
}
.xfooter {
  position: fixed; /* Fix the footer to the bottom of the viewport */
  bottom: 0;
  left: 0;
  width: 100%; /* Ensure it spans the full width of the page */
  z-index: 1000; /* Make sure it's above the sidebar */
  background-color: #212529;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
.xfooter {
  background-color: #212529;
  color: #fff;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  position: relative;
  flex-shrink: 0;
}
.footer {
  width: 100%;
  background-color: #212529;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  margin-top: auto; /* Ensure the footer stays at the bottom unless there is enough content */
  xflex-shrink: 0;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hr-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%; /* Adjust width as needed */
    margin: 20px auto;
}

.hr-left, .hr-right {
    flex: 1;
    border-top: 1px solid #ccc;
}

.social-icons {
    display: flex;
    align-items: center;
    padding: 0 20px; /* Adjust padding between hr and icons as needed */
}

.social-icons i {
    font-size: 1.5em; /* Adjust icon size as needed */
    color: #999; /* Adjust icon color as needed */
    margin: 0 10px; /* Adjust margin between icons as needed */
    margin-top: 10px; /* Adjust this value as needed */
    margin-bottom: 10px; /* Adjust this value as needed */
}

.footer-logo {
    height: 20px;
    padding-right: 3px;
    padding-top: 3px;
    margin-bottom: 12px; /* Adjust this value as needed */
}

.footer-logo-text {
    height: 24px;
    padding-left: 3px;
    padding-bottom: 3px;
    margin-bottom: 12px; /* Adjust this value as needed */
}

.footer-copyright {
    font-size: 0.95rem; /* Slightly smaller font size */
    font-weight: 300;    /* Light font weight */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Optional: specify a font family */
    color: #999; /* Optional: lighter color for the text */
}

.footer-link {
    text-decoration: none;
    color: #999;
    font-size: 0.75rem; /* Slightly smaller font size */
    font-weight: 300;    /* Light font weight */
    font-family: inherit;
    xfont-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Optional: specify a font family */
    padding-left: 5px;
    padding-right: 5px;
}

.footer-link:hover {
    text-decoration: underline; /* Optional: Add a hover effect */
}

.footer-spacer {
    height: 30px; /* Adjust this value to create more space */
}

.spacer-30 {
    height: 30px; /* Adjust this value to create more space */
}
.spacer-50 {
    height: 50px; /* Adjust this value to create more space */
}
.spacer-100 {
    height: 100px; /* Adjust this value to create more space */
}





/* Footer for logged-in users */
.xxxlogged-in-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 50px; /* Set the height to 50px */
  xbackground-color: white; /* White background */
  background-color: #f8f9fa; /* Very light gray */
  color: #333; /* Dark gray text */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a light shadow for effect */
}
.logged-in-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 50px;
  xbackground-color: white; /* White background */
  background-color: #f8f9fa; /* Very light gray */
  color: #333;
  text-align: center;
  z-index: 100;
  
  /* Flexbox properties to center the content */
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-content {
  font-size: 0.8rem;
  font-weight: 300;
  color: #333; /* Dark gray text */
}





.hero {
    background-color: #007bff;
    color: white;
    padding: 50px 0px;
    text-align: center;
  }
  .hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
  }
  .hero p {
    font-size: 1.25rem;
    font-weight: 300;
  }

  


  .features-icons {
    padding-top: 5rem;
    padding-bottom: 6rem;
  }
  .features-icons .features-icons-item {
    max-width: 20rem;
  }
  .features-icons .features-icons-item .features-icons-icon {
    height: 7rem;
  }
  .features-icons .features-icons-item .features-icons-icon i {
    font-size: 3.5rem;
  }

  

  .features {
    padding: 70px 0;
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .features h2 {
    color: #555;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 80px;
  }
  .feature {
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 40px;
  }
  .feature h3 {
    color: #444;
    xfont-size: 1.5rem;
    xfont-weight: 700;
  }
  .feature p {
    color: #222;
    font-size: 1.1rem;
    font-weight: 300;
  }



  .cta-section {
    background-color: #343a40;
    color: white;
    padding-top: 5rem;
    padding-bottom: 6rem;
    text-align: center;
    letter-spacing: 1.3px;
  }
  .cta-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .cta-section p {
    font-size: 1.5rem;
    font-weight: 100;
    letter-spacing: 1.3px;
    margin-top: 20px;
    margin-bottom: 60px;
  }
  .cta-btn {
    xbackground-color: #28a745;
    xcolor: white;
    padding: 15px 30px;
    font-size: 1.25rem;
    xborder: none;
    xborder-radius: 5px;
    xtext-decoration: none;
  }


  
  .pricing-section {
    background-color: white;
    color: #333;
    padding-top: 4rem;
    padding-bottom: 3rem;
    text-align: center;
    letter-spacing: 1.3px;
  }
  .pricing-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
  }
  .pricing-section p {
    font-size: 1.5rem;
    font-weight: 100;
    letter-spacing: 1.3px;
    margin-top: 20px;
    margin-bottom: 60px;
  }



  .testimonials-section {
    background-color: #e1e2e3;
    color: #333;
    padding-top: 5rem;
    padding-bottom: 4rem;
    text-align: center;
    letter-spacing: 1.3px;
  }
  @media (max-width: 767px) {
    .testimonials-section {
      padding-bottom: 2rem;
    }
  }
  .testimonials-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 40px;
  }
  .testimonial {
    xpadding: 60px 0;
    text-align: center;
  }
  .testimonial-item {
    line-height: 180%;
    padding: 0 30px;
  }
  .testimonial-item h5 {
    margin-top: 20px;
  }



  .comparison-section {
    xbackground-color: #343a40;
    background-color: white;
    color: #333;
    padding-top: 5rem;
    padding-bottom: 6rem;
    text-align: center;
    letter-spacing: 1.3px;
  }
  .comparison-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 60px;
  }



.faq-section {
  background-color: #f1f2f8;
  color: #333;
    padding-top: 4rem;
    padding-bottom: 5rem;
    text-align: center;
    letter-spacing: 0.8px;
  }
  .faq-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 60px;
    letter-spacing: 1.3px;
  }
  .faq-section p {
    font-size: 1.25rem;
    margin-bottom: 20px;
    letter-spacing: 1.3px;
  }








///
/// ontrackable logo for desktop / mobile
///
  .responsive-img {
    height: 40px; /* Default height for smaller screens */
    margin: 0 0 40px 0;
  }
  
  @media (max-width: 767px) {
    .responsive-img {
      height: 45px;
      margin: 0 0 40px 0;
    }
  }

  @media (min-width: 768px) {
    .responsive-img {
      height: 50px; /* Height for tablets */
      margin: 0 0 50px 0;
    }
  }
  
  @media (min-width: 1024px) {
    .responsive-img {
      height: 80px; /* Height for desktops */
      margin: 0 0 40px 0;
    }
  }
  






///
/// Radio button hover for responsive look/feel in VIEW-TASK
///
  
.table-hover tbody tr {
  position: relative;
}

.radio-button {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  vertical-align: middle;
  font-size: 1rem;
  color: gray;
  cursor: pointer;
}

.table-row:hover .radio-button {
  display: inline-block;
}

.table-row:hover .radio-button:hover::before {
  content: '\f518'; /* Unicode for bi-record-circle */
  font-family: 'bootstrap-icons';
  color: blue;
}
  




///
/// TO CHANGE THE ORDER OF THE LOGO AND SIDEBAR WAFFLE
///

/* Ensure custom order for navbar items */
.navbar .navbar-toggler {
  order: 1;
  margin-right: 10px; /* Adjust as needed */
}

.navbar .navbar-brand {
  order: 0;
}






/*  ====================================================================================================  */
/*  ===  START - Transparent table for info panels */
/*  ====================================================================================================  */
.table_custom { --bs-table-bg: transparent !important; }
/* END - Transparent table for info panels */

.table_custom {
  table-layout: fixed;
}




/*  ====================================================================================================  */
/*  ===  START - Tables with hyperlinked rows */
/*  ====================================================================================================  */

.table-row {
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Initially hide the icon */
.table-row .table-row-icon {
  color: white; /* Ensure the initial color inherits from the table row */
}

/* Style for table row to show icon on hover */
.table-row:hover .table-row-icon {
  color: #6e6e6e; /* Mid-grey color */
  color: #007bff; /* Blue color */
  visibility: visible;
}

/* Change icon color to blue when hovering over the icon itself */
.table-row .table-row-icon:hover {
  color: #007bff; /* Blue color */
}
/* END - Tables with hyperlinked rows */



/*  ====================================================================================================  */
/*  ===  START - HOVER - DIV with revealing icons                                                         */
/*  ====================================================================================================  */

/* Container styling */
.hover-container {
  position: relative; /* Ensure the position is relative for absolute positioning of the icon */
  cursor: pointer; /* Change cursor to pointer on hover */
  display: inline-block; /* Ensure the container takes up only necessary width */
}

/* Initially hide the icon */
.hover-container .hover-icon {
  color: rgb(200, 200, 200); /* Make the icon light grey initially */
  /*visibility: hidden; /* Hide the icon initially */
  margin-left: 8px; /* Optional: add some space between text and icon */
  transition: color 0.2s, visibility 0.2s; /* Smooth transition for color and visibility */
}

/* Show the icon when hovering over the container */
.hover-container:hover .hover-icon {
  visibility: visible; /* Make the icon visible */
  color: #007bff; /* Blue color */
}

/* Change icon color to blue when hovering over the icon itself */
.hover-container .hover-icon:hover {
  color: #007bff; /* Blue color */
}


/* Initially hide the button */
.hover-container .hover-button {
  visibility: hidden; /* Hide the button initially */
  margin-left: 8px; /* Optional: add some space between text and button */
  transition: color 0.2s, visibility 0.2s; /* Smooth transition for color and visibility */
}

/* Show the button when hovering over the container */
.hover-container:hover .hover-button {
  visibility: visible; /* Make the button visible */
}


/*  ====================================================================================================  */
/*  ===  START - HOVER - Circular Button   [ Back Buttons ]                                               */
/*  ====================================================================================================  */

.circle-container {
  xpadding-top: 10px; /* Adjust the padding value as needed */
}

.btn-circle {
  width: 40px;  /* Adjust the size as needed */
  height: 40px;
  padding: 0;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;  /* Vertically center the text */
  font-size: 22px;     /* Adjust the font size as needed */
}


/*  ====================================================================================================  */
/*  ===  START - HOVER - Circular Button with Hover attributes    [ TITLE-LEVEL Add Buttons ]             */
/*  ====================================================================================================  */

/* Circle Container and Button Styling */
.hover-container .circle-background {
  padding-top: 10px; /* Adjust the padding value as needed */
  color: rgb(200, 200, 200); /* Make the icon light grey initially */
  /*visibility: hidden; /* Hide the icon initially */
  transition: visibility 0.2s; /* Smooth transition for visibility */
}

/* Show the circle-background when hovering over the main container */
.hover-container:hover .circle-background {
  color: rgb(200, 200, 200); /* Make the icon light grey initially */
  visibility: visible; /* Make the circle container visible */
}

.hover-container .btn-circle {
  width: 35px;  /* Adjust the size as needed */
  height: 35px;
  padding: 0;
  border-radius: 50%;
  text-align: center;
  line-height: 35px;  /* Vertically center the text */
  font-size: 18px;     /* Adjust the font size as needed */
  color: #007bff; /* Change text color on hover */
  background-color: white; /* Optional: background color */
  visibility: hidden; /* Initially hide the button */
  transition: color 0.2s, background-color 0.2s, visibility 0.2s; /* Smooth transition for background color and visibility */
}

/* Show the button circle when hovering over the container */
.hover-container:hover .btn-circle {
  visibility: visible; /* Make the button circle visible */
}

/* Change button color on hover */
.hover-container .btn-circle:hover {
  font-size: 18px;     /* Adjust the font size as needed */
  background-color: #f0f0f0; /* Change background to blue on hover */
  color: #007bff; /* Change text color on hover */
  transition: background-color 0.3s; /* Smooth transition for color and visibility */
}







.fixed-width {
  white-space: nowrap;
}

.variable-width {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  /* Optional: Limit to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.table-container {
  overflow-x: auto;
  width: 100%;
}



/*  ====================================================================================================  */
/*  ===  START - Subtasks and Actions Panels */
/*  ====================================================================================================  */
.collapse:not(.show) {
  display: none;
}

.w-50 {
  width: 50%;
}

@media (min-width: 768px) {
  .w-50 {
      flex: 1 1 0;
  }
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.me-md-2 {
  margin-right: .5rem !important;
}

.ms-md-2 {
  margin-left: .5rem !important;
}
/* END - Subtasks and Actions Panels */

.expanded {
  height: auto; /* Ensure this expands the panel as needed */
}






/*  ====================================================================================================  */
/*  ===  START - CONTAINER                                                                                */
/*  ====================================================================================================  */


.xcontainer-fluid.flex-grow-1 {
  height: 100%; /* Ensure this container takes full height */
  align-items: stretch; /* Make sure children stretch to full height */
  padding: 0; /* Ensure no padding is applied here */
}
.xxxcontainer-fluid.flex-grow-1 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Remove extra space causing the white space issue */
.container-fluid.flex-grow-1 {
  display: flex;
  flex-direction: row;
  align-items: stretch; /* Makes sure both panels are stretched without excess space */
  margin: 0;
  height: auto;
}

.xrow.flex-grow-1 {
  flex-grow: 1;
  margin: 0; /* Ensure row takes full width without extra space */
}
.row.flex-grow-1 {
  flex-grow: 1;
  display: flex;
  height: auto;
}

.xleft-panel {
  -min-height: 100vh;  /* Full height to match the sidebar */
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1); /* Light grey shadow on the right edge */
  background-color: #fff; /* Ensure the panel has a background color */
  width: 450px; /* Fixed width */
  max-width: 450px;
  flex-shrink: 0; /* Prevent shrinking */
}
.xxxleft-panel {
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1); /* Shadow on the right */
  height: 100vh; /* Ensure the height spans the viewport */
  overflow-y: auto; /* Enable scrolling if needed */
}
/* Left panel */
.left-panel {
  width: 300px; /* Set fixed width */
  height: auto;
  height: 100vh; /* Make sure the left panel fills the viewport height */
  xmax-height: 100vh; /* Ensure it doesn’t overflow vertically */
  overflow-y: auto; /* Enable vertical scrolling if needed */
  background-color: #fff;
  xbox-shadow: 3px 0 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  border-right: 1px solid #dee2e6; /* Add a border to the right edge if desired */
  flex-shrink: 0; /* Prevent the left panel from shrinking */
  position: sticky; /* Ensures the panel stays fixed as you scroll */
  top: 0;
  display: flex;
  flex-direction: column; /* Allows content inside to be flexible */
}
.zzzleft-panel {
  border-right: 1px solid #dee2e6; /* Add a border to the right edge if desired */
  flex-shrink: 0; /* Prevent the left panel from shrinking */
}

/* Width adjustment for md screens */
@media (min-width: 768px) and (max-width: 991.98px) { /* md breakpoint */
  .left-panel {
    width: 300px; /* Smaller width on md screens */
  }
}
/* Width adjustment for lg screens */
@media (min-width: 992px) and (max-width: 1199.98px) { /* lg breakpoint */
  .left-panel {
    width: 300px; /* Smaller width on lg screens */
  }
}
/* Optional: Revert to original width on xl screens */
@media (min-width: 1200px) { /* xl breakpoint */
  .left-panel {
    width: 450px; /* Back to 450px on xl screens */
  }
}

/* Right panel takes the remaining space */
.right-panel {
  flex-grow: 1; /* Take up the remaining width */
  height: auto;
  overflow-y: auto; /* Scroll independently of the left panel */
  padding: 20px; /* Add padding for visual spacing */
  background-color: #f9f9f9;
}

.left-panel, .right-panel {
  min-height: 100vh; /* Ensures they stretch to full height */
}

.container-fluid {
  xxxpadding: 0;
}

.col-md-8 {
  height: 100%; /* Ensure the right content panel takes full height */
  overflow-y: auto; /* Ensure content can scroll if necessary */
}

.col {
  flex: 1; /* Ensure it grows to fill remaining space */
  height: 100%;
  overflow-y: auto;
  padding-left: 30px; /* Adjust this padding as needed */
}

.scrollable-area {
  flex-grow: 1;  /* Ensures the scrollable area takes up remaining height */
  overflow-y: auto;  /* Allows vertical scrolling */
  padding: 10px;  /* Optional padding */
  background-color: #f9f9f9;  /* Optional background for clarity */
}





/* === QUESTION PANE — MOBILE SPACING === */
@media (max-width: 767.98px) {
  #workloadQuestionsPaneContent > div,
  #taskQuestionsPaneContent > div {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  #workloadQuestionsPaneContent .modal-body,
  #taskQuestionsPaneContent .modal-body {
    padding: 0.5rem !important;
  }
  #workloadQuestionsPaneContent .mb-2,
  #taskQuestionsPaneContent .mb-2 {
    margin-bottom: 0.35rem !important;
  }
  #workloadQuestionsPaneContent .form-label,
  #taskQuestionsPaneContent .form-label {
    margin-bottom: 0.15rem !important;
  }
  #workloadQuestionsPaneContent .form-control-sm,
  #taskQuestionsPaneContent .form-control-sm,
  #workloadQuestionsPaneContent .form-select-sm,
  #taskQuestionsPaneContent .form-select-sm {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
  }
  #workloadQuestionsPaneContent textarea.form-control-sm,
  #taskQuestionsPaneContent textarea.form-control-sm {
    padding: 0.25rem 0.4rem;
  }
}

@media (max-width: 767.98px) {
  #workloadTicketsPaneContent > div,
  #taskTicketsPaneContent > div {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  #workloadTicketsPaneContent .modal-body,
  #taskTicketsPaneContent .modal-body {
    padding: 0.5rem !important;
  }
  #workloadTicketsPaneContent .mb-2,
  #taskTicketsPaneContent .mb-2 {
    margin-bottom: 0.35rem !important;
  }
  #workloadTicketsPaneContent .form-label,
  #taskTicketsPaneContent .form-label {
    margin-bottom: 0.15rem !important;
  }
  #workloadTicketsPaneContent .form-control-sm,
  #taskTicketsPaneContent .form-control-sm,
  #workloadTicketsPaneContent .form-select-sm,
  #taskTicketsPaneContent .form-select-sm {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
  }
  #workloadTicketsPaneContent textarea.form-control-sm,
  #taskTicketsPaneContent textarea.form-control-sm {
    padding: 0.25rem 0.4rem;
  }
}

/* Comment view offcanvas — no backdrop, soft left-edge shadow instead */
#viewCommentModal,
#commentDetailOffcanvas {
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.18);
}


/* Prevent scroll chaining — when an offcanvas reaches the end of its
   scrollable content, stop the scroll from propagating to the page behind it. */
.offcanvas-body {
  overscroll-behavior: contain;
}

/* Offcanvas panel body padding.
   Dedicated class — do NOT replace with Bootstrap utilities or inline styles.
   Applied to the offcanvas-body wrapper injected by openMain() in view-project.html.
   Desktop: generous all-around padding. Mobile bottom-sheet: compact to save space. */
.vp-oc-body {
  padding: 1.5rem 1.75rem;
}
.mobile-bottom-sheet-oc .vp-oc-body {
  padding: 0.875rem 1.125rem;
}