.gallery-view.deal-view {
  padding: 24px 0;
}

h6.dealidname {
  margin-top: 22px;
  text-align: center;
}

.single-info {
  position: relative;
}

.single-image {
  position: sticky;
  top: 90px;
}

.single-image img {
  width: 100%;
  transition: 0.4s;
}

.single-image.detail-single img {
  padding: 4px;
  border: 1px solid #ddd;
}

.specifications {
  line-height: 1.5;
}

.single-image:hover img {
  transform: scale(1.1) rotate(7ded);
}

/* 
.single-pagination {
  border-bottom: 1px solid #ddd;
  margin-bottom: 7px;
}

.single-pagination ul li {
  display: inline-block;
} */

.deal-view .thumbCarousel {
  padding: 0px;
  border: 1px solid #ddd;
}

.deal-view .single-image .lightSlider img {
  padding: 5px;
  background: #fff;
}

.deal-view .csPager li {
  padding: 5px;
  border: 1px solid #ddd;
  border-bottom: 0;
}

.deal-view .csPager li.active {
  border: 1px solid #777;
}

.deal-view .product-actions .attach svg {
  background: transparent;
  padding: 0px;
  width: auto;
  height: auto;
  border-radius: 2px;
  margin-left: 0;
}

.single-pagination ul li a {
  text-decoration: none;
  color: #000;
  font-size: 13px;
  font-weight: 400;
  display: block;
  padding: 0px 0;
  padding-bottom: 7px;
  margin-right: 31px;
  position: relative;
}

.single-pagination ul li a::before {
  content: ">";
  position: absolute;
  right: -1.3rem;
  font-size: 1.2rem;
  top: -0.3rem;
  color: #333;
  font-weight: 300;
}

.single-pagination ul li:last-child a::before {
  content: "";
}

.single-info .actions {
  position: absolute;
  right: 0;
}

.extra-info .field-value {
  font-size: 0.9rem;
  font-weight: 400;
  color: #222;
  max-width: 225px;
}

.extra-info .field-name {
  font-size: 0.9rem;
  color: #000;
  width: 175px;
  font-weight: 500;
}

.field-devider {
  min-width: 51px;
}

.detail-info {
  position: sticky;
  top: 90px;
}

.status-info {
  background: #fafafa;
  padding: 8px;
  margin-bottom: 18px;
  overflow: hidden;
}

.status-info p {
  display: flex;
}

.status-info p svg {
  align-self: center;
}

.status-info .product-connect {
  padding: 15px 0px;
  width: 100%;
  font-size: 14px;
}

.status-info .product-connect span::before {
  left: 30px;
}

.status-info span svg {
  background: transparent;
  position: relative;
  left: -15px;
}



.status-info p {
  display: flex;
  font-size: 13px;
  color: #555;
}

.status-info p a {
  display: contents;
}

.applybtn {
  width: 100%;
  border: none;
  background: #0d9d00;
  color: #fff;
  height: 51px;
  border-radius: 5px;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.stick-info {
  position: sticky;
  top: 90px;
}

/* 
.inactive-thumbnail img {
  width: 40px !important;
}

.active-thumbnail img {
  width: 40px !important;
}

.thumbnail_slides .slick-slide {
  border: 1px solid transparent;
  overflow: hidden;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
}

.thumbnail_slides .slick-current.slick-slide {
  border: 1px solid #0c3963;
  cursor: default;
}

.slick-slide img {
  display: block;
  margin: auto;
  border-radius: 9px;
  padding: 5px;
  background: #fff;
}

.slick-slide .lightbox_slider img {
  max-height: 75vh;
}

.slick-slide .lightbox_slider video {
  max-height: 75vh;
}


.thumbnail_slides .slick-slide img {
  border: none;
  border-radius: 4px;
  padding: 0px;
  width: 100%;
  min-height: 54px;
  height: 100%;
  min-height: 30px;
  max-width: 35px;
} */
.add-banner {
  background: #f2f2f2;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 2px;
}

.add-banner p {
  color: #ccc;
  font-size: 16px;
}

.galleries-filter {
  padding: 24px 0px;
  /* border-bottom: 1px solid #ccc; */
}

button.send_invitation_btn.outer-deal {
  margin-left: 157%;
}

.filter-buttons button {
  background: #fff;
  border: 1px solid #ccc;
  font-size: 15px;
  color: #666;
  letter-spacing: 0.5px;
  width: 130px;
  height: 43px;
  border-radius: 4px;
  margin-right: 2px;
}

.filter-buttons button:first-child {
  background: #efefef;
  color: #333;
}

.filter-buttons button svg {
  margin-left: 18px;
  vertical-align: middle;
}

.filter-buttons button:first-child svg {
  vertical-align: sub;
}

.galleries-sort select {
  outline: none;
  border: 1px solid #ccc;
  height: 45px;
  padding: 0 12px;
  padding-right: 24px;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: #444;
  border-radius: 4px;
}

.all-galleries {
  margin-top: 24px;
}

.upgrade {
  background-image: linear-gradient(#ffffff94, white, white);
  top: 0;
  z-index: 99;
}

.upgradeBtn {
  border-radius: 50px;
  height: 48px;
  position: absolute;
  top: 50%;
}

.referDeal {
  position: absolute;
  background: #fff;
  padding: 1.1rem;
  padding-bottom: 0.7rem;
  padding-top: 0.5rem;
  box-shadow: 0px 0px 9px #00000045;
  right: -15px;
  top: 42px;
  border-radius: 0.3rem;
}

.referDeal p {
  text-align: center;
  font-size: 12px !important;
  margin-bottom: 5px !important;
}

.shareIcons>div {
  margin: 0 2px;
}

.shareIcons>div img {
  transform: scale(1);
  transition: 0.3s;
}

.shareIcons>div img:hover {
  cursor: pointer;
  transform: scale(0.9);
}

.referDeal::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 18px solid #fff;
  position: absolute;
  top: -13px;
  right: 23px;
}

.icon-with-tooltip .tooltip-text {
  display: none;
}

.icon-with-tooltip:hover .tooltip-text {
  display: block;
}

.icon-with-tooltip .tooltip-text::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid #ddd;
  top: 20px;
  right: 12px;
}

