:root {
            --tg-bg-color: #242424;
            --tg-accent-color: #3399ff;
            --tg-text-color: #ffffff;
            --tg-menu-bg: #2d2d2d;
        }


body {
/*  background-color: #121212;
  color: #f0f0f0!important;*/
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  padding: 5px;
  max-width: 600px;
  margin: auto;
}

.card {
/*  background-color: #1e1e1e;*/
  border-radius: 8px;
  gap: 10px;

  padding: 0.8rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mgr-number {
  width: fit-content;
  padding: 0.2rem;
  margin-bottom: 0px;
}

.mgr-number h1 {
  margin: 0px;
  padding: 0px 10px;
}

.mgr-name {
  margin: 0px;
  padding: 0px;
}

.mb-15 {
  margin-bottom: 15px'
}

.flex-nowrap {
  display: flex;
  gap: 10px;
  flex-direction: row;
  align-items: center;
}

button {
/*  background-color: #3b3b3b;
  color: #fff;*/
  padding: 0.6rem 1rem;
/*  border: none!important;*/
/*  border-radius: 5px;*/
  cursor: pointer;
  margin: 0.3rem 0.2rem;
  transition: background-color 0.2s;
}

.btn-secondary {
  border-color: none;
}

button:hover {
  background-color: #505050;
}

/*
button.active {
  background-color: #0d6efd!important; 
}
*/

.form-control {
      line-height: 1.5 !important;
      padding: 1rem 0.75rem !important;
    }

.scope-switcher, .period-switcher {
  display: flex;
  justify-content: center;
  margin: 5px 0;
  align-items: center;
  
}

.period-switcher {
 gap: 10px;
}

.scope-switcher .scope.active {
  background-color: #0078d4;
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.hidden {
  display: none!important;
}

.loader::after {
  content: "";
  border: 4px solid #fff;
  border-top: 4px solid transparent;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

p {
  margin-bottom: 0.2rem!important;
}

h2 {
  margin-bottom: 1rem;
}

ul {
  padding-left: 0px!important;
  margin-bottom: 0px;
}

ul#pbx-list li div {
  align: left;
}

ul#pbx-list li::marker {
  display: none;
  content: '';
}

ul#pbx-list li {
  margin-bottom: 1rem;
}

.row {
margin: 0px;
}

#pbx-key {
  text-security: disk;
  -webkit-text-security: disc;
  -moz-text-security: disc;
}


.navbar {
            height: 60px;
/*            background: var(--tg-bg-color);
            color: var(--tg-text-color);*/
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
            position: relative;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        /* Left Navigation Button */
        .nav-back {
            width: 40px;
            height: 40px;
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--tg-text-color);
            visibility: hidden;
        }


        /* Profile Button */
        .profile-button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #555;
            border: none;
            overflow: hidden;
            cursor: pointer;
            margin-left: 8px;
            position: relative;
        }

        .profile-button img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* User Menu */
        .user-menu {
            position: absolute;
            right: 12px;
            top: 60px;
            width: 220px;
            background: var(--tg-menu-bg);
            border-radius: 8px;
            padding: 12px;
            display: none;
            flex-direction: column;
            gap: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            z-index: 999;
        }

        .user-menu.active {
            display: flex;
        }

        /* Menu Profile */
        .menu-profile {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .menu-profile img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
        }

        .menu-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--tg-text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Menu Item */
        .menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 8px;
            border-radius: 6px;
            color: var(--tg-text-color);
            text-decoration: none;
            font-size: 14px;
        }

        .menu-item:hover {
            background: rgba(255,255,255,0.05);
        }

        .menu-item svg {
            width: 18px;
            height: 18px;
        }

        /* Arrow triangle */
        .user-menu::before {
            content: '';
            position: absolute;
            right: 16px;
            top: -6px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid var(--tg-menu-bg);
        }
        .left-section {
          display: flex;
          gap: 1rem;
        }
        .left-section p {
          margin: 0px!important;
        }

.right-section {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;

}

.nomargin {
  margin: 0px!important;
}

.grey-text {
color: grey;
}



/* Prevent zooming on tab focus in mobile Safari */
    @viewport {
      width: device-width;
      zoom: 1;
    }

    /* Scrollable tabs on small screens 
    .nav-tabs-scroll {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }*/

    /* Optional: Stack tabs vertically on small screens */
    @media (max-width: 576px) {
      .nav-tabs-vertical {
        flex-direction: column;
      }
      .nav-tabs-vertical .nav-item {
        width: 100%;
        text-align: left;
      }
      .nav-tabs-vertical .nav-link {
        border: 1px solid #dee2e6 !important;
        border-bottom: none !important;
        border-radius: 0 !important;
      }
      .nav-tabs-vertical .nav-link.active {
        background-color: #0d6efd !important;
        color: white !important;
        border-color: #0d6efd !important;
      }
    }

    /* Spinner styling */
    .tab-spinner {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
    }

.audio-seekbar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    height: 10px;
  }

  /* Range thumb styling */
  .audio-seekbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #0d6efd; /* Bootstrap primary */
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
  }

  .audio-seekbar::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: #0d6efd;
    border-radius: 50%;
    cursor: pointer;
  }

  /* Range track styling */
  .audio-seekbar::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    background: rgba(13, 110, 253, 0.3); /* Bootstrap primary with opacity */
    border-radius: 5px;
  }

  .audio-seekbar::-moz-range-track {
    width: 100%;
    height: 10px;
    background: rgba(13, 110, 253, 0.3);
    border-radius: 5px;
  }

  /* Dark mode adjustments */
  @media (prefers-color-scheme: dark) {
    .audio-seekbar::-webkit-slider-runnable-track {
      background: rgba(13, 110, 253, 0.2);
    }
    
    .audio-seekbar::-moz-range-track {
      background: rgba(13, 110, 253, 0.2);
    }