:root{
  --moonu-mint:       #97D5AF; /* green */
  --moonu-violet:     #796BC6; /* violet */
  --moonu-periwinkle: #A0A0CE; /* periwinkle */
  --moonu-charcoal:   #66676C; /* charcoal */

  /* RGB for alpha mixes (no auto-hex→rgb in CSS) */
  --moonu-mint-rgb:       151,213,175;
  --moonu-violet-rgb:     121,107,198;
  --moonu-periwinkle-rgb: 160,160,206;
  --moonu-charcoal-rgb:   102,103,108;
  --moonu-danger-rgb:     248,113,113; /* light red */
}

/* ========= Backgrounds ========= */
.bg-moonu-mint       { background-color: var(--moonu-mint) !important; }
.bg-moonu-violet     { background-color: var(--moonu-violet) !important; }
.bg-moonu-periwinkle { background-color: var(--moonu-periwinkle) !important; }
.bg-moonu-charcoal   { background-color: var(--moonu-charcoal) !important; }

/* Subtle (soft) backgrounds for badges/pills/cards */
.bg-moonu-mint-soft       { background-color: rgba(var(--moonu-mint-rgb), .12) !important; }
.bg-moonu-violet-soft     { background-color: rgba(var(--moonu-violet-rgb), .12) !important; }
.bg-moonu-periwinkle-soft { background-color: rgba(var(--moonu-periwinkle-rgb), .12) !important; }
.bg-moonu-charcoal-soft   { background-color: rgba(var(--moonu-charcoal-rgb), .12) !important; }

/* Optional hover helpers */
.hover-bg-moonu-mint:hover       { background-color: var(--moonu-mint) !important; }
.hover-bg-moonu-violet:hover     { background-color: var(--moonu-violet) !important; }
.hover-bg-moonu-periwinkle:hover { background-color: var(--moonu-periwinkle) !important; }
.hover-bg-moonu-charcoal:hover   { background-color: var(--moonu-charcoal) !important; }

/* ========= Text colors ========= */
.text-moonu-mint       { color: var(--moonu-mint) !important; }
.text-moonu-violet     { color: var(--moonu-violet) !important; }
.text-moonu-periwinkle { color: var(--moonu-periwinkle) !important; }
.text-moonu-charcoal   { color: var(--moonu-charcoal) !important; }

/* Contrast helpers (white/black) for colored bgs */
.text-on-moonu-dark { color: #fff !important; }   /* for violet/charcoal */
.text-on-moonu-light{ color: #111 !important; }   /* for mint/periwinkle */

/* ========= Borders ========= */
.border-moonu-mint       { border-color: var(--moonu-mint) !important; }
.border-moonu-violet     { border-color: var(--moonu-violet) !important; }
.border-moonu-periwinkle { border-color: var(--moonu-periwinkle) !important; }
.border-moonu-charcoal   { border-color: var(--moonu-charcoal) !important; }

/* ========= Gradient (nice for headers/hero) ========= */
.bg-gradient-moonu {
  background-image: linear-gradient(135deg, var(--moonu-mint) 0%, var(--moonu-violet) 100%) !important;
  color: #fff !important;
}

/* ========= Tiny badge variant (pairs well with -soft) ========= */
.badge-moonu {
  padding: .15rem .4rem;
  font-size: .75rem;
  line-height: 1;
  border-radius: 999px;
}


/* badges per type */
.badge-did{
  background-color: var(--moonu-violet);
  color: #FFF;  
}
.badge-tollfree{
  background-color: var(--moonu-mint);
  color: #FFF; 
}
.badge-national{
  background-color: var(--moonu-periwinkle);
  color: #FFF;  
}

/* opcional: fallback neutro */
.badge-neutral{
  background-color: var(--moonu-charcoal);
  color: #FFF; 
}

/* ---------------------------------------------
   Amount pill (compact rounded label)
   --------------------------------------------- */
.amount-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  margin: .25rem 0; /* compact spacing */
}
.amount-pill::before {
  text-transform: uppercase;
  font-size: .75rem;
  color: var(--bs-secondary-color);
  letter-spacing: .04em;
}


.btn-custom{
  color: #fff;
     background-image:
        linear-gradient(to right, #9a86e0, #9a86e0),
        linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15));
}

.btn-custom-2 {
     color: #fff;
	 background-image:
	    linear-gradient(to right, #9a86e0, #9a86e0),
	    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15));
	 
}
    
