/* 
    Base: hide scrollbar 
    How to use it:

    <div class="hover-scroll" style="height: 100vh;">
        ... full site content ...
    </div>
*/




/* For table cells that should truncate text with tooltip on hover */
.td-truncate {
  max-width: 150px;          /* Adjust this width to your needs (e.g., 180px, 250px, 300px) */
  white-space: nowrap;       /* Prevents text wrapping */
  overflow: hidden;          /* Hides overflowing text */
  text-overflow: ellipsis;   /* Shows ... when text is too long */
  position: relative;        /* Optional: for better positioning if needed */
}

/* Optional: Make tooltip look nicer (works with native title attribute) */
.td-truncate:hover {
  cursor: pointer;           /* Shows it's interactive */
}

/* Optional: Add a bottom border on hover for better UX */
.td-truncate:hover::after {
  content: attr(title);      /* Use the title attribute as content */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: normal;
  max-width: 300px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.td-truncate:hover::after {
  opacity: 1;
}


.popover {
    max-width: 320px;
}

.popover-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.875rem;
    line-height: 1.5;
}



.hover-scroll {
    overflow-y: auto;        /* or overflow-x if needed */
    scrollbar-width: none;   /* Firefox */
}

/* Chrome, Edge, Safari */
.hover-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* On hover: show scrollbar */
.hover-scroll:hover {
    scrollbar-width: thin;     /* Firefox */
}

/* Chrome/Edge/Safari on hover */
.hover-scroll:hover::-webkit-scrollbar {
    width: 8px;                /* set your visible scrollbar width */
}

/* Optional: scrollbar styling */
.hover-scroll::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 10px;
}

.hover-scroll:hover::-webkit-scrollbar-thumb {
    background: #909090;       /* visible when hovered */
}

/* Target any input or select element that has the 'required' attribute */
label.required::after,
.label-required::after {
    content: " *";
    color: red;
    font-weight: bold;
}

.required::after {
    content: " *";
    color: #ff0000;
    font-weight: bold;
}

.img-preview, .profile-preview {
    max-height: 140px;
    margin-top: 10px;
    border: 3px solid #e9ecef;
    object-fit: cover;
}


.form-check-input:checked {
    background-color: #667eea;
    border-color: #667eea;
}

a {
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
}

a:hover {
    text-decoration: none !important;
    font-weight: 800 !important;
}

a:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important; /* blue-500 with opacity */
}


.table tbody td{
    padding: .5rem 1rem !important;
}

input[type=checkbox] {
    cursor: pointer !important;
}
/* select2 */
.select2-container .select2-selection--single{
    height: 35px !important;
}
.select2-container .select2-selection--single{
    height: 35px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 35px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 35px !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear{
    height: 35px !important;
}
.select2-container .select2-selection--multiple{
    height: 40px !important;
}
/* select2  */