.horizontal-strip {

  background-color: #e2e8f0;
  height: 50px;
  /* display: flex
; */
  padding-top: 6px;
}

.profile-pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.progress-bar {
  height: 33px !important;
  font-size: 14px !important;
}

.progress-bar-height {
  --bs-progress-height: 20px;
}

.bg-blue {
  background: #003B64 !important;
  border: #003B64 !important;
}

.bg-grey {
  background-color: #e2e6ea !important;
  border: #e2e6ea !important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #e2e8f0;
  background-color: #003B64;
  border-color: #003B64;
}

/* .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
color: #e2e8f0;
background-color: #003B64;
border-color: #003B64;

box-shadow: var(--bs-btn-active-shadow);
} */

.btn-group {
  width: 100%;
}

.btn-light {
  border-bottom: 2px solid #003B64 !important;
  border-right: 2px solid #003B64 !important;
}

.btn-light-blue {
  background: #75a4e0 !important;
  border-color: #75a4e0 !important;
  color: #000 !important;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #26395E !important;
  --bs-btn-border-color: #26395E !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #26395E !important;
  --bs-btn-hover-border-color: #26395E !important;
  --bs-btn-focus-shadow-rgb: 117, 153, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #26395E !important;
  --bs-btn-active-border-color: #26395E !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #26395E !important;
  --bs-btn-disabled-border-color: #26395E !important;
  font-size: 13px !important;
  padding: 8px 16px;
  font-weight: 500;
}

.btn-secondary {
  --bs-btn-color: #000;
  --bs-btn-bg: #BCD4E6 !important;
  --bs-btn-border-color: #BCD4E6 !important;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #BCD4E6 !important;
  --bs-btn-hover-border-color: #BCD4E6 !important;
  --bs-btn-focus-shadow-rgb: 100, 200, 255;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #BCD4E6 !important;
  --bs-btn-active-border-color: #BCD4E6 !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #BCD4E6 !important;
  --bs-btn-disabled-border-color: #BCD4E6 !important;
  font-size: 13px !important;
  padding: 8px 16px;
  font-weight: 500;
}

.btn-teritory {
  --bs-btn-color: #fff !important;
  --bs-btn-bg: #4EA6E6 !important;
  --bs-btn-border-color: #4EA6E6 !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4EA6E6 !important;
  --bs-btn-hover-border-color: #4EA6E6 !important;
  --bs-btn-focus-shadow-rgb: 100, 200, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4EA6E6 !important;
  --bs-btn-active-border-color: #4EA6E6 !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #4EA6E6 !important;
  --bs-btn-disabled-border-color: #4EA6E6 !important;
  font-size: 13px !important;
  padding: 8px 16px;
  font-weight: 500;
}

.btn-grey {
  --bs-btn-color: #000;
  --bs-btn-bg: #EAEBEE !important;
  /* updated default background */
  --bs-btn-border-color: #EAEBEE !important;
  /* updated default border */
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #F8F9FC !important;
  --bs-btn-hover-border-color: #F8F9FC !important;
  --bs-btn-focus-shadow-rgb: 100, 200, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #F8F9FC !important;
  --bs-btn-active-border-color: #F8F9FC !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #F8F9FC !important;
  --bs-btn-disabled-border-color: #F8F9FC !important;
  font-size: 13px !important;
  padding: 8px 16px;
  font-weight: 500;
}

.btn-grey.active {
  background: #BCD4E6 !important;
  border-color: #BCD4E6 !important;
  color: #000 !important;
}

.btn-grey:hover {
  background: #e2e6ea !important;
  /* slightly darker than #F8F9FC */
  border-color: #e2e6ea !important;
  color: #000 !important;
}

.btn-light-grey {
  --bs-btn-color: #000;
  --bs-btn-bg: #F8F9FC !important;
  --bs-btn-border-color: #F8F9FC !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #F8F9FC !important;
  --bs-btn-hover-border-color: #F8F9FC !important;
  --bs-btn-focus-shadow-rgb: 100, 200, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #F8F9FC !important;
  --bs-btn-active-border-color: #F8F9FC !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #F8F9FC !important;
  --bs-btn-disabled-border-color: #F8F9FC !important;
}

.btn-light-grey.active {
  background: #26395E !important;
  border-color: #26395E !important;
  color: #fff !important;
}

.btn-light-grey:hover {
  background: #26395E !important;
  /* slightly darker than #F8F9FC */
  border-color: #26395E !important;
  color: #fff !important;
}

.ticket-table th,
.table-wrap thead th {
  white-space: nowrap;
}

.nav-underline-wrapper {
  position: relative;
}