.not-visited::before {
  content: "";
  width: 2px;
  height: 40px;
  background: black;
  transform: rotate(37deg);
  position: absolute;
  top: 0px;
  left: 19px;
}

.thumbnail_slides .slick-track {
  display: flex;
  justify-content: center;
}

/* .thumbnail_slides {
  margin-top: 5px;
} */

.thumbnail_slides .slick-slide {
  max-width: 60px;
  margin: 0 4px;
  max-height: 60px;
}

.lightbox_slider {
  width: 100%;
  display: inline-block;
  /* height: 55vh; */
}

.thumbnail_slides .slick-active {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px;
  background-color: #fff;
  height: 45px;
  width: 45px;
  cursor: pointer;
}

.thumbnail_slides .slick-active img {
  height: 100%;
  min-height: 30px;
  max-width: 35px;
}

.thumbnail_slides .slick-active.slick-current {
  border: 1px solid #1262ab;
  cursor: default;
}

.single-info-sticky .slick-list {
  height: 250px;
}

.single-info-sticky.notLogg .slick-list {
  height: 265px;
}

.single-info-sticky .thumbnail_slides .slick-list {
  height: 45px;
  max-width: 75%;
  margin: auto;
}

/* .fullWidth .slick-slide {
  max-height: 400px;
} */
/* Compact Upload Modal Styles */
/* .my-content-upload-wrapper {
  max-height: 80vh;
  overflow-y: auto;
  padding: 16px;
  font-family: "Manrope", sans-serif !important;
  min-width: 500px !important;
  width: 100% !important;
} */

/* Compact spacing */
/* .my-content-upload-wrapper .text-center {
  margin-bottom: 12px;
} */

.my-content-upload-wrapper h5 {
  font-family: "Manrope", sans-serif !important;
  margin-bottom: 4px;
  font-size: 18px !important;
}

.my-content-upload-wrapper p {
  font-family: "Manrope", sans-serif !important;
  margin-bottom: 12px;
  font-size: 13px !important;
}

/* Tab spacing */
.my-content-upload-wrapper .d-flex.gap-2 {
  margin-bottom: 16px;
}

/* Form styling with application colors */
.my-content-upload-wrapper .form-select {
  border-radius: 6px !important;
  border: 1px solid #dee2e6 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-family: "Manrope", sans-serif !important;
  margin-bottom: 12px !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.my-content-upload-wrapper .form-select:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Simplified Radio Button Styling - Complete Reset */
.my-content-upload-wrapper .privacy-section {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin: 12px 0 !important;
  padding: 0 !important;
}

.my-content-upload-wrapper .privacy-section .privacy-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: "Manrope", sans-serif !important;
  /* color: #333 !important; */
  margin: 0 !important;
  padding: 0 !important;
}

.my-content-upload-wrapper .privacy-section .radio-group {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.my-content-upload-wrapper .privacy-section .radio-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.my-content-upload-wrapper .privacy-section .radio-item input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #0d6efd !important;
  cursor: pointer !important;
}

.my-content-upload-wrapper .privacy-section .radio-item label {
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: "Manrope", sans-serif !important;
  color: #333 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
}

/* Compact spacing improvements */
.my-content-upload-wrapper .row {
  margin-bottom: 0 !important;
}

.my-content-upload-wrapper .row+.row {
  margin-top: 12px !important;
}

/* Compact alert styling */
.my-content-upload-wrapper .alert {
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}

/* Compact button styling */
.my-content-upload-wrapper .btn {
  font-size: 14px !important;
  padding: 8px 16px !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 500 !important;
  margin: 2px !important;
}

.my-content-upload-wrapper .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

.my-content-upload-wrapper .btn-primary:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
}

.my-content-upload-wrapper .btn-outline-secondary {
  color: #6c757d !important;
  border-color: #6c757d !important;
}

