.nav-tabs.custom-color .nav-link.active {
    background-color: #09e5ab;  /* Light green background ##d4edda */
    color: #e9f0eb !important;  /* Dark green text #155724 */
    font-weight: 500;
    border-color: #c3e6cb #c3e6cb #fff;  /* Match Bootstrap's style with green */
  }

a.delete:hover {
	color: #dc0909 !important;
}

.avatar-offline:before {
    background-color: #6a7073 !important;
}

.tfret-background-color{
  background-color: #0b193e !important; 
}

.tfret-button-color{
  color: #fbb519; 
}
.tfret-footer-bg-color{
  background-color: #fbb519; 
}
.tfret-footer-color *{
  color: #000000 !important; 
}
.tfret-wave-color{
  color: #c36e01; 
}
.tfret-wave-1-color{
  color: #e68300; 
}

/* ============================================
   Base styles (apply to ALL devices)
============================================ */
.tfret-button {
      background: #f9b233;
    line-height: 35px !important;
    border-radius: 30px !important;
    padding: 0px 20px !important;
    color: #0c0c0c !important;
    font-weight: bold !important;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid white;
    /* border-color: white; */
}

.tfret-header-nav {
    margin-bottom: 5px;
    border-bottom: 3px solid #c36e01;
}
.tfret-user-icon{
    border: 2px solid white;
    border-radius: 50%;
}

.has-submenu:hover > .language-switch{
  opacity: 1 !important;
  visibility: visible ;
  display: block;
  margin-top: -20px !important;
  /* background-color: beige !important; */
}

ul.language-switch > li {
    margin: 10px;
}

/* ============================================
   MOBILE FIRST (default)
   Phones: <576px
============================================ */
@media (max-width: 1043px) {
  .tfret-button {
      background: #f9b233;
      line-height: 20px !important;
      margin: 0.5rem;
      border-radius: 30px !important;
      padding: 5px 20px !important;
      color: #0c0c0c !important;
      font-weight: bold !important;
      text-decoration: none;
      white-space: nowrap;
      border: 2px solid white;
      /* border-color: white; */
  }

  .main-nav li{
    margin-left: 0px !important;
  }

}

/* ============================================
   Tablets: 576px – 767px
============================================ */
@media (min-width: 576px) {
  .container {
    background: #e8f0ff;
    font-size: 15px;
  }
}

/* ============================================
   Small laptops: 768px – 991px
============================================ */
/* @media (min-width: 768px) {
  .container {
    background: #d8ffe0;
    font-size: 16px;
  }
} */

/* ============================================
   Desktops: 992px – 1199px
============================================ */
@media (min-width: 992px) {
  .container {
    background: #fff2d8;
    font-size: 17px;
  }
  .main-nav li {
      display: block;
      position: relative;
      margin-right: 5px !important;
  }
}

/* ============================================
   Large desktops + TVs: ≥1200px
============================================ */
@media (min-width: 1200px) {
  .container {
    background: #ffe1e1;
    font-size: 18px;
    max-width: 1100px;
    margin: 2rem auto;
  }
}

/* ============================================
   Ultra-wide monitors (Full HD / 2K / 4K)
============================================ */
@media (min-width: 1600px) {
  .container {
    background: #f0e1ff;
    font-size: 20px;
    max-width: 1500px;
  }
}

/* ============================================
   Retina / High DPI displays
============================================ */
@media (min-resolution: 2dppx) {
  .container {
    border: 2px solid #00000022;
  }
}

/* ============================================
   Print styles
============================================ */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .container {
    background: white !important;
    font-size: 12px;
    border: none;
    box-shadow: none;
  }
}

/* ============================================
   Dark mode support
============================================ */
@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
  .container {
    background: #222;
    color: #ddd;
  }
}

/* ============================================
   Reduced motion (accessibility)
============================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}