/* public/css/styles.css */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}
.sidebar-heading {
    font-weight: bold;
    color: #007bff;
    text-transform: uppercase;
    margin: 10px 0;
}

.sidebar .nav-item + .nav-item {
    margin-top: 10px;
}
.select2 {
    width: 100% !important;
}

.collapse {
    transition: height 0.3s ease;
}

.toggle-link i {
    transition: transform 0.3s ease;
}

.toggle-link.collapsed i {
    transform: rotate(-180deg);
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    /* max-width: 100%; */
    overflow-y: auto;
    overflow-x: auto;
}
.table-responsive {
    overflow-y: auto;  /* Enable vertical scrolling */
    overflow-x: auto;  /* Enable horizontal scrolling */
    border: 1px solid #ddd; /* Optional border */
}

.collapse.show {
    z-index: 1000;
}

    /* Default nav-link style */
.nav-link {
    color: #333; /* Dark color for visibility */
}

/* Styling for hover effect */
.nav-link:hover {
    color: #0056b3; /* Change to blue when hovered */
    background-color: #e7f1ff; /* Add hover background */
}

/* Ensure nav-link remains visible when inside a collapsed section */
.collapse.show .nav-link {
    color: #333; /* Text color when expanded */
    visibility: visible; /* Ensure visibility when expanded */
}

/* Ensure links are hidden when collapsed */
.collapse:not(.show) .nav-link {
    visibility: hidden; /* Hide the links when collapsed */
}

/* Optional: Style the collapsed section's heading */
.sidebar-heading {
    font-size: 1.1rem;
    font-weight: bold;
}

/* Optional: Optional styling when section is expanded */
.collapse.show .sidebar-heading {
    color: #007bff; /* Color when expanded */
}

/* Add some padding or spacing for expanded sections */
.collapse.show {
    padding-left: 20px; /* Adds some left padding when expanded */
}
.nav-link.active {
    background-color: #f0f0f0; /* Example: Change background color */
    color: #007bff; /* Example: Change text color */
}
.message {
  padding: 10px 15px;
  border-radius: 12px;
  margin-bottom: 8px;
  max-width: 75%;
  word-wrap: break-word;
  position: relative;
  transition: background-color 0.3s ease;
}

/* Unread messages: highlighted background + bold + left border + blue dot */
.message.unread {
  background-color: #eeeeee; /* soft light blue */
  font-weight: 600;
  border-left: 4px solid #339af0; /* blue accent */
  color: #212529;
}

.message.unread::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #eeeeee; /* blue dot */
  border-radius: 50%;
}

/* Read messages: subtle background + normal weight */
.message.read {
  background-color: #f8f9fa; /* light gray */
  font-weight: 400;
  color: #495057;
  border-left: 4px solid transparent;
}

.message.read::before {
  display: none;
}
.group-item.active {
    background-color: #0d6efd;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
}
.list-group-item.group-item.active {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}
.select2-container--default .select2-results__options {
    max-height: 250px;
    overflow-y: auto;
}
/* Scrollable dropdown */
.select2-container--open .select2-dropdown--below {
    max-height: 300px; /* or whatever fits modal */
    overflow-y: auto;
}

/* Optional: make results list scrollable */
.select2-results__options {
    max-height: 250px;
    overflow-y: auto;
}
.chat-img {
    max-width: 200px;
    height: auto;
    display: block;
    margin: 5px 0;
}
.unread-badge {
    font-size: 0.75rem;
    margin-left: 5px;
}