.my-content-upload-wrapper .btn-outline-secondary:hover {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

/* Compact file drop zone spacing */
.my-content-upload-wrapper .position-relative {
  margin: 8px 0 8px 0 !important;
}

/* Thumbnail container improvements */
/* .my-content-upload-wrapper .d-flex.flex-wrap.gap-2 {
  max-height: 150px !important;
  overflow-y: auto !important;
  padding: 8px !important;
  gap: 8px !important;
} */

/* Ensure thumbnails fit properly without overflow */
.my-content-upload-wrapper .position-relative.rounded {
  flex-shrink: 0 !important;
}

/* Compact form labels */
.my-content-upload-wrapper .form-label {
  font-family: "Manrope", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
  margin-top: 8px !important;
}

/* Compact bottom button area */
.my-content-upload-wrapper .d-flex.gap-2:last-child {
  /* margin-top: 16px !important; */
  padding-top: 12px !important;
  /* border-top: 1px solid #dee2e6 !important; */
}

/* Upload Progress Styling */
.my-content-upload-wrapper .upload-progress-section {
  background-color: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 12px 0 !important;
}

.my-content-upload-wrapper .upload-progress-section .progress {
  background-color: #e9ecef !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.my-content-upload-wrapper .upload-progress-section .progress-bar {
  background-color: #0d6efd !important;
  transition: width 0.3s ease-in-out !important;
}

.my-content-upload-wrapper .upload-progress-section .spinner-border-sm {
  width: 1rem !important;
  height: 1rem !important;
  border-width: 0.125em !important;
}

.my-content-upload-wrapper .upload-progress-section .fw-medium {
  font-weight: 500 !important;
  font-family: "Manrope", sans-serif !important;
}
/**
 * Sendbird UIKit Theme Overrides
 * Customizes Sendbird components to match ESaaS design system
 *
 * Colors:
 * - Primary: #1262ab
 * - Primary Dark: #0c3963
 * - Border: #e0e0e0
 * - Background: #f5f5f5
 *
 * Typography:
 * - Font: Manrope, sans-serif
 * - Body: 14px
 */

/* ========================================
   Global Font Override
   ======================================== */
.sendbird-theme--light,
.sendbird-app__wrap,
[class^="sendbird-"],
[class*=" sendbird-"] {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ========================================
   Primary Color Overrides
   ======================================== */
:root {
  --sendbird-light-primary-500: #1262ab;
  --sendbird-light-primary-400: #1976d2;
  --sendbird-light-primary-300: #1262ab;
  /* Explicitly set text colors to ensure caret visibility */
  --sendbird-light-onlight-01: #212121;
  --sendbird-light-onlight-02: #424242;
  --sendbird-light-onlight-03: #616161;
  --sendbird-message-input-text-color: #212121;
}

/* Override CSS variables within Sendbird theme context */
.sendbird-theme--light {
  --sendbird-light-primary-300: #1262ab;
  --sendbird-light-onlight-01: #212121;
}

/* Direct override for message input textarea with highest specificity */
.sendbird-theme--light .sendbird-message-input .sendbird-message-input--textarea {
  caret-color: #1262ab !important;
  color: #212121 !important;
}

/* Target the exact contenteditable div element by ID and class */
#sendbird-message-input-text-field,
div.sendbird-message-input--textarea.sendbird-message-input-text-field,
div[contenteditable="true"].sendbird-message-input--textarea {
  caret-color: #000000 !important;
  color: #212121 !important;
  -webkit-text-fill-color: #212121 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Add a pseudo-element to ensure cursor has space in empty contenteditable */
#sendbird-message-input-text-field:empty::before,
div.sendbird-message-input--textarea:empty::before {
  content: '\200B'; /* Zero-width space */
  display: inline;
}

/* Ensure contenteditable divs show cursor */
.sendbird-message-input div[contenteditable="true"] {
  caret-color: #000000 !important;
}

/* Move placeholder behind the input so cursor is visible when empty */
.sendbird-message-input--placeholder {
  pointer-events: none !important;
}

/* Ensure send and attach buttons are clickable above the input */
.sendbird-message-input--send,
.sendbird-message-input--attach {
  z-index: 10 !important;
}

/* ========================================
   Channel List Styling
   ======================================== */
.sendbird-channel-list {
  border-right: 1px solid #e0e0e0;
  background-color: #ffffff;
}

.sendbird-channel-list__header {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 16px;
}

.sendbird-channel-preview {
  border-bottom: 1px solid #f5f5f5;
  padding: 14px 20px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sendbird-channel-preview:hover {
  background-color: #f8f9fa;
}

.sendbird-channel-preview--active {
  background-color: rgba(18, 98, 171, 0.08);
  border-left: 3px solid #1262ab;
}

.sendbird-channel-preview__content__upper__header__channel-name {
  font-size: 14px;
  font-weight: 600;
  color: #212121;
  margin-bottom: 2px;
}

.sendbird-channel-preview__content__lower__last-message {
  font-size: 13px;
  color: #757575;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sendbird-channel-preview__content__upper__header__last-message-at {
  font-size: 11px;
  color: #9e9e9e;
}

/* ========================================
   Channel Header Styling
   ======================================== */
.sendbird-channel-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 16px 20px;
  min-height: 64px;
  display: flex;
  align-items: center;
}

.sendbird-channel-header__title {
  font-size: 16px;
  font-weight: 600;
  color: #212121;
}

.sendbird-channel-header__subtitle {
  font-size: 12px;
  color: #757575;
  margin-top: 2px;
}

/* Custom channel header actions */
.sendbird-channel-header__right-icon {
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.sendbird-channel-header__right-icon:hover {
  background-color: #f5f5f5;
}

/* ========================================
   Message List Styling
   ======================================== */
.sendbird-conversation {
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sendbird-conversation__messages {
  flex: 1;
  overflow: hidden;
}

.sendbird-conversation__messages-padding {
  padding: 16px 20px;
}

.sendbird-message-list {
  background-color: transparent;
}

/* No messages placeholder */
.sendbird-conversation__no-messages {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #9e9e9e;
  text-align: center;
  padding: 40px;
}

.sendbird-place-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
}

.sendbird-place-holder__body {
  font-size: 15px;
  color: #757575;
  margin-top: 12px;
}

.sendbird-place-holder__body__text {
  color: #9e9e9e;
}

/* ========================================
   Message Bubbles
   ======================================== */
/* Outgoing messages (sent by current user) */
.sendbird-message-content--outgoing .sendbird-text-message-item-body {
  background: linear-gradient(135deg, #1262ab 0%, #0f5293 100%);
  color: #ffffff;
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 2px 8px rgba(18, 98, 171, 0.2);
  padding: 12px 16px;
}

/* Incoming messages (received from others) */
.sendbird-message-content--incoming .sendbird-text-message-item-body {
  background-color: #ffffff;
  color: #212121;
  border-radius: 18px 18px 18px 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 12px 16px;
}

/* Message text styling */
.sendbird-text-message-item-body__message {
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
}

/* Message sender name */
.sendbird-message-content__middle__sender-name {
  font-size: 12px;
  font-weight: 600;
  color: #424242;
  margin-bottom: 6px;
}

/* Message timestamp */
.sendbird-message-content__middle__body-container__created-at {
  font-size: 11px;
  color: #9e9e9e;
  margin-top: 4px;
}

/* Message spacing */
.sendbird-message-content {
  margin-bottom: 4px;
}

/* ========================================
   Message Input Styling
   ======================================== */
.sendbird-message-input-wrapper {
  background-color: #ffffff;
  border-top: 1px solid #e8e8e8;
  padding: 16px 24px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.sendbird-message-input {
  background-color: #f8f9fa;
  border: 1.5px solid #e0e0e0;
  border-radius: 24px;
  padding: 6px 8px 6px 16px;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  transition: all 0.2s ease;
  min-height: 48px;
}

.sendbird-message-input:hover {
  border-color: #c0c0c0;
  background-color: #ffffff;
}

.sendbird-message-input:focus-within {
  border-color: #1262ab;
  box-shadow: 0 0 0 3px rgba(18, 98, 171, 0.12);
  background-color: #ffffff;
}

.sendbird-message-input-text-field {
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  font-size: 14px;
  padding: 10px 4px;
  min-height: 24px;
  line-height: 1.5;
  resize: none;
  flex: 1;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  caret-color: #1262ab !important;
  color: #212121 !important;
}

.sendbird-message-input-text-field:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  caret-color: #1262ab !important;
}

/* Ensure cursor is visible in all Sendbird input elements */
.sendbird-message-input textarea,
.sendbird-message-input input,
.sendbird-message-input [contenteditable="true"],
.sendbird-message-input__text-field,
.sendbird-message-input--textarea,
.sendbird-message-input .sendbird-message-input--textarea,
.sendbird-theme--light .sendbird-message-input .sendbird-message-input--textarea,
[class*="sendbird"] textarea,
[class*="sendbird"] input[type="text"],
[class*="sendbird"] [contenteditable="true"] {
  caret-color: #1262ab !important;
  color: #212121 !important;
}

/* Force cursor visibility with maximum specificity */
.sendbird-app__wrap .sendbird-conversation .sendbird-message-input-wrapper .sendbird-message-input .sendbird-message-input--textarea {
  caret-color: #000000 !important;
  color: #212121 !important;
}

/* Target the actual quill-like editor if used */
.sendbird-message-input .ql-editor,
.sendbird-message-input .ql-container,
.sendbird-message-input [class*="quill"] {
  caret-color: #000000 !important;
}

/* Universal fallback for any input within message area */
.sendbird-message-input * {
  caret-color: inherit;
}

.sendbird-message-input {
  caret-color: #000000;
}

/* Ensure no transparency on text that could hide caret */
.sendbird-message-input--textarea,
.sendbird-message-input-text-field {
  -webkit-text-fill-color: #212121 !important;
  opacity: 1 !important;
}

.sendbird-message-input-text-field::placeholder {
  color: #9e9e9e;
  font-size: 14px;
}

/* Hide placeholder only when text field is focused */
.sendbird-message-input-text-field:focus::placeholder {
  opacity: 0;
}

/* Hide Sendbird custom placeholder when input is focused */
.sendbird-message-input:focus-within .sendbird-message-input--placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Send button */
.sendbird-message-input--send {
  background-color: #1262ab !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(18, 98, 171, 0.25);
  cursor: pointer;
}

.sendbird-message-input--send:hover {
  background-color: #0c3963 !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(18, 98, 171, 0.35);
}

.sendbird-message-input--send:active {
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(18, 98, 171, 0.2);
}

.sendbird-message-input--send svg {
  width: 18px !important;
  height: 18px !important;
}

.sendbird-message-input--send svg path {
  fill: #ffffff !important;
}

/* Disabled send button */
.sendbird-message-input--send:disabled,
.sendbird-message-input--send[disabled] {
  background-color: #bdbdbd !important;
  box-shadow: none;
  cursor: not-allowed;
}

/* Attachment button */
.sendbird-message-input--attach {
  color: #757575;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
  background-color: transparent;
}

.sendbird-message-input--attach:hover {
  color: #1262ab;
  background-color: rgba(18, 98, 171, 0.08);
}

.sendbird-message-input--attach:active {
  background-color: rgba(18, 98, 171, 0.15);
}

/* ========================================
   Typing Indicator
   ======================================== */
.sendbird-typing-indicator__text {
  font-size: 12px;
  color: #616161;
  font-style: italic;
}

/* ========================================
   Avatar Styling
   ======================================== */
.sendbird-avatar {
  border-radius: 50%;
}

.sendbird-avatar-img {
  border-radius: 50%;
}

/* ========================================
   Badge (Unread Count)
   ======================================== */
.sendbird-badge {
  background-color: #f44336;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
}

/* ========================================
   Empty State
   ======================================== */
.sendbird-place-holder {
  font-size: 14px;
  color: #616161;
}

.sendbird-place-holder__body {
  color: #9e9e9e;
}

/* ========================================
   Scrollbar Styling
   ======================================== */
.sendbird-conversation__messages-padding::-webkit-scrollbar {
  width: 6px;
}

.sendbird-conversation__messages-padding::-webkit-scrollbar-track {
  background: transparent;
}

.sendbird-conversation__messages-padding::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}

.sendbird-conversation__messages-padding::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a0;
}

.sendbird-channel-list__body::-webkit-scrollbar {
  width: 6px;
}

.sendbird-channel-list__body::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}

/* ========================================
   File Message Styling
   ======================================== */
.sendbird-file-message-item-body {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
}

.sendbird-file-message-item-body__file-name {
  font-size: 14px;
  color: #1262ab;
}

/* ========================================
   Image/Thumbnail Message
   ======================================== */
.sendbird-thumbnail-message-item-body {
  border-radius: 8px;
  overflow: hidden;
}

.sendbird-thumbnail-message-item-body__thumbnail {
  border-radius: 8px;
}

/* ========================================
   Context Menu / Dropdown
   ======================================== */
.sendbird-dropdown__menu {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sendbird-dropdown__menu-item {
  font-size: 14px;
  padding: 8px 16px;
}

.sendbird-dropdown__menu-item:hover {
  background-color: #f5f5f5;
}

/* ========================================
   Modal Styling
   ======================================== */
.sendbird-modal__content {
  border-radius: 12px;
  background-color: #ffffff;
}

.sendbird-modal__header {
  font-size: 18px;
  font-weight: 600;
  color: #212121;
  border-bottom: 1px solid #e0e0e0;
}

.sendbird-modal__footer {
  border-top: 1px solid #e0e0e0;
}

/* ========================================
   Button Styling
   ======================================== */
.sendbird-button--primary {
  background-color: #1262ab;
  border-color: #1262ab;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
}

.sendbird-button--primary:hover {
  background-color: #0c3963;
  border-color: #0c3963;
}

.sendbird-button--secondary {
  background-color: transparent;
  border: 1px solid #e0e0e0;
  color: #616161;
  border-radius: 6px;
}

.sendbird-button--secondary:hover {
  background-color: #f5f5f5;
}

/* ========================================
   Date Separator
   ======================================== */
.sendbird-separator {
  margin: 16px 0;
}

.sendbird-separator__text {
  font-size: 12px;
  color: #9e9e9e;
  background-color: #f5f5f5;
  padding: 4px 12px;
  border-radius: 12px;
}

/* ========================================
   Loading States
   ======================================== */
.sendbird-loader {
  border-top-color: #1262ab;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 768px) {
  .sendbird-channel-list {
    width: 100% !important;
    border-right: none;
  }

  .sendbird-conversation {
    width: 100% !important;
  }

  .sendbird-channel-header {
    padding: 10px 12px;
  }

  .sendbird-message-input {
    padding: 8px 12px;
  }
}

/* ========================================
   Chat Widget Container (for embedded use)
   ======================================== */
.sendbird-chat-widget {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
}

.sendbird-chat-widget .sendbird-channel-list {
  flex-shrink: 0;
}

.sendbird-chat-widget .sendbird-conversation {
  flex-grow: 1;
}

/* Ensure message input stays below any overlay */
.sendbird-message-input-wrapper {
  z-index: 1 !important;
  position: relative !important;
}

/* Hide iframes in message content (prevents Google consent dialogs) */
.sendbird-message-content iframe,
.sendbird-og-message-item-body iframe,
.sendbird-thumbnail-message-item-body iframe,
.sendbird-message-list iframe,
.sendbird-conversation iframe {
  display: none !important;
}

/* Hide OG message web view that loads external content */
.sendbird-og-message-item-body__og-webview,
.sendbird-og-message-item-body__og-container,
[class*="og-webview"],
[class*="webview"] {
  display: none !important;
}

/* Ensure OG messages only show thumbnail, not embedded content */
.sendbird-og-message-item-body {
  max-height: 300px !important;
  overflow: hidden !important;
}

/* Hide Sendbird's default file viewer completely */
.sendbird-fileviewer,
[class*="sendbird-fileviewer"] {
  display: none !important;
}

/* Hide Sendbird modal popups (file viewer confirmation dialogs) */
#sendbird-modal-root,
.sendbird-modal-root,
.sendbird-modal,
.sendbird-modal__content,
.sendbird-modal__backdrop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ========================================
   File Viewer Modal - Close Button Styling
   ======================================== */
/* Ensure file viewer has proper z-index and is visible */
.sendbird-fileviewer {
  z-index: 10000 !important;
}

/* Style the file viewer header */
.sendbird-fileviewer__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Style the close button in file viewer */
.sendbird-fileviewer__header__right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.sendbird-fileviewer__header__right__actions__close,
.sendbird-fileviewer__header-right__close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.sendbird-fileviewer__header__right__actions__close:hover,
.sendbird-fileviewer__header-right__close:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Ensure the close icon is visible */
.sendbird-fileviewer__header__right__actions__close .sendbird-icon,
.sendbird-fileviewer__header-right__close .sendbird-icon {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Alternative close button selector */
.sendbird-fileviewer__header .sendbird-iconbutton {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Style any icon button in file viewer header as close button */
.sendbird-fileviewer__header .sendbird-iconbutton:last-child {
  width: 44px !important;
  height: 44px !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
}

.sendbird-fileviewer__header .sendbird-iconbutton:last-child:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/**
 * CustomChannelHeader Styles
 */

.custom-channel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #e8e8e8;
  min-height: 64px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.custom-channel-header__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.custom-channel-header__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #212121;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Manrope', sans-serif;
}

.custom-channel-header__subtitle {
  font-size: 12px;
  color: #757575;
  margin-top: 2px;
  font-family: 'Manrope', sans-serif;
}

.custom-channel-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}

.custom-channel-header__btn {
  color: #616161;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.2s ease;
  background-color: transparent;
}

.custom-channel-header__btn:hover {
  background-color: rgba(18, 98, 171, 0.08);
  color: #1262ab;
  transform: translateY(-1px);
}

.custom-channel-header__btn:active {
  transform: translateY(0);
  background-color: rgba(18, 98, 171, 0.12);
}

.custom-channel-header__btn--disabled {
  color: #bdbdbd;
  cursor: not-allowed;
  opacity: 0.6;
}

.custom-channel-header__btn--disabled:hover {
  background-color: transparent;
  color: #bdbdbd;
  transform: none;
}

/* Responsive */
@media (max-width: 576px) {
  .custom-channel-header {
    padding: 10px 12px;
  }

  .custom-channel-header__title {
    font-size: 14px;
  }

  .custom-channel-header__actions {
    gap: 2px;
  }

  .custom-channel-header__btn {
    padding: 6px;
  }

  .custom-channel-header__btn svg {
    width: 18px;
    height: 18px;
  }
}

/**
 * ChatContainer Styles
 * Full-page chat layout for Messages page
 */

/* Main container */
.chat-container {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 120px); /* Account for header and padding */
  min-height: 500px;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Sidebar with channel list */
.chat-container__sidebar {
  width: 320px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e0e0e0;
  background-color: #ffffff;
}

.chat-container__sidebar-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e8;
  background-color: #ffffff;
}

.chat-container__sidebar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #212121;
  letter-spacing: -0.3px;
}

.chat-container__channel-list {
  flex: 1;
  overflow: hidden;
}

.chat-container__channel-list .sendbird-channel-list {
  height: 100%;
  border: none;
}

/* Hide default UIKit header since we have our own */
.chat-container__channel-list .sendbird-channel-list__header {
  display: none;
}

/* Main chat area */
.chat-container__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.chat-container__main .sendbird-conversation {
  height: 100%;
}

/* Empty state */
.chat-container__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f8f9fa 0%, #f1f3f4 100%);
  padding: 48px;
  text-align: center;
}