.alert-success {
     background-image: linear-gradient(to right, #82e4ad, #7b62ce);
     color: white;
}

.alert-success .btn-close{
  --bs-btn-close-color: #fff;
  --bs-btn-close-opacity: 1;
  filter: none;
}

.pagination.pagination-secondary .page-item.active > .page-link,
.pagination.pagination-secondary .page-item.active > .page-link:focus,
.pagination.pagination-secondary .page-item.active > .page-link:hover {
	 background-image: none;    
	 background-color: rgba(109, 84, 193, .7);
	 border: none;
	 color: white;
	 
}

.alert-warning{
  background-image: linear-gradient(#7b62ce, #7b62ce);
  color: #fff;
  border: 0;
}

.alert-warning .btn-close{
  --bs-btn-close-color: #fff;
  --bs-btn-close-opacity: 1;
  filter: none;
}

.input-group-text {
  border-color: rgb(210, 214, 218) !important;
  border-right-width: 1px !important;
  border-right-style: solid !important;
}

/* -------------------------------------------------
   Close icon (top-right “X”) — consolidated (no dupes)
   ------------------------------------------------- */
.pfm-close-icon {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2050;
  pointer-events: auto;
  background: transparent;
  border: 0;
  color: #6c757d !important;          /* dark gray */
  text-decoration: none;
}
.pfm-close-icon i {
  font-size: 1.25rem;
  line-height: 1;
  opacity: .75;
}
.pfm-close-icon:hover i { opacity: 1; }

/* Fallback glyph when no <i> icon is present */
.pfm-close-icon:not(:has(i))::before,
.pfm-close-icon i:empty::before {
  content: "×";
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1;
  opacity: .65;
}

/* Make the close icon white over colored variants */
.pfm-modal.pfm-success .pfm-close-icon,
.pfm-modal.pfm-error   .pfm-close-icon,
.pfm-modal.pfm-warning .pfm-close-icon,
.pfm-modal.pfm-info    .pfm-close-icon {
  color: #fff;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
}


/* SIDEMENU */

/* Make the link compact (as we already did) */
#sidenav-main .navbar-nav .nav-link {  	
  padding: .30rem .50rem;
  display: flex;                /* ensures icon and text stay aligned */
  align-items: center;
  color: #6c757d;               /* default muted color */
}
#sidenav-main .navbar-nav .nav-link:hover { color: #495057; }
#sidenav-main .navbar-nav .nav-link.active { 
  color: #6f3cc3;               /* active (selected) color */
  font-weight: 600;
}

/* Remove the “box” around the icon */
#sidenav-main .icon-shape {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0;
  min-width: 0;
}
#sidenav-main .icon-sm { width: 18px; height: 18px; }
#sidenav-main .navbar-nav .me-2 { margin-right: .35rem !important; }

/* Make the SVG inherit the link color */
#sidenav-main .nav-link .icon-shape svg,
#sidenav-main .nav-link .icon-shape svg path,
#sidenav-main .nav-link .icon-shape svg * {
  fill: currentColor !important;   /* covers <path> without fill and with classes like .color-background */
  stroke: currentColor !important; /* covers icons that use stroke */
  opacity: 1;
}

/* (Optional) If any SVG has a fixed fill (e.g., fill="#000"), force override */
#sidenav-main .nav-link .icon-shape svg [fill],
#sidenav-main .nav-link .icon-shape svg [stroke] {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Scoped styles for the page-size control only */
.page-size-control .input-group-responsive {
  width: 100%;
}

/* compact on md+ */
@media (min-width: 768px) {
  .page-size-control .input-group-responsive {
    width: 50%;
  }
  .page-size-control .input-group-responsive .form-select {
    min-width: 0;
    width: 35%;
    flex: 0 0 auto;
  }
}

/* on very small devices give a usable tap target */
@media (max-width: 575.98px) {
  .page-size-control .input-group-responsive .form-select {
    min-width: 3.0rem;
  }
}

/* CallRecord Modal Details */

/* Header: gradient + compact layout */
.call-details-header {
  background-color: var(--moonu-periwinkle) !important;
  color: #fff;
  border-bottom: 0;
  padding: 0.9rem 1.25rem;
}

.call-details-header .modal-title {
  font-weight: 600;
  margin-bottom: 0;
}

.call-details-header-subtitle {
  font-size: 1.0rem;
  opacity: 0.9;
}

.call-details-header-pill {
  font-size: 0.9rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.18);
  margin-left: 0.5rem;
}    

/* Body layout */
.call-details-body {
  background-color: #f8f9fa;
}

.call-details-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6c757d;
  font-weight: 600;
  margin: 0.25rem 0 0.4rem;
}

.call-details-grid .card {
  border: 0;
  border-radius: 0.9rem;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07);
  background-color: #ffffff;
  height: 100%;
}

.call-details-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(83, 90, 97);
  margin-bottom: 0.15rem;
}

.call-details-value {
  font-size: 0.85rem;
  font-weight: 500;
  color: #111827;
  word-break: break-word;
}

.call-details-value.muted {
  color: #9ca3af;
  font-weight: 400;
}

.badge-call-status {
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.badge-call-status-answered {
  background-color: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.badge-call-status-failed,
.badge-call-status-busy,
.badge-call-status-congestion {
  background-color: rgba(248, 113, 113, 0.12);
  color: #b91c1c;
}

.badge-call-status-noanswer {
  background-color: rgba(251, 191, 36, 0.12);
  color: #92400e;
}

.badge-pill-outline {
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  color: #4b5563;
  background-color: #f9fafb;
}

.modal-footer.call-details-footer {
  border-top: 0;
  padding-top: 0.5rem;
}
 
.badge-no-uppercase {
  text-transform: none !important;
} 

.link-moonu {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  transition: transform .18s ease, opacity .18s ease;
  will-change: transform;
}

.link-moonu:hover,
.link-moonu:focus {
  text-decoration: none;
  color: inherit;
  transform: scale(1.06);
}

.link-moonu:active {
  transform: scale(0.97);
}

.moonu-toast {
  position: fixed;
  top: 55px;
  right: 16px;
  z-index: 1080;

  max-width: 820px;
  width: max-content;
  padding: 10px 12px;
  border-radius: 10px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

  transform: translateX(16px);
  opacity: 0;
  pointer-events: none;

  transition: opacity 220ms ease, transform 220ms ease;
}

.moonu-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.moonu-toast__content {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #fff;
  line-height: 1.25;
  font-size: 14px;
}

.moonu-toast__close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.9;
}

.moonu-toast__close:hover { opacity: 1; }

.moonu-toast--success { 
	background: rgba(var(--moonu-mint-rgb), 0.92); 
}

.moonu-toast--warning {
  background: rgba(var(--moonu-danger-rgb), 0.80);
}