.nav-tabs > li.active  a{
  box-shadow: 0px 1px 4px #05426C !important;
  background-color: #002f4d !important;
}

.select-container {
  margin: 15px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#language-select,
#porto-selection,
.form-select {
  padding: 8px 35px 8px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  min-width: 150px;
}

#language-select:focus,
#porto-selection:focus,
.form-select:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#language-select option,
#porto-selection option,
.form-select option {
  padding: 8px;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .btn {
  padding: 15px 30px; /* Increase padding for larger buttons */
  font-size: 18px; /* Increase font size */
  background-color: #007bff; /* Add background color */
  color: white !important; /* Ensure text color is white and visible */
  border: none; /* Remove border */
  border-radius: 4px; /* Add border radius */
  cursor: pointer; /* Change cursor to pointer */
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .btn:hover {
  background-color: #0056b3; /* Darken background color on hover */
  color: white !important; /* Ensure text color remains white on hover */
}


/* Custom responsive text alignment for Bootstrap 3 */
@media (max-width: 767px) {
  /* Previous styles for text centering */
  .text-center-xs {
    text-align: center !important;
  }

  /* Adjust button margins for better spacing when centered */
  .text-center-xs .btn {
    margin: 5px !important;
  }

  /* Remove the left margin on the second button since both are stacked centered */
  .text-center-xs .btn-success {
    margin-left: 0 !important;
  }

  /* Improved language selector centering for small screens */
  .select-container.pull-right {
    float: none !important;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* Make the language dropdown itself centered */
  #language-select {
    margin: 0 auto;
    min-width: 150px;
  }

  /* Ensure the row containing tabs and language selector has proper spacing */
  .nav-tabs + .select-container {
    margin-top: 15px;
  }
}
/* New styles for full-width nav tabs */
.nav-tabs {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.nav-tabs > li {
  float: none;
  display: table-cell;
  width: 50%; /* Each tab takes exactly half the width since you have 2 */
  text-align: center;
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  margin-right: 0;
  border-radius: 0;
  white-space: normal; /* Allow text to wrap if needed */
  display: block;
  padding: 10px 5px; /* Adjust padding for better mobile display */
}

/* Navigation tab hover effects - prevent color change but add growth */
.nav-tabs > li > a {
  transition: transform 0.2s ease;
  color: #05426c;
}

/* Remove background color change on hover */
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #05426c !important;
}

/* Maintain active tab styles */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  box-shadow: 0px 1px 4px #05426C !important;
  background-color: #05426c !important;
  color: white !important;
}

/* Ensure consistent border behavior */
.nav-tabs > li:not(.active) > a:hover {
  border-bottom-color: transparent !important;
}

/* Add these rules to your accredito.css file */

/* Base form styling with minimum width */
#form-richiesta-credenziali-ditta,
#form-richiesta-credenziali-utenti {
  min-width: 300px; /* Minimum width for form content */
  width: 100%;
  box-sizing: border-box;
}

/* Add scrolling container for very small screens */
@media only screen and (max-width: 340px) {
  .container {
    width: 100% !important; /* Override any fixed width */
    padding-left: 5px;
    padding-right: 5px;
    overflow-x: auto;
  }

  .row {
    margin-left: -5px;
    margin-right: -5px;
  }

  /* Reduce padding on form fields */
  .form-group {
    margin-bottom: 8px;
  }

  /* Scale inputs and labels */
  input.form-control,
  select.form-control,
  .form-group label {
    font-size: 12px;
    padding: 6px 8px;
  }

  /* Scale fieldset legend */
  .fieldset legend {
    font-size: 14px;
    padding: 0 8px;
  }

  /* Improve column layouts on tiny screens */
  .col-lg-4, .col-lg-6, .col-lg-12 {
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* Adjust container width for better responsiveness across devices */
@media (max-width: 767px) {
  .container[style*="width:80vw"] {
    width: 95vw !important;
  }

  /* Make selectors stack in separate rows on small screens */
  .select-container.pull-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .select-container.pull-right label {
    margin-left: 0 !important;
    margin-bottom: 5px;
  }

  .select-container.pull-right .manual-button {
    margin-left: 0 !important;
  }
}

/* Fix for sync button tooltip constrained by col-lg-1 */
#sync-info-button + .tooltip {
  width: auto !important;
  max-width: 350px !important;
  white-space: normal;
  word-wrap: break-word;
  position: absolute;
  z-index: 9999;
}

#sync-info-button + .tooltip .tooltip-inner {
  max-width: 350px;
  width: 350px; /* Fixed width for consistency */
  text-align: left;
  padding: 10px 15px;
  font-size: 13px;
  line-height: 1.4;
}

/* Fix tooltip arrow position and color for left placement on larger screens */
@media (min-width: 768px) {
  #sync-info-button + .tooltip {
    right: 100% !important;
    left: auto !important;
    margin-right: 10px;
  }

  #sync-info-button + .tooltip .tooltip-arrow {
    right: -7px !important;
    left: auto !important;
    border-right-width: 0;
    margin-top: -7px;
    top: 50% !important;
  }
}