.chat-container__empty-icon {
  color: #bdbdbd;
  margin-bottom: 28px;
  opacity: 0.8;
}

.chat-container__empty-icon svg {
  stroke-width: 1.2;
}

.chat-container__empty-title {
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 600;
  color: #333333;
  letter-spacing: -0.3px;
}

.chat-container__empty-text {
  margin: 0;
  font-size: 15px;
  color: #666666;
  max-width: 320px;
  line-height: 1.6;
}

/* Settings panel */
.chat-container__settings {
  width: 320px;
  min-width: 320px;
  border-left: 1px solid #e0e0e0;
  overflow: hidden;
}

.chat-container__settings .sendbird-channel-settings {
  height: 100%;
}

/* Responsive - Tablet */
@media (max-width: 992px) {
  .chat-container__sidebar {
    width: 280px;
    min-width: 280px;
  }

  .chat-container__settings {
    width: 280px;
    min-width: 280px;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .chat-container {
    flex-direction: column;
    height: calc(100vh - 80px);
  }

  .chat-container__sidebar {
    width: 100%;
    min-width: 100%;
    height: auto;
    max-height: 40%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }

  .chat-container__sidebar-header {
    padding: 12px 16px;
  }

  .chat-container__sidebar-title {
    font-size: 16px;
  }

  .chat-container__main {
    flex: 1;
    min-height: 300px;
  }

  .chat-container__settings {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #ffffff;
    border-left: none;
  }

  .chat-container__empty {
    padding: 24px;
  }

  .chat-container__empty-icon svg {
    width: 60px;
    height: 60px;
  }

  .chat-container__empty-title {
    font-size: 18px;
  }
}

/* Scrollbar styling */
.chat-container__channel-list::-webkit-scrollbar {
  width: 6px;
}

.chat-container__channel-list::-webkit-scrollbar-track {
  background: transparent;
}

.chat-container__channel-list::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}