.nav-underline .nav-link {
  position: relative;
  color: #6c757d;
  padding: 9px 16px;
  font-weight: 500;
}

.nav-underline .nav-link.active {
  color: #0f456b;
  font-weight: 600;
}

.nav-underline .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #0f456b;
}

/* Style for the <hr> line that will be the base line */
/* .nav-horizontal-line {
    border: 0;
    height: 2px;
    margin: 0rem;
    background-color: grey;
  } */

.nav-underline-wrapper .nav-item .nav-link.active+.nav-horizontal-line {
  width: 100%;
  left: 0;
}

/* button group rounded card */
.tab-button-group-wrapper {
  border: 1px solid #ccc;
  border-radius: 9px;
  padding: 6px;
  background: #fff;
  width: 100%;
}

.nav-tabs {
  display: flex;
  width: 100%;
  gap: 6px;
  border-bottom: none;
  padding: 0;
  margin: 0;
}

.nav-tabs .nav-item {
  margin-bottom: 0;
}

.nav-tabs .btn {
  border-radius: 9px;
  border: none;
  padding: 6px 14px;
  font-weight: 500;
}

/* Inactive buttons */
.btn-grey {
  background-color: transparent;
  color: #6c757d;
}

/* Active buttons */
.btn-primary {
  background-color: #0f456b;
  color: #fff;
}

.badge {
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 5px 10px;
  border: 1px solid transparent;
  cursor: unset;
}