/* Position tooltip on top for smaller screens when button is centered */
@media (max-width: 767px) {
  #sync-info-button + .tooltip {
    top: auto !important;
    bottom: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin-bottom: 10px;
  }

  #sync-info-button + .tooltip .tooltip-arrow {
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -7px;
    border-bottom-width: 0;
  }
}

/* Make sure tooltip sits at proper position regardless of parent column width */
.del-button-to-add .tooltip {
  position: absolute !important;
  z-index: 9999;
}

/* Error highlight animation for scroll-to-error function */
@keyframes errorHighlight {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(220, 53, 69, 0.2); /* Light red background */
  }
}

@keyframes inputErrorHighlight {
  0%, 100% {
    border-color: #ced4da;
    box-shadow: none;
  }
  50% {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  }
}

.error-highlight {
  animation: errorHighlight 1.5s ease;
  border-radius: 4px;
}

.input-error-highlight {
  animation: inputErrorHighlight 1.5s ease;
}

/* Make error messages more visible - without vertical red line */
.field-error, .role-error, .users-error {
  font-weight: bold;
  padding: 5px;
  /* Removed border-left: 3px solid #dc3545; */
  margin-top: 5px;
}

/* Button hover and active states */
/* Standard buttons - add hover effects */
.btn {
  transition: all 0.2s ease-in-out;
}

/* Success buttons (green) */
.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-success:active,
.btn-success:focus {
  background-color: #1e7e34;
  border-color: #1c7430;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5) !important;
}

/* Link buttons */
.btn-link:hover {
  text-decoration: underline;
  color: #0056b3;
}

.btn-link:active,
.btn-link:focus {
  text-decoration: underline;
  color: #004085;
  box-shadow: none !important;
}


/* Remove button styling */
.rimuovi-utente:hover {
  background-color: #820511;
  border-color: #721c24;
}



/* Center only the text within legend elements */
legend.centered {
  min-width: auto !important;

}

/* Small screen adjustments for legends */
@media (max-width: 767px) {
  legend.fieldset.centered {
    font-size: 16px;
  }
}

/* Manual button hover effects */
#manual-button-accredito {
  transition: all 0.3s ease;
  border-radius: 4px;
  padding: 2px;
}

#manual-button-accredito:hover {
  transform: scale(1.3);
}

#manual-button-accredito:active {
  transform: scale(0.95);
  transition: all 0.1s ease;
}

#manual-button-accredito img {
  transition: all 0.3s ease;
}

#manual-button-accredito:hover img {
  filter: brightness(1.2) contrast(1.1);
}
/* Language-specific visibility for popover content */
body:not(.lang-en) .popover .lang-en,
body.lang-en .popover .lang-it {
    display: none !important;
}

body.lang-en .popover .lang-en,
body:not(.lang-en) .popover .lang-it {
    display: inline !important;
}