/* Not Ready / Loading State */
.chat-container__not-ready {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  padding: 40px;
  text-align: center;
  width: 100%;
  height: 100%;
}

.chat-container__not-ready-icon {
  color: #9e9e9e;
  margin-bottom: 20px;
}

.chat-container__not-ready-title {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #424242;
}

.chat-container__not-ready-text {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #757575;
}

.chat-container__not-ready-btn {
  background-color: #1262ab;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.chat-container__not-ready-btn:hover {
  background-color: #0c3963;
}

/* Loading Spinner */
.chat-container__loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e0e0e0;
  border-top-color: #1262ab;
  border-radius: 50%;
  animation: chat-spinner 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes chat-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Custom File Viewer Modal */
.custom-file-viewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
}

.custom-file-viewer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

.custom-file-viewer__filename {
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 60px);
}

.custom-file-viewer__close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.custom-file-viewer__close:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.custom-file-viewer__close:active {
  background-color: rgba(255, 255, 255, 0.4);
}

.custom-file-viewer__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
}

.custom-file-viewer__content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.custom-file-viewer__download {
  text-align: center;
  color: #ffffff;
}

.custom-file-viewer__download p {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #a0a0a0;
}

.custom-file-viewer__download a {
  display: inline-block;
  padding: 12px 24px;
  background-color: #1262ab;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.custom-file-viewer__download a:hover {
  background-color: #0c3963;
}

/* Sidebar wrapper - no overflow restrictions */
.sideBar-wrapper {
  /* Allow content to overflow */
}

.sideBar-wrapper .sideBar,
.sideBar-wrapper .sideBar-new {
  height: 100%;
  /* Remove overflow restrictions to allow tooltips to show */
}

/* Ensure tooltips and dropdowns can overflow */
.sidebar-tooltip,
.sidebar-tooltip-menu {
  z-index: 100000 !important;
  pointer-events: auto !important;
}

/* Special handling for admin sidebar tooltips */
.sideBar-wrapper .sidebar-tooltip,
.sideBar-wrapper .sidebar-tooltip-menu {
  z-index: 999999 !important;
  position: absolute !important;
}

/* Position relative for sidebar items to allow absolute positioning of tooltips */
.sidebar-item {
  position: relative !important;
}

.sideNav {
  height: 100%;
  width: 4rem;
  top: 59px;
  bottom: 0;
  background: #1161AB !important;
  /* transition: width .4s; */
  position: sticky !important;
  z-index: 99999;
}

/* Hide sidebar on mobile devices */
@media (max-width: 991px) {
  .sideNav {
    display: none !important;
  }

}

.sideNav.fullSidebar {
  width: 15rem;
  box-shadow: 2px 9px 9px #00000035;
  border-radius: 0;
}

/* Force new sidebar background */
.sideBar-new {
  background: #0B3963 !important;
}

/* New sidebar item styles */
.sidebar-item {
  position: relative;
  transition: all 0.3s ease;
}

.sidebar-item:hover {
  background-color: #074988;
}

.sidebar-item.active {
  /* margin-left: 3px; */
  /* border-radius: 15px; */
  /* margin-left: 9px; */
  /* border: 1px solid #1f6aaf; */
  background-color: #064988;
  /* margin-right: 3px; */
}

.sidebar-link:hover {
  text-decoration: none;
}

.sidebar-link:focus {
  outline: none;
  box-shadow: none;
}

/* Sidebar submenu styles */
.sidebar-submenu {
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Icon wrapper for consistent sizing */
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
}

.sideNav .dropdown-menu {
  background: #34495E !important;
  /* background: linear-gradient(to left, #0B3963, #0B3963 90%, #ec0606 0%) !important; */
  left: 1.5rem !important;
  border-radius: 5px !important;
  top: -24px !important;
  border: 0;
  padding: 2px 8px;
  z-index: 99999 !important;
}


.sideNav .nav-link {
  padding: 10px 0;
}

.sideNav.fullSidebar .dropdown-menu {
  left: 10rem !important;
  top: -14px !important;
  z-index: 99999 !important;
}

.sideNav .dropdown-menu .dropdown-item {
  color: #fff;
  padding: 4px 14px;
  margin: 1px 0;
}

.sideNav .dropdown-menu .dropdown-item:hover {
  color: #fff;
  background: transparent;
}

.sideNav .dropdown-menu::before {
  content: "";
  position: absolute;
  background: transparent;
  width: 40px;
  height: 100%;
  top: 0;
  left: -30px;
  z-index: -1;
}

.sideNav .dropdown-menu::after {
  content: "";
  position: absolute;
  top: 14px;
  left: -11px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 14px solid #34495E;
  border-bottom: 8px solid transparent;
  /* opacity: 0; */
}

.sideNav .sideNavDropdown .dropdown-toggle.nav-link {
  display: none;
}

.sideNav.fullSidebar .sideNavDropdown .dropdown-toggle.nav-link {
  padding: 0 0 !important;
  color: #fff;
  display: block;
}

.sideNav .nav-item span {
  display: none;
  white-space: nowrap;
}

.sideNav.fullSidebar .nav-item span {
  display: block;
}

.sideNav .dropdown-menu label {
  color: #fff;
  padding: 8px 14px;
  opacity: 0.8;
  text-transform: uppercase;
  font-size: 12px;
  white-space: nowrap;
  border-bottom: 1px solid #ffffff5e;
  width: 100%;
}


/* Ensure proper layout on desktop to prevent content cutoff */
@media (min-width: 992px) {

  /* .outlet {
    width: 100%;
    max-width: 100%;
  } */
}