/* ✅ Published - Green */
.status-green {
  background-color: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

/* 🕓 Draft - Gray */
.status-gray {
  background-color: #f3f4f6;
  color: #6d6c6c;
  border-color: #d1d5db;
}

/* 🗄️ Archived - Muted */
.status-red {
  background-color: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.status-yellow {
  background-color: #fffbea;   /* pale yellow background */
  color: #92400e;              /* dark amber text */
  border-color: #fcd34d;       /* golden border */
}

.badge.status-blue {
  background-color: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.badge.status-indigo {
  background-color: #eef2ff;
  color: #5b6ef5;
  border-color: #d8defc;
}

.badge.status-purple {
  background-color: #f5f3ff;
  color: #7c3aed;
  border-color: #ddd6fe;
}

.badge.status-teal {
  background-color: #f0fdfa;
  color: #059669;
  border-color: #a7f3d0;
}

.badge.status-cyan {
  background-color: #ecfeff;
  color: #00acc1;
  border-color: #cffafe;
}

.badge.status-orange {
  background-color: #fff7ed;
  color: #f97316;
  border-color: #fed7aa;
}

.badge.status-orange-dark {
  background-color: #fff1e8;
  color: #e67e22;
  border-color: #ffd3b0;
}

.badge.status-amber {
  background-color: #fffbeb;
  color: #f59e0b;
  border-color: #fde68a;
}

.badge.status-green {
  background-color: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

.badge.status-green-dark {
  background-color: #eef9ec;
  color: #2e7d32;
  border-color: #cde8d0;
}

.badge.status-red {
  background-color: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

.badge.status-gray {
  background-color: #f3f4f6;
  color: #6b7280;
  border-color: #d1d5db;
}

.badge.status-blue,
.badge.status-indigo,
.badge.status-purple,
.badge.status-teal,
.badge.status-cyan,
.badge.status-orange,
.badge.status-orange-dark,
.badge.status-amber,
.badge.status-green,
.badge.status-green-dark,
.badge.status-red,
.badge.status-gray {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  line-height: 1;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  border: none;
  cursor: unset;
}

.badge.status-new,
.badge.status-open,
.badge.status-assigned,
.badge.status-in-progress,
.badge.status-pending-vendor,
.badge.status-pending-user,
.badge.status-waiting-customer,
.badge.status-waiting-approval,
.badge.status-on-hold,
.badge.status-reopened,
.badge.status-resolved,
.badge.status-closed,
.badge.status-submitted-close,
.badge.status-canceled,
.badge.status-answered,
.badge.status-customer-reply,
.badge.status-waiting-vendor,
.badge.status-waiting-user,
.badge.status-non-response,
.badge.status-published,
.badge.status-draft,
.badge.status-archived {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  line-height: 1;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  border: none;
  color: #fff;
  cursor: unset;
}

.badge.status-new {
  background-color: #ebf5ff;
  color: #1d4ed8;
}

.badge.status-open {
  background-color: #f1efff;
  color: #5b6ef5;
}

.badge.status-assigned {
  background-color: #f3efff;
  color: #7c3aed;
}

.badge.status-in-progress {
  background-color: #fff4e5;
  color: #f97316;
}

.badge.status-pending-vendor {
  background-color: #f7effd;
  color: #8e44ad;
}

.badge.status-pending-user {
  background-color: #eefaf7;
  color: #16a085;
}

.badge.status-waiting-customer {
  background-color: #eefbfd;
  color: #00acc1;
}

.badge.status-waiting-approval {
  background-color: #fff8e8;
  color: #f59e0b;
}

.badge.status-on-hold {
  background-color: #fff3d6;
  color: #ffb300;
}

.badge.status-reopened {
  background-color: #fff1e8;
  color: #e67e22;
}

.badge.status-resolved {
  background-color: #eefaf0;
  color: #27ae60;
}

.badge.status-closed {
  background-color: #eefaf0;
  color: #27ae60;
}

.badge.status-submitted-close {
  background-color: #eefaf0;
  color: #27ae60;
}

.badge.status-canceled {
  background-color: #fef2f2;
  color: #e74c3c;
}

.badge.status-answered {
  background-color: #edfdfd;
  color: #00b8d4;
}

.badge.status-customer-reply {
  background-color: #eaf6ff;
  color: #3498db;
}

.badge.status-waiting-vendor {
  background-color: #f6f0ff;
  color: #7e57c2;
}

.badge.status-waiting-user {
  background-color: #f1fbf9;
  color: #26a69a;
}

.badge.status-non-response {
  background-color: #f3f4f6;
  color: #9e9e9e;
}

.badge.status-published {
  background-color: #27ae60;
}

.badge.status-draft {
  background-color: #6b7280;
}

.badge.status-archived {
  background-color: #e74c3c;
}

.badge.status-green {
  background-color: #eefaf0;
  color: #27ae60;
  border-color: #cbeed5;
}

.badge.status-red {
  background-color: #fef2f2;
  color: #e74c3c;
  border-color: #f7c7c2;
}

.badge.status-gray {
  background-color: #f3f4f6;
  color: #9e9e9e;
  border-color: #d1d5db;
}

.profile-overview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.initials-avatar {
  background-color: #dee2e6;
  color: #495057;
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
}

/* Avatar Colors - Curated Palette */
.avatar-blue { background-color: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
.avatar-indigo { background-color: #eef2ff !important; color: #5b6ef5 !important; border: 1px solid #d8defc !important; }
.avatar-purple { background-color: #f5f3ff !important; color: #7c3aed !important; border: 1px solid #ddd6fe !important; }
.avatar-teal { background-color: #f0fdfa !important; color: #0d9488 !important; border: 1px solid #99f6e4 !important; }
.avatar-cyan { background-color: #ecfeff !important; color: #0891b2 !important; border: 1px solid #a5f3fc !important; }
.avatar-orange { background-color: #fff7ed !important; color: #ea580c !important; border: 1px solid #fdba74 !important; }
.avatar-amber { background-color: #fffbeb !important; color: #d97706 !important; border: 1px solid #fcd34d !important; }
.avatar-rose { background-color: #fff1f2 !important; color: #e11d48 !important; border: 1px solid #fecdd3 !important; }
.avatar-slate { background-color: #f8fafc !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }
.avatar-green { background-color: #f0fdf4 !important; color: #16a34a !important; border: 1px solid #bbf7d0 !important; }

/* Refined Overflow Count */
.remaining-count {
  background-color: #26395e !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* User Hover Card */
.user-hover-card {
  position: fixed;
  z-index: 10000;
  width: 260px;
  max-width: 280px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Enhanced Avatar Styles */
.avatar-stack-item {
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 0 0 0.5px rgba(226, 232, 240, 0.8), 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.avatar-stack-item:hover {
  transform: scale(1.15);
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

.text-muted-slate {
  color: #94a3b8 !important;
  font-size: 13px;
}

/* Late-loaded global action buttons. Keep this after theme button overrides. */
.app-action-btn {
  color: #172033 !important;
  background-color: #f8fbff !important;
  border-color: #d8e1ee !important;
  box-shadow: none !important;
  filter: none !important;
}

.app-action-btn:hover,
.app-action-btn:focus,
.app-action-btn:active,
.app-action-btn--outline:hover,
.app-action-btn--outline:focus {
  color: #172033 !important;
  background-color: #eef6ff !important;
  border-color: #c3cfdd !important;
  box-shadow: none !important;
  filter: none !important;
}

.app-action-btn:disabled,
.app-action-btn.disabled {
  color: #7b8794 !important;
  background-color: #f1f5f9 !important;
  border-color: #d7dee6 !important;
  opacity: 1 !important;
}