/* Responsive Sidebar Styles */
@media (max-width: 991px) {

  /* Transform desktop sidebar container for mobile */
  .position-sticky.z-3.w-100 {
    position: fixed !important;
    top: 60px !important;
    left: -250px !important;
    width: 250px !important;
    max-width: 250px !important;
    height: calc(100vh - 60px) !important;
    background: #f8f8f8 !important;
    z-index: 999999 !important;
    transition: left 0.3s ease-in-out !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
  }

  /* Show sidebar when mobile-sidebar-open class is added to body */
  body.mobile-sidebar-open .position-sticky.z-3.w-100 {
    left: 0 !important;
    top: 60px !important;
    position: fixed !important;
  }

  /* Override profile page CSS that might interfere */
  .profile_about .position-sticky.z-3.w-100 {
    top: 60px !important;
    position: fixed !important;
    z-index: 999999 !important;
  }

  /* Update mobile sidebar colors */
  .position-sticky.z-3.w-100 {
    background: #2C3E50 !important;
  }

  /* Fallback for any remaining z-1 references */
  .position-sticky.z-1.w-100 {
    z-index: 15 !important;
  }

  /* Remove CSS backdrop - using React element instead */

  /* Mobile Sidebar - Force full expanded view */
  .sideNav {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    height: 100%;
    box-shadow: none !important;
    /* Force expanded state on mobile */
    width: 15rem !important;
    background: #2C3E50;
    pointer-events: auto !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Make nav container fill height */
  .sideNav .flex-column {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
  }

  .sideNav.fullSidebar {
    width: 100% !important;
  }

  /* Always show text on mobile */
  .sideNav .nav-item span {
    display: block !important;
  }

  /* Force expanded dropdown toggle to show */
  .sideNav .sideNavDropdown .dropdown-toggle.nav-link {
    display: block !important;
    padding: 0 0 !important;
    color: #fff;
  }

  /* Adjust dropdown positioning for mobile */
  .sideNav .dropdown-menu {
    position: static !important;
    width: 100%;
    background: rgba(0, 0, 0, 0.2) !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0;
    border-radius: 0 !important;
  }

  .sideNav .dropdown-menu::before,
  .sideNav .dropdown-menu::after {
    display: none;
  }

  /* Mobile nav items */
  .sideNav .nav-link {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Ensure nav buttons are clickable */
  .sideNav button {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999999 !important;
    cursor: pointer !important;
  }

  /* Force all interactive elements to be clickable */
  .sideNav .dropdown-item {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 9999999 !important;
    position: relative !important;
  }

  /* Force all nav items to be clickable */
  .sideNav .nav-item {
    pointer-events: auto !important;
    z-index: 9999999 !important;
  }

  /* Force container elements to be clickable */
  .sideNav .row,
  .sideNav .col,
  .sideNav .d-flex {
    pointer-events: auto !important;
    z-index: 9999999 !important;
  }

  /* Hide expand/collapse buttons on mobile */
  /* .rounded-circle.position-absolute {
    display: none !important;
  } */

  /* Mobile User Profile Section */
  .sideNav .d-lg-none {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)) !important;
    backdrop-filter: blur(10px);
  }

  /* Profile Header Styling */
  .sideNav .mobile-profile-header {
    padding: 8px 0;
  }

  .sideNav .mobile-profile-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }

  .sideNav .mobile-profile-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(17, 97, 171, 0.9), rgba(13, 71, 125, 0.9)) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  /* Mobile profile buttons - Professional design */
  .sideNav .mobile-profile-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left;
    transition: all 0.2s ease;
    min-height: 44px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px);
  }

  .sideNav .mobile-profile-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .sideNav .mobile-signout-btn {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    border: 1px solid rgba(220, 53, 69, 0.8) !important;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left;
    transition: all 0.2s ease;
    min-height: 44px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px);
  }

  .sideNav .mobile-signout-btn:hover {
    background: linear-gradient(135deg, #c82333, #bd2130) !important;
    border-color: rgba(189, 33, 48, 0.9) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.3);
  }
}

@media (max-width: 576px) {
  .sidebar-mobile-wrapper {
    width: 80%;
    max-width: 280px;
  }
}

/* Touch-friendly nav items */
@media (max-width: 991px) {
  .sideNav .nav-link {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .sideNav .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 20px;
  }
}
.active-bg {
    background: #064988 !important;
}

.default-bg {
    background: #0C3962 !important;
}

.sidebar-submenu:hover {
    background-color: red;
}

.sidebar-submenu:hover {
    background-color: #074988;
}

/* hover effect */
.default-bg:hover {
    background-color: #064988 !important;
    /* light overlay effect */
    transition: background-color 0.3s ease;
}
/**
 * ChatBadge Styles
 * Matches the existing NotificationBell styling
 */

.chat-badge-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-badge-button {
  padding: 8px !important;
  color: #757575 !important;
  transition: all 0.2s ease !important;
}

.chat-badge-button:hover {
  background-color: rgba(18, 98, 171, 0.08) !important;
  color: #1262ab !important;
}

.chat-badge-icon {
  color: #757575;
  transition: color 0.2s ease;
}

.chat-badge-icon.has-unread {
  color: #1262ab;
}

.chat-badge-button:hover .chat-badge-icon {
  color: #1262ab;
}

/* Tooltip styling */
.chat-badge-tooltip .tooltip-inner {
  background-color: #212121;
  font-size: 12px;
  padding: 4px 8px;
}

.chat-badge-tooltip .tooltip-arrow::before {
  border-bottom-color: #212121;
}

/* Badge animation when there are unread messages */
.chat-badge-icon.has-unread {
  animation: chat-badge-pulse 2s infinite;
}

@keyframes chat-badge-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}