/*
 * Copyright (c) 2024 Voxtell
 * All rights reserved.
 * 
 * This CSS file is protected under the Florida Statutes Chapter 501, Part II,
 * and Florida common law governing intellectual property rights and trade secrets.
 * Unauthorized copying, modification, distribution, or use of this file,
 * via any medium, is strictly prohibited.
 *
 * Any violation may result in civil and criminal penalties under
 * Florida state law.
 *
 * Version: 1.0
 * Last modified: 2024-11-14
 */

@import url("vt-shared.css?v=20260828");
@import url("vt-resets.css?v=20260828");
/* icon masks: the head include used to link this file; imported here it
   still lands in <head> after NS's stylesheets, which is all it needs */
@import url("vt-icons.css");

#vt-ns-plugin {
  height: 100% !important;
}

.ui-state-active,a,a:focus,a:hover {
  text-decoration: none
}

div#header-logo {
  /* In-Telecom's request of 2026-10-13 (their print): the full logo, large
     and centered above the menu, ~18px above it and ~36px to the first
     item (30px here + the list's 6px top padding) */
  display: flex;
  justify-content: center;
  width: auto;
  padding: 0;
  margin: 18px 0 30px;
}

div#header-logo img {
  /* the full In-Telecom logo (cloud mark over the stacked wordmark, their
     file of 2026-10-13, transparent), shipped with the theme instead of
     NetSapiens' served header image (an external dependency that
     occasionally fails). The file is trimmed to its artwork (their export
     carried ~22% transparent padding on every side); 137px wide, as the
     visible logo measures in their print. The collapsed rail switches to
     the cloud mark below. */
  content: url(img/itc-logo.png);
  width: 137px;
  height: auto;
}

body:has(#domain-message) .page-container > .wrapper {
  height: calc(100vh - 40px);
}

.page-container {
  padding-left: 0;
  padding-right: 0;

  background-color: var(--chakra-colors-bg-muted);

  & > .wrapper {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    max-width: none;
    padding: 0;
    background-color: transparent;
    height: 100dvh;
  }
}

#header-user {
  position: fixed;
  top: 8px;
  right: 24px;
  z-index: 1000;
  height: auto;
  padding-top: 0;
}

.user-toolbar {
  margin: 0;

  display: flex;
  align-items: center;

  gap: 8px;

  .nsicon, .icon {
    font-size: 15px;
    opacity: 0.6;
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin: 0;
    &:before {
      content: none;
    }
  }
  .nsicon-language {
    background-image: var(--icon-globe);
  }
  .nsicon-user {
    background-image: var(--icon-user-circle);
    /* the circled-user glyph has inner padding in its viewBox - optically
       match the other 13px toolbar icons */
    width: 16px;
    height: 16px;
  }

  .dropdown > .dropdown-msg-count {
    margin-left: 0 !important;
  }

  /* (count badge styling comes from the portal-wide .badge rules) */

  li {
    margin: 0 4px;
    a {
      color: var(--colors-gray-700);
      &:hover {
        color: var(--colors-fg);
      }
    }

    &.dropdown, .dropdown {
      display: inline-flex;
      align-items: center;
      gap: 4px;

      .dropdown-toggle {
        display: inline-flex;
        align-items: center;
      }

      .caret {
        margin: 0;
        display: none !important;
      }
    }
  }
  li:before {
    display: none;
  }
  li:hover .nsicon, li:hover .icon {
    opacity: 1;
  }
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  .caret {
    margin-top: 0;
  }
}

body:has(#domain-message) #header-user, body:has(.mask-bar) #header-user {
  top: 44px;
}

#header {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  margin: 0;
  width: 230px;
  box-sizing: border-box;

  #navigation {
    flex: 1;
    overflow-y: auto;
  }
}

#nav-buttons {
  /* first item aligns with Vee's first sidebar item (measured +6px) */
  padding-top: 6px;

  /* flex column purely so `order` can lift the Vee link under Home. The Vee
     plugin appends li#voxtell-vee to the END of this list dynamically - we
     only move it VISUALLY, never in the DOM, so the plugin's injection,
     click handler and loading state stay untouched. */
  display: flex;
  flex-direction: column;

  li:has(> a#LinkHomeIndex) { order: -3; }
  /* guarded on Home existing in this scope's nav - otherwise Vee keeps its
     natural (bottom) DOM position instead of jumping to the very top */
  &:has(a#LinkHomeIndex) li#voxtell-vee { order: -2; }
  /* Call Intelligence sits under Izzy (injected by vt-loader.js) */
  &:has(a#LinkHomeIndex) li#vt-ci-nav { order: -1; }

  li {
    display: block;
    margin-bottom: 2px;
  }

  /* section titles, styled to match Vee's "Assistants" group label
     (12px / 500 at 70% fg, ~20px breathing room above) */
  li:has(> a#LinkAgentsManager)::before,
  li:has(> a#LinkAgentsIndex)::before,
  li:has(> a#LinkAttendantsIndex)::before,
  li:has(> a#LinkInventoryIndex)::before {
    display: block;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: color-mix(in srgb, var(--chakra-colors-fg) 70%, transparent);
    padding: 18px 10px 6px;
  }

  /* domain-manager scope only (Auto Attendants exists just there) - without
     the guard the 'Team' title leaks into the call-center supervisor scope,
     which shares the LinkAgentsManager id */
  &:has(a#LinkAttendantsIndex) {
    li:has(> a#LinkAgentsManager)::before,
    li:has(> a#LinkAgentsIndex)::before { content: 'Team'; }
  }
  li:has(> a#LinkAttendantsIndex)::before { content: 'Call Flow'; }
  li:has(> a#LinkInventoryIndex)::before { content: 'Resources'; }

  /* call-center supervisor scope: has the Call Center item but no Auto
     Attendants */
  &:has(a#LinkAgentsManager):not(:has(a#LinkAttendantsIndex)) {
    li:has(> a#LinkUsersIndex)::before,
    li:has(> a#LinkMusicIndex)::before,
    li:has(> a#LinkCallhistoryIndex)::before {
      display: block;
      text-align: left;
      font-size: 12px;
      font-weight: 500;
      color: color-mix(in srgb, var(--chakra-colors-fg) 70%, transparent);
      padding: 18px 10px 6px;
    }

    li:has(> a#LinkUsersIndex)::before { content: 'Team'; }
    li:has(> a#LinkMusicIndex)::before { content: 'Call Flow'; }
    li:has(> a#LinkCallhistoryIndex)::before { content: 'Activity'; }
  }

  /* user (customer) scope - guarded by the Messages link, which only exists
     there, since some ids (e.g. Call History) also appear in the manager nav */
  &:has(a#LinkVoicemailsIndex) {
    li:has(> a#LinkVoicemailsIndex)::before,
    li:has(> a#LinkAnswerrulesIndex)::before,
    li:has(> a#LinkCallhistoryIndex)::before {
      display: block;
      text-align: left;
      font-size: 12px;
      font-weight: 500;
      color: color-mix(in srgb, var(--chakra-colors-fg) 70%, transparent);
      padding: 18px 10px 6px;
    }

    li:has(> a#LinkVoicemailsIndex)::before { content: 'Communications'; }
    li:has(> a#LinkAnswerrulesIndex)::before { content: 'Call Settings'; }
    li:has(> a#LinkCallhistoryIndex)::before { content: 'Activity'; }
  }

  /* the Vee entry (no id on its link) stands apart from the NS sections */
  li:has(> a.nav-link:not([id])) {
    margin-top: 18px;
  }

  /* measured against Vee's sidebar (2026-08-26): 30px items on a 32px pitch,
     ~14px regular-weight labels in gray-900, 17px icons in the same color */
  a.nav-link {
    text-align: left;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items:center;
    color: var(--chakra-colors-gray-900);
    border-radius: var(--chakra-radii-md);
    padding: 0 10px;
    height: 30px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    /* colors only - transitioning `all` tweened LAYOUT during the
       collapse/expand toggle (icons sliding, paddings morphing), which read
       as duplicated content; the rail's width slide is the only motion */
    transition-property: background-color, color;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;

    .nav-button, .nav-arrow {
      display: none;
    }

    .nav-bg-image {
      display: block;
      width: 17px;
      height: 17px;
      position: static;
      /* mask icons follow the link's text color; no extra fade needed */
      opacity: 1;
      transition-property: background-color;
      transition-duration: 0.15s;
      transition-timing-function: ease-in-out;
    }

    .nav-text {
      display: inline;
      width: auto;
      height: auto;
      color: inherit;
      margin: 0;
      text-shadow: none !important;
    }

    &:hover {
      color: var(--chakra-colors-sidebar-accent-fg);
      background-color: var(--chakra-colors-sidebar-accent-bg);

      .nav-bg-image {
        opacity: 1;
      }
    }
  }

  .nav-link-current .nav-link {
    color: var(--chakra-colors-sidebar-accent-fg);
    background-color: var(--chakra-colors-sidebar-accent-bg);

    .nav-bg-image {
      opacity: 1;
    }
  }
}

#navigation-subbar {
  display: none;
}

/* Pre-paint gating without a head hook (remote hosting): the manager home
   is recognized by its own markup (#omp-usage-stats exists only on the OMP
   and Site Manager home views), so the stock panels are hidden from the
   first frame; the dashboard bundle confirms with vt-dash-active (or CI with
   vt-ci-active) and the loader opts out with vt-dash-off (Site Manager, Vee
   routes, bundle failed to load). If nothing confirms within 6 s (loader or
   bundle failed), the animation reveals the stock home again: never a blank
   page. */
html:not(.vt-dash-off):not(.vt-dash-active):not(.vt-ci-active):has(#omp-usage-stats) #content > *:not(#vt-dash-host):not(#vt-ci-host):not(#vt-ns-plugin) {
  visibility: hidden;
  animation: vt-stock-reveal 0s linear 6s forwards;
}
@keyframes vt-stock-reveal {
  to { visibility: visible; }
}

/* mounted: the stock panels leave the layout for good. Call Intelligence
   (#vt-intelligence on manager home) has the same contract; the dashboard
   host is a #content child, so it hides with the rest there. */
html.vt-dash-active #content > *:not(#vt-dash-host):not(#vt-ns-plugin) {
  display: none !important;
}
html.vt-ci-active #content > *:not(#vt-ci-host) {
  display: none !important;
}
/* active state hides the Vee container too: after a Vee visit its plugin
   stays in #content, and Call Intelligence would render beneath it. The
   boot rule keeps the exemption (pre-paint must never blank Vee). Leaving
   CI removes vt-ci-active, so Vee reappears untouched. */

/* Call Intelligence nav icon: painted with the brand gradient (violet ->
   orange, DESIGN.md). Higher specificity than the shared icon rule, so it
   wins among the !important declarations regardless of file order. */
#nav-buttons #vt-ci-link .nav-bg-image {
  background-image: linear-gradient(135deg, #17438E, #38b1e6) !important;
}

/* Beta pill on the Call Intelligence nav entry - identical treatment to the
   Vee plugin's "New" badge (span.nav-badge, measured live 2026-08-29) */
.vt-nav-pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  padding: 0 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #17438E, #38b1e6);
  color: #fff;
  flex-shrink: 0;
}
html.vt-nav-collapsed #vt-ci-link .vt-nav-pill {
  display: none;
}

/* reserved slot: identical box to a nav item (30px + 2px margin, order -1
   = the CI position under Izzy), shown from the first frame whenever the
   manager nav is present and the real entry has not landed, so the menu
   never shifts. The loader adds vt-ci-noslot for scopes that get no Call
   Intelligence (it runs once the page has parsed: tens of ms). */
html:not(.vt-ci-noslot):has(#nav-buttons a#LinkAttendantsIndex) #nav-buttons:not(:has(li#vt-ci-nav))::before {
  content: '';
  display: block;
  height: 30px;
  margin-bottom: 2px;
  order: -1;
  /* the loader releases it; if the loader never runs, release it anyway
     (same 6 s window as the stock home) so no blank gap is left behind */
  animation: vt-slot-release 0s linear 6s forwards;
}
@keyframes vt-slot-release {
  to { height: 0; margin-bottom: 0; }
}

/* Izzy's icon and "New" badge: Vee inlines Voxtell's purple on both
   (color #593CFB on the icon box, a purple-to-pink gradient on the badge).
   In-Telecom's theme gives them the same navy-to-sky treatment as Call
   Intelligence; inline styles only yield to !important. One sparkles
   image with the gradient baked in is shared by the real row and the
   placeholder below, so the two are pixel-identical. */
:root {
  --vt-izzy-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2317438E%22/%3E%3Cstop offset=%221%22 stop-color=%22%2338b1e6%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill=%22url%28%23g%29%22 d=%22M327.5 85.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L384 128l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L448 128l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L448 64 426.8 7.5C425.1 3 420.8 0 416 0s-9.1 3-10.8 7.5L384 64 327.5 85.2zM9.3 240C3.6 242.6 0 248.3 0 254.6s3.6 11.9 9.3 14.5L26.3 277l8.1 3.7 .6 .3 88.3 40.8L164.1 410l.3 .6 3.7 8.1 7.9 17.1c2.6 5.7 8.3 9.3 14.5 9.3s11.9-3.6 14.5-9.3l7.9-17.1 3.7-8.1 .3-.6 40.8-88.3L346 281l.6-.3 8.1-3.7 17.1-7.9c5.7-2.6 9.3-8.3 9.3-14.5s-3.6-11.9-9.3-14.5l-17.1-7.9-8.1-3.7-.6-.3-88.3-40.8L217 99.1l-.3-.6L213 90.3l-7.9-17.1c-2.6-5.7-8.3-9.3-14.5-9.3s-11.9 3.6-14.5 9.3l-7.9 17.1-3.7 8.1-.3 .6-40.8 88.3L35.1 228.1l-.6 .3-8.1 3.7L9.3 240zm83 14.5l51.2-23.6c10.4-4.8 18.7-13.1 23.5-23.5l23.6-51.2 23.6 51.2c4.8 10.4 13.1 18.7 23.5 23.5l51.2 23.6-51.2 23.6c-10.4 4.8-18.7 13.1-23.5 23.5l-23.6 51.2-23.6-51.2c-4.8-10.4-13.1-18.7-23.5-23.5L92.3 254.6zM384 384l-56.5 21.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L384 448l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L448 448l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L448 384l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L384 384z%22/%3E%3C/svg%3E");
}
#nav-buttons #voxtell-vee .nav-bg-image {
  color: transparent !important; /* Vee's inline svg fills with currentColor */
  background: var(--vt-izzy-icon) center / 14px 14px no-repeat !important;
}
#nav-buttons #voxtell-vee .nav-badge {
  background: linear-gradient(to right, #17438E, #38b1e6) !important;
}

/* Izzy's sidebar entry (li#voxtell-vee) is injected by the Vee plugin once
   its script has loaded (several MB, async, no animation of its own): the
   row's icon, label and "New" badge pop into view a moment after the menu
   paints, on every page change. So the reserved space is not left empty:
   a look-alike row (same box, icon, label and badge as Vee renders with
   this theme present) is drawn inside the Home item from the first paint
   and removed the instant the real entry lands, so nothing appears to
   change. Keyed on the manager-nav markup so it holds from the very first
   paint; the loader adds vt-vee-noslot at once on pages that do not chain
   Vee (and for Super Users, for whom Vee refuses to load); 6 s collapses
   it if Vee never injects. Not clickable (the real entry is). */
html:not(.vt-vee-noslot) #nav-buttons:has(a#LinkAttendantsIndex):not(:has(li#voxtell-vee)) li:has(> a#LinkHomeIndex) {
  position: relative;
  display: flow-root; /* no margin collapsing: the row box stays 18+30+2 */
}
html:not(.vt-vee-noslot) #nav-buttons:has(a#LinkAttendantsIndex):not(:has(li#voxtell-vee)) li:has(> a#LinkHomeIndex)::after {
  content: 'Izzy';
  display: flex;
  align-items: center;
  box-sizing: border-box;
  /* measured against the real row (2026-10-09): it sits 20px below Home
     (Home's 2px item spacing + the 18px separator that
     li:has(> a.nav-link:not([id])) gives the Vee entry); inside the Home
     item the copy carries both, and nothing below it (Home's own 2px
     spacing follows) */
  margin-top: 20px;
  height: 30px;
  margin-bottom: 0;
  padding: 0 10px 0 35px; /* 10px row padding + 17px icon box + 8px gap */
  border-radius: var(--chakra-radii-md);
  font-size: 14px;
  font-weight: 400;
  line-height: 15px; /* measured .nav-text line box */
  color: var(--chakra-colors-gray-900);
  /* the 14px glyph at 11.5px/8px, as Vee's 1em svg sits in its 17px box */
  background: var(--vt-izzy-icon) 11.5px 8px / 14px 14px no-repeat;
  /* box only, until the page is known to carry Vee (the reveal rule below):
     pages the loader will release never show a product name, just an
     empty row that closes when the loader runs */
  color: transparent;
  background-size: 0 0;
  overflow: hidden;
  animation: vt-vee-slot-release 0s linear 6s forwards;
}
/* reveal the copy's content as soon as a tag whose src carries vee.js is in
   the DOM: our loader tag with Vee in its ?also=, parsed before its fetch,
   so this lands with the first frame on cached pages and well before Vee
   itself arrives on every page */
html:not(.vt-vee-noslot):has(script[src*="vee.js"]) #nav-buttons:has(a#LinkAttendantsIndex):not(:has(li#voxtell-vee)) li:has(> a#LinkHomeIndex)::after {
  color: var(--chakra-colors-gray-900);
  background-size: 14px 14px;
}
html:not(.vt-vee-noslot):has(script[src*="vee.js"]) #nav-buttons:has(a#LinkAttendantsIndex):not(:has(li#voxtell-vee)) li:has(> a#LinkHomeIndex)::before {
  visibility: visible;
}
/* the "New" badge, Vee's geometry (span.nav-badge) in the theme's colors */
html:not(.vt-vee-noslot) #nav-buttons:has(a#LinkAttendantsIndex):not(:has(li#voxtell-vee)) li:has(> a#LinkHomeIndex)::before {
  content: 'New';
  position: absolute;
  right: 10px;
  bottom: 5px; /* (30px row - 20px badge) / 2, no margin below the copy */
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  padding: 0 4px;
  border-radius: 4px;
  color: #fff;
  background: linear-gradient(to right, #17438E, #38b1e6); /* the Call Intelligence pill gradient */
  visibility: hidden; /* until the page is known to carry Vee (reveal rule) */
  animation: vt-vee-pill-release 0s linear 6s forwards;
}
@keyframes vt-vee-slot-release {
  to { height: 0; margin-top: 0; margin-bottom: 0; }
}
@keyframes vt-vee-pill-release {
  to { visibility: hidden; }
}

/* Call Intelligence rides the home URL, so NS also marks Home current -
   unpaint Home while CI is the visible page (hover still works). On a
   full load into CI the loader marks the entry current as soon as it runs. */
#nav-buttons:has(li#vt-ci-nav.nav-link-current) li.nav-link-current:has(> a#LinkHomeIndex) > a.nav-link:not(:hover) {
  color: var(--chakra-colors-gray-900);
  background-color: transparent;
}

/* ---- collapsible side nav (vt-loader.js toggles html.vt-nav-collapsed) ---- */

/* animate only on real toggle clicks (vt-loader.js sets vt-nav-anim), never on
   page load - otherwise a collapsed nav visibly retracts on every navigation */
html.vt-nav-anim #header {
  transition: width 0.2s ease-in-out;
}

/* keep labels/titles from wrapping into the animating rail - they clip
   cleanly at the edge instead of reflowing mid-transition. Scoped to the
   animation (vt-loader.js removes the class on transitionend): steady states
   must NOT clip, or the collapsed rail's tooltips get cut off. */
html.vt-nav-anim #header {
  overflow: hidden;
}

/* ...and no scrollbar may FLASH anywhere while layout reflows through the
   0.2s slide - every scroll container pauses for the animation (the class
   is removed on transitionend, restoring normal scrolling) */
html.vt-nav-anim,
html.vt-nav-anim body,
html.vt-nav-anim #content,
html.vt-nav-anim #header #navigation {
  overflow: hidden !important;
}

#nav-buttons a.nav-link,
#nav-buttons li::before {
  white-space: nowrap;
}

/* collapse toggle: a discoverable footer row (icon + label + hairline),
   not a bare ghost icon - team testing showed nobody found the old one. */
#vt-nav-toggle {
  margin-top: auto; /* anchored to the bottom of the rail */
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  flex-shrink: 0;
  border: none;
  border-top: 1px solid var(--chakra-colors-border-muted);
  border-radius: 0;
  padding: 0 10px;
  background: transparent;
  color: var(--chakra-colors-fg-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* toggle slot: hold its 41px box (40 + hairline) until vt-loader.js creates
   it at the end of the page, so nothing above it moves */
#header:not(:has(#vt-nav-toggle))::after {
  content: '';
  display: block;
  box-sizing: border-box; /* toggle is border-box: 40px includes its hairline */
  height: 40px;
  flex-shrink: 0;
  border-top: 1px solid var(--chakra-colors-border-muted);
  align-self: stretch;
  margin-top: auto;
}

/* Short-window scrolling: NS's #navigation is the scroller between the
   pinned logo and footer. Kill the scrollbar chrome (it also ate 15px of
   rail width); a soft edge fade (classes flipped by vt-loader.js) says
   "there is more" instead and vanishes at the list ends. Wheel, trackpad
   and keyboard scrolling all keep working. */
#header #navigation {
  scrollbar-width: none;
}
#header #navigation::-webkit-scrollbar {
  display: none;
}
#header #navigation.vt-fade-b {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}
#header #navigation.vt-fade-t {
  -webkit-mask-image: linear-gradient(transparent, #000 28px);
  mask-image: linear-gradient(transparent, #000 28px);
}
#header #navigation.vt-fade-t.vt-fade-b {
  -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

#vt-nav-toggle::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--vt-icon-goback) center / 18px no-repeat;
  mask: var(--vt-icon-goback) center / 18px no-repeat;
}

#vt-nav-toggle::after {
  content: 'Collapse';
}

#vt-nav-toggle:hover {
  color: var(--chakra-colors-fg);
  background: var(--chakra-colors-bg-muted);
}

html.vt-nav-collapsed {
  #header {
    width: 58px;
    padding-left: 8px;
    padding-right: 8px;
    /* tooltips overhang the rail - sit above #content */
    position: relative;
    z-index: 20;
  }

  /* the scroll container would clip the overhanging tooltips; the icon rail
     is short enough to never need scrolling. (#header prefix: must outrank
     the base `#header #navigation` overflow-y:auto rule) */
  #header #navigation {
    overflow-y: visible;
  }

  /* styled tooltip replacing the native title (dark pill to the right of the
     icon; slight show delay so sweeping the rail doesn't flicker) */
  #nav-buttons a.nav-link {
    position: relative;
  }
  #nav-buttons a.nav-link::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    translate: 0 -50%;
    background: var(--chakra-colors-gray-900);
    color: var(--chakra-colors-bg-panel);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 9px;
    border-radius: var(--chakra-radii-md);
    box-shadow: var(--chakra-shadows-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease 0s;
    z-index: 30;
  }
  #nav-buttons a.nav-link:hover::after {
    opacity: 1;
    transition-delay: 0.25s;
  }

  /* compact brand mark (the wordmark's speech-bubble 'o') replaces the full
     wordmark. Same 37px block height and left anchor as the wordmark, so
     nothing below shifts between states - and the mark's center lands on the
     collapsed icon column axis. */
  div#header-logo {
    height: 37px;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 10px;
  }

  #nav-buttons {
    padding-top: 0;
  }

  /* the 18px Vee group margin is an expanded-mode separator - in the rail
     it doubled the Home->Vee gap and broke the rhythm */
  #nav-buttons li:has(> a.nav-link:not([id])) {
    margin-top: 0;
  }
  /* Izzy placeholder in the rail: icon only, centered, no separator, no badge */
  html:not(.vt-vee-noslot) #nav-buttons:has(a#LinkAttendantsIndex):not(:has(li#voxtell-vee)) li:has(> a#LinkHomeIndex)::after {
    content: '';
    margin-top: 2px; /* no separator in the rail, just the item spacing */
    padding: 0;
    background-position: center;
  }
  html:not(.vt-vee-noslot) #nav-buttons:has(a#LinkAttendantsIndex):not(:has(li#voxtell-vee)) li:has(> a#LinkHomeIndex)::before {
    display: none;
  }

  div#header-logo img {
    content: url(img/itc-mark.png);
    /* the cloud mark is 2:1 wide: 50px fills the 58px rail (~25px tall) */
    width: 50px;
    height: auto;
  }

  #nav-buttons {
    a.nav-link {
      justify-content: center;
      padding: 0;
      gap: 0;

      .nav-text {
        display: none;
      }

      /* the Vee "New" badge and similar trailing chips. NS icons are <img>
         but the Call Intelligence entry uses <span class="nav-bg-image"> -
         icon spans must survive */
      span:not(.nav-text):not(.nav-bg-image), img:not(.nav-bg-image) {
        display: none;
      }
    }

    /* section titles collapse to thin separators - scoped to the lis that
       actually carry titles: the old bare li::before forced an empty pseudo
       (and its ~20px line box) onto EVERY item, inflating the rail pitch
       from 32px to 52px */
    li:has(> a#LinkAgentsManager)::before,
    li:has(> a#LinkAgentsIndex)::before,
    li:has(> a#LinkAttendantsIndex)::before,
    li:has(> a#LinkInventoryIndex)::before,
    li:has(> a#LinkUsersIndex)::before,
    li:has(> a#LinkMusicIndex)::before,
    li:has(> a#LinkCallhistoryIndex)::before,
    li:has(> a#LinkVoicemailsIndex)::before,
    li:has(> a#LinkAnswerrulesIndex)::before {
      content: '' !important;
      padding: 0 !important;
      display: block;
      height: 1px;
      line-height: 0;
      background: var(--chakra-colors-border);
      margin: 10px 8px;
    }
  }

  #vt-nav-toggle {
    justify-content: center;
    padding: 0;

    &::after {
      display: none;
    }

    &::before {
      transform: rotate(180deg);
    }
  }
}

#content {
  --header-height: 44px;

  box-sizing: border-box;
  background-color: var(--chakra-colors-bg-panel);
  box-shadow: var(--chakra-shadows-xs);
  border-top-left-radius: var(--chakra-radii-xl);
  border-left: 1px solid var(--chakra-colors-border);
  border-top: 1px solid var(--chakra-colors-border);
  /* a touch more side breathing room than the stock 20px; the sticky tab
     bleed mirrors this var */
  --vt-content-pad: clamp(24px, 5vw, 100px);
  padding: 10px var(--vt-content-pad) 40px var(--vt-content-pad);
  margin-top: var(--header-height);
  height: calc(100% - var(--header-height));
  min-height: auto;
  flex: 1;
  overflow-y: auto;

  &:has(> .nav-tabs) {
    padding-top: 0;
  }

  & > .nav-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--chakra-colors-bg-muted);
    margin-left: calc(-1 * var(--vt-content-pad));
    margin-right: calc(-1 * var(--vt-content-pad));
    padding: 10px var(--vt-content-pad) 0;

    .active > a {
      background-color: var(--chakra-colors-bg-panel);
    }

    a:hover {
      color: var(--chakra-colors-fg);
      background-color: var(--chakra-colors-gray-200);
    }
  }
}

h4, h5 {
  font-weight: 500;
}

h6 {
  color: var(--colors-fg);
  text-transform: none;
  font-weight: 500;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -12px;
  margin-right: -12px;
  font-size: 1.1em;
}

.home-panel-main h6 a {
  color: var(--colors-fg);
}

.home-sidebar .h6-subheader  {
  color: var(--colors-fg);
}

.agents-panel-home h6 {
  margin-left: 0;
  margin-right: 0;
}

.table {
  .tableFloatingHeaderOriginal {
    display: none !important;
  }
  .tableFloatingHeader {
    position: sticky;
    z-index: 1;
    top: 0;
    display: table-header-group !important;
    background-color: var(--colors-white);
    border: 0;
  }
  th {
    font-weight: 500;
    font-size: 12px;
    color: var(--chakra-colors-fg-muted);
    background-color: transparent;
  }
}

.stats-table {
  tr {
    display: flex;
    flex-direction: row-reverse;
  }

  .label-popover {
    color: var(--colors-fg-subtle);
  }
}

.dash-stats-label-row {
  td {
    height: 24px;
  }
}

.rounded {
  background-color: var(--chakra-colors-bg-panel);
  box-shadow: var(--chakra-shadows-xs);
  border: 1px solid var(--chakra-colors-border);
  border-radius: var(--chakra-radii-xl);
  padding: 0 12px 8px;
  margin-bottom: 16px !important;
}

.nonecreated h3 {
  font-size: 1.4em;
  color: var(--colors-fg-subtle);
  font-weight: 600;
}

.modal-header-settings:has(~ .nav-tabs) {
  position: sticky;
  top: 0;
  z-index: 20;

  padding: 0 !important;
  border-width: 0 !important;

  .pull-right {
    padding-top: 6px;
  }
}

#footer {
  display: none;
}

iframe[name="print_frame"] {
  position: absolute;
}

.ui-datepicker td .ui-state-hover {
  color: #fff;
  background: var(--colors-primary-600);
  background-color: var(--colors-primary-400)!important;
  background-repeat: repeat-x;
  background-image: none;
  text-shadow: none;
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
  border-radius: 4px
}

.range1, .range3, .ui-slider-range {
  background: var(--colors-primary-600)!important
}

.ui-slider-handle.ui-state-active {
  background: var(--colors-gray-300)!important
}

.saving{
  color:white!important
}

#form-user-search>div>button>i,.icon-remove.icon-white,.icon-th,.playing.helpsy,.round-message,.round-reply {
  background-position: center
}

#form-user-search>div>button>i,.icon-remove.icon-white,.nsicon-more:before,.playing.helpsy,.round-message,.round-reply {
  background-repeat: no-repeat
}

.playing.helpsy {
  background-image: var(--icon-stop)!important
}

.dropdown .caret {
  margin-inline-start: 4px;
  border-top-color: var(--colors-gray-500);
  border-bottom-color: var(--colors-gray-500)
}

.form-search .input-append > .btn {
  height: 30px;
}

.form-search .input-append > .btn > i {
  background-image: var(--icon-search)!important;
  background-repeat: no-repeat;
  background-position: center
}

#form-user-search>div>a>.icon-remove {
  background-image: var(--icon-close-black)!important;
  background-repeat: no-repeat;
  background-position: center
}

/* bottom action bars (Save/Cancel): the scrollToFixed plugin pins them with
   stale geometry (wrong left/width for this layout), and the legacy 300px
   padding compensated for a toolbar that no longer exists. Pin them cleanly
   across the content area instead, aware of the collapsible sidebar. */
.affix-form-actions {
  margin-left: 0;
  margin-right: 0;
  padding: 14px 24px !important;
  background-color: var(--chakra-colors-bg-panel);
  /* a single hairline above the buttons - no shadow: the sm shadow's 1px
     ring component reads as a second hairline under the bar */
  border-top: 1px solid var(--chakra-colors-border);
}


.form-actions.scroll-to-fixed-fixed {
  left: 230px !important;
  right: 0 !important;
  width: auto !important;
  bottom: 0 !important;
  margin: 0 !important;
  /* keep the action buttons clear of the NS contacts dock pinned bottom-right */
  padding-left: clamp(24px, 5vw, 100px) !important;
  padding-right: 310px !important;
}

html.vt-nav-collapsed .form-actions.scroll-to-fixed-fixed {
  left: 58px !important;
}

/* split Save button: join the two halves into one pill (specificity must
   outrank the 4-class accent restyle that re-rounds all corners) */
.btn-group > .btn.btn-primary.btn-save.btn-combo-save {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn + .btn.btn-primary.dropdown-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
  border-left: 1px solid var(--chakra-colors-white-alpha-400);
}

.rounded {
  border: 1px solid var(--colors-border-base);
}

.icon-remove.icon-white {
  background-image: var(--icon-close-white)
}

.round-message {
  background-image: var(--icon-chat)
}

.round-reply {
  background-image: var(--icon-reply)
}

.badge-info,.label-info {
  background-color: var(--chakra-colors-green-500)
}

.badge-inverse,.label-inverse {
  background-color: var(--chakra-colors-red-500)
}

.nsicon-more:before {
  content: "\e926";
  visibility: hidden;
  background-position: bottom
}

.dropdown-menu {
  border-radius: var(--chakra-radii-xl);
  border: 1px solid var(--chakra-colors-border);
  box-shadow: var(--chakra-shadows-lg);
  padding: 4px;
}

.dropdown-menu .divider {
  margin: 4px 0;
  border-bottom-color: var(--chakra-colors-border-muted);
}

.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover,.dropdown-submenu:focus>a,.dropdown-submenu:hover>a {
  color: var(--chakra-colors-fg);
  text-decoration: none;
  background-color: var(--chakra-colors-gray-200);
  background-image: none;
  border-radius: var(--chakra-radii-lg);
}

.ui-state-active {
  color: #fff;
  background-color: var(--colors-primary-600) !important;
  background-image: none;
}

.iconfont-comment {
  display: none
}

.icon-th {
  background-image: var(--icon-apps)
}

.uneditable-input:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,textarea:focus {
  border-color: var(--chakra-colors-accent-focus-ring);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chakra-colors-accent-focus-ring) 25%, transparent);
}

.rounded,.wrapper {
  box-shadow: 0 0 0 rgb(0 72 255)!important
}

/* read-only field chips: NS sets line-height: inherit, which picks up the
   row's 30px inside a 28px box and hangs the text low (e.g. the queue
   modal's Direct Phone Number) - center on the 20px content height */
.uneditable-input {
  line-height: 20px;
}

/* Call History: NS renders the transcription columns (sentiment, closing
   sentiment, topics) and only .hide()s the deselected ones a beat after
   DOM-ready, so wherever the sentiment vendor is configured they flash on
   load. Hide them from the first frame on that page (the nav marks it
   current before #content parses); vt-loader.js adds vt-ch-ready once NS's
   column setup has applied the real state (~150 ms in). If the loader never
   runs, the animation releases the columns at 6 s (no !important here: it
   would beat the animation). */
html:not(.vt-ch-ready):has(li.nav-link-current > a[id^="LinkCallhistory"]) .sentiment,
html:not(.vt-ch-ready):has(li.nav-link-current > a[id^="LinkCallhistory"]) .closing_sentiment,
html:not(.vt-ch-ready):has(li.nav-link-current > a[id^="LinkCallhistory"]) .topics {
  visibility: hidden;
  animation: vt-ch-release 0s linear 6s forwards;
}
@keyframes vt-ch-release {
  to { visibility: visible; }
}

/* profile Single Sign-On: retire the stray red "Failed to initialize
   Google SSO application" note. The profile's Google connect still calls
   the retired gapi.auth2 library, whose init always fails and shows this
   permanently; NS gives it margin-bottom:-16px, so it renders half-hidden
   behind the SSO delete button. Real failures still log to the console.
   (Login page unaffected - its error lives outside .profile-panel-main.) */
.profile-panel-main #clientError {
  display: none !important;
}

.mask {
  background: var(--icon-eye);
  background-position: center;
  background-repeat: no-repeat
}

.audio,.blocked,.conference-inbound,.conference-outbound,.copy,.details,.download-report,.inbound,.listen,.missed,.mute,.outbound,.rename,.reports,.save,.upload {
  background-repeat: no-repeat
}

.uiconfig-span-description {
  color: var(--chakra-colors-fg-muted)
}

.btn-primary.active,.btn-primary.disabled,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.btn-primary[disabled] {
  color: #fff;
  background: var(--colors-primary-600)
}

.icon-call {
  background-position: bottom;
  background-image: var(--icon-phone)
}
.icon-call.icon-white {
  background-position: bottom;
  background-image: var(--icon-phone-white)
}

.icon-ok-sign {
  background-position: center;
  background-image: var(--icon-check);
}

.icon-remove-sign {
  background-position: center;
  background-image: var(--icon-remove);
}

.add,.audio,.blocked,.conference-inbound,.conference-outbound,.copy,.details,.download-report,.edit.forward.helpsy,.forward,.inbound,.listen,.missed,.mute,.outbound,.rename,.reports,.save,.upload {
  background-position: center
}

/* default link affordance: actionable text reads accent, confirms on hover.
   Components with their own link treatments (nav, buttons, menus, toolbar)
   override this with more specific rules. */
a {
  color: var(--chakra-colors-accent-fg);
  padding: 2px
}

a:hover, a:focus {
  color: var(--chakra-colors-voxtell-800);
  text-decoration: underline;
}

/* ...but icon-only anchors and tab strips are not text links: icons are
   mask-painted by currentColor (accent turned them violet on the Auto
   Attendant dial pad), and tabs are self-evident actions. Keep both neutral. */
a.aa-action-button, .nav-tabs a, .nav-pills a {
  color: var(--chakra-colors-fg);
}
a.aa-action-button:hover, a.aa-action-button:focus,
.nav-tabs a:hover, .nav-tabs a:focus,
.nav-pills a:hover, .nav-pills a:focus {
  color: var(--chakra-colors-fg);
  text-decoration: none;
}

/* content area: breathe below the header hairline (NS default was 10px) */
#content {
  padding-top: 24px;
}

/* Save/Cancel footer: retire Bootstrap's detached gray form-actions band -
   transparent, separated by a hairline, actions anchored right (primary
   outermost, SaaS convention). :has(button) guard: NS also stamps
   .form-actions on plain header bands (e.g. the AA editor's column
   headers), which must keep their stock layout. */
.form-actions:not(.dropdown-menu):has(> .btn),
.form-actions:not(.dropdown-menu):has(> button),
.form-actions:not(.dropdown-menu):has(> input[type='submit']) {
  background: transparent;
  border-top: 1px solid var(--chakra-colors-border-muted);
  margin-top: 24px;
  padding: 16px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* THE DEFAULT: footer children order by SEMANTIC ROLE, never DOM position -
   NS pages emit these in every order (users tabs: Save,Cancel,Back;
   VOXbuilder: Back,Save,Cancel,text; AA editor: Save,Cancel). Back/nav
   holds the left edge, info text then Cancel then primary Save rightmost. */
.form-actions > input[type='submit'],
.form-actions > .color-primary,
.form-actions > .btn-primary,
.form-actions > .btn-group { order: 3; }
.form-actions > .btn.cancel,
.form-actions > .cancel { order: 2; }
.form-actions > .read-only-msg { order: 1; margin-right: 2px; }
.form-actions > .back-btn,
.form-actions > .pull-left { order: 0; margin-right: auto; }

/* NS pulls .back-btn -260px left to undo form-wide's 280px footer indent
   (portal.php). Our footer has no indent - the pull drags the button over
   the sidebar. Same selector, later sheet: neutralize. */
.form-horizontal.form-wide .form-actions .back-btn {
  margin-left: 0;
}

/* a form-actions with NO controls is an informational note (e.g. the
   answering-rules "calls will ring your extension" line) - a quiet themed
   chip instead of Bootstrap's full-width gray slab */
.form-actions:not(.attendant-header):not(:has(.btn, button, input, select, a)) {
  background: var(--chakra-colors-bg-muted);
  border: 1px solid var(--chakra-colors-border-muted);
  border-top: 1px solid var(--chakra-colors-border-muted);
  border-radius: var(--chakra-radii-lg);
  width: fit-content;
  padding: 10px 16px;
  margin: 16px 0 0;
}
.form-actions:not(.attendant-header):not(:has(.btn, button, input, select, a)) h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--chakra-colors-fg-muted);
}

/* Answering rules: NS reserves a 420px panel and pins its footer to the
   bottom (portal.php .rules-panel-main) - which strands the buttonless
   note ~390px below the table. When the footer is that note, collapse the
   reserved space and let the note sit in flow under the table. */
.rules-panel-main:has(> .form-actions:not(:has(.btn, button, input, select, a))) {
  min-height: 0;
  padding-bottom: 0;
}
.rules-panel-main > .form-actions:not(:has(.btn, button, input, select, a)) {
  position: static;
}

/* ...but a FIXED footer (VOXbuilder's affixed Save bar) needs a solid
   surface - page content scrolls behind it otherwise */
.form-actions.affix-form-actions,
.form-actions.scroll-to-fixed-fixed {
  /* !important: must outrank the :has()-boosted transparent footer rule */
  background: var(--chakra-colors-bg-panel, #fff) !important;
  z-index: 100;
}

/* affixed variants keep side padding when pinned full-width */
.form-actions.affix-form-actions:has(> .btn),
.form-actions.affix-form-actions:has(> button) {
  padding-inline: 24px;
}

/* Auto Attendant editor: NS reserves 310px whether or not the menu editor
   is open, stranding the Save/Cancel footer mid-page. The editor grows on
   its own; let the footer sit under the actual content. */
.attendant-creation {
  min-height: 0;
}

/* AA editor selected state: retire the gray speech-pointer triangles - the
   active key and its action icon read accent, with a tab-style bar below */
.aa-action-button .arrow,
.aa-action-button .arrow-border {
  display: none !important;
}
.aa-action-button div.selected,
.aa-action-button:has(div.selected) .app-icon {
  color: var(--chakra-colors-accent-solid) !important;
}
.aa-action-button:has(div.selected)::after {
  content: '';
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--chakra-colors-accent-solid);
  margin: 5px auto 0;
}

.btn.color-primary {
  background-image: none;
  color: #fff;
  background-color: var(--colors-primary-600);
  border-width: 0;
  text-shadow: none;

  &:hover {
    border-width: 0;
    background-color: var(--colors-primary-700) !important;
  }
}

.glyphicon-small-cogwheel,.manage {
  background-position: center
}

.dialpad div[class*=key-] {
  background-image: none
}

.dial-pad-actions {
  .dial-pad-call {
    color: var(--colors-white);
    background-color: var(--colors-primary-600);
    &:hover {
      background-color: var(--colors-primary-700);
    }
  }
  .dial-pad-from-btn {
    color: var(--colors-white);
    background-color: var(--colors-primary-600);
    &:hover {
      background-color: var(--colors-primary-700);
    }
  }
}

#domain-message, .mask-bar {
  background: var(--colors-primary-600);
  border: none;
  color: white;
  box-shadow: none;

  .domain-message-buttons {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.mute {
  background-image: var(--icon-mute)
}

.details {
  background-image: var(--icon-details)
}

.edit.forward.helpsy,.forward {
  background-image: var(--icon-arrow-right);
  background-repeat: no-repeat
}

.audio,.listen {
  background-image: var(--icon-music)
}

.save {
  background-image: var(--icon-save)
}

.conference-inbound {
  background-image: var(--icon-conference-inbound)
}

.conference-outbound {
  background-image: var(--icon-conference-outbound)
}

.blocked {
  background-image: var(--icon-blocked)
}

.missed {
  background-image: var(--icon-missed)
}

.inbound {
  background-image: var(--icon-inbound)
}

.outbound {
  background-image: var(--icon-outbound)
}

.download-report {
  background-image: var(--icon-download-report)
}

.rename {
  background-image: var(--icon-rename)
}

.upload {
  background-image: var(--icon-upload)
}

.reports {
  background-image: var(--icon-reports)
}

.copy {
  background-image: var(--icon-copy)
}

.add {
  background-image: var(--icon-add);
  background-repeat: no-repeat!important
}

.del {
  background-image: var(--icon-delete);
  background-position: center;
}

input.btn.btn-primary.span2.saving {
  background-color: var(--chakra-colors-voxtell-700);
  background-image: none;
}

.dock-head {
  background-color: var(--colors-black)
}
.dock-column.dock-contacts {
  width: 280px;
}

#navigation-subbar,.selectivity-multiple-selected-item,.selectivity-result-item.highlight {
  background: var(--colors-primary-500)!important
}

.download-audio,.play,.sort-icon,i.icon-remove.icon-black,i.nsicon.nsicon-answer-call,span.icon-facetime-video,span.nsicon.nsicon-more {
  background-position: center
}

.selectivity-multiple-input {
  width: 100%!important
}

.selectivity-result-item.highlight {
  color: #fff
}

i.icon-remove.icon-black {
  background-image: var(--icon-delete)
}

span.icon-facetime-video {
  background-image: var(--icon-camera)
}

span.nsicon.nsicon-more {
  background-repeat: no-repeat;
  background-image: var(--icon-vertical-menu)
}

i.nsicon.nsicon-add-participant {
  background-position: center;
  content: var(--icon-useradd);
  height: 16px;
  width: 16px
}

i.nsicon.nsicon-answer-call {
  content: var(--icon-phone);
  height: 14px;
  width: 14px
}

.download-audio {
  background-image: var(--icon-download)
}

.play {
  background-image: var(--icon-play)
}

.sort-icon {
  height: 20px;
  background-image: var(--icon-dragdrop)!important
}

.icon-info-sign {
  opacity: .6;
  background-image: var(--btn-info)!important;
  background-position: top;
  height: 11px
}

.icon-maximize,.icon-minimize,.icon-print,.icon-refresh {
  background-position: center
}

.icon-refresh {
}

.icon-print {
}

.icon-minimize {
}

.icon-maximize {
}

.icon-comment {
  background-image: var(--icon-chat);
  background-position: bottom
}

.glyphicon-small-stats,.icon-graph {
  background-position: center
}

.icon-volume-up {
  background-image: var(--icon-sound);
  background-position: center;
}

.edit {
  background-position: center
}

.delete {
}

.agents {
}

.dialpad .key-1 {
  background: var(--key-1)!important;
  background-repeat: no-repeat!important
}

.dialpad .key-2 {
  background: var(--key-2)!important;
  background-repeat: no-repeat!important
}

.dialpad .key-3 {
  background: var(--key-3)!important;
  background-repeat: no-repeat!important
}

.dialpad .key-4 {
  background: var(--key-4)!important
}

.dialpad .key-5 {
  background: var(--key-5)!important
}

.dialpad .key-6 {
  background: var(--key-6)!important
}

.dialpad .key-7 {
  background: var(--key-7)!important
}

.dialpad .key-8 {
  background: var(--key-8)!important
}

.dialpad .key-9 {
  background: var(--key-9)!important;
  background-repeat: no-repeat!important
}

.dialpad .key-0 {
  background: var(--key-0)!important;
  background-repeat: no-repeat!important
}

.dialpad .key-star {
  background: var(--key-star)!important;
  background-repeat: no-repeat!important
}

.loading .nav-arrow,.nav-link-current .nav-arrow {
  border-color: transparent transparent var(--colors-primary-600) transparent
}

/* ---- count badges: compact pill treatment for ALL Bootstrap .badge uses
   (nav, toolbar, voicemail tabs, ...). NS never removes .hide from count
   badges - it reveals them with an inline display:inline - so hide while
   .hide is present (kills the zero-count blink on load) but honor the
   inline reveal. ---- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  box-sizing: border-box;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-shadow: none;
  border-radius: var(--chakra-radii-full);
}

.badge-important {
  background: var(--chakra-colors-red-500);
}

.badge.hide {
  display: none !important;
}

.badge.hide[style*="display: inline"] {
  display: inline-flex !important;
}

#nav-msg-count {
  top: auto;
  right: 4px;
}

#LinkHomeIndex .nav-bg-image,#nav-home-super .nav-bg-image {
  background-size: 16px;
  background-image: var(--home);
  background-repeat: no-repeat;
  background-position: center
}

#LinkHomeIndex:hover .nav-bg-image,#nav-home-super:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--homeHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkResellersIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--resellers);
  background-repeat: no-repeat;
  background-position: center
}

#LinkResellersIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--resellersHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkDomainsIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--domains);
  background-repeat: no-repeat;
  background-position: center
}

#LinkDomainsIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--domainsHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkSiptrunksIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--trunk);
  background-repeat: no-repeat;
  background-position: center
}

#LinkSiptrunksIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--trunkHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkRouteprofilesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--routeprofiles);
  background-repeat: no-repeat;
  background-position: center
}

#LinkInventoryIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--inventory);
  background-repeat: no-repeat;
  background-position: center
}

#LinkInventoryIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--inventoryHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkCallhistoryIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--callhistory);
  background-repeat: no-repeat;
  background-position: center
}

#LinkCallhistoryIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--callhistoryHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkVoicemailsFax .nav-bg-image {
  background-size: 16px;
  background-image: var(--fax);
  background-repeat: no-repeat;
  background-position: center
}

#LinkVoicemailsFax:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--faxHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkUiconfigsIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--configs);
  background-repeat: no-repeat;
  background-position: center
}

#LinkUiconfigsIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--configsHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkVoicemailsIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--messages);
  background-repeat: no-repeat;
  background-position: center
}

#LinkVoicemailsIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--messagesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkContactsIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--contacts);
  background-repeat: no-repeat;
  background-position: center
}

#LinkContactsIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--contactsHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAnswerrulesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--answeringrules);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAnswerrulesIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--answeringrulesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkTimeframesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--timeframes);
  background-repeat: no-repeat;
  background-position: center
}

#LinkTimeframesIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--timeframesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkPhonesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--phones);
  background-repeat: no-repeat;
  background-position: center
}

#LinkPhonesIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--phonesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkMusicIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--musichold);
  background-repeat: no-repeat;
  background-position: center
}

#LinkMusicIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--musicholdHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkUsersIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--users);
  background-repeat: no-repeat;
  background-position: center
}

#LinkUsersIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--usersHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkConferencesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--conferences);
  background-repeat: no-repeat;
  background-position: center
}

#LinkConferencesIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--conferencesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAttendantsIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--autoattendants);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAttendantsIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--autoattendantsHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkCallqueuesIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--callqueues);
  background-repeat: no-repeat;
  background-position: center
}

#LinkCallqueuesIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--callqueuesHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAgentsIndex .nav-bg-image,#LinkAgentsManager .nav-bg-image {
  background-size: 16px;
  background-image: var(--callcenter);
  background-repeat: no-repeat;
  background-position: center
}

#LinkAgentsIndex:hover .nav-bg-image,#LinkAgentsManager:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--callcenterHover);
  background-repeat: no-repeat;
  background-position: center
}

#LinkClustersIndex .nav-bg-image {
  background-size: 16px;
  background-image: var(--cluster);
  background-repeat: no-repeat;
  background-position: center
}

#LinkClustersIndex:hover .nav-bg-image {
  background-size: 16px;
  background-image: var(--clusterHover);
  background-repeat: no-repeat;
  background-position: center
}

.action-container-left>#filter-date {
  background: var(--colors-primary-400);
  margin-left: 8px;
}

.action-container-left>#filter-dialed,.action-container-left>#filter-type,.action-container-left>#filter-user {
  background: var(--chakra-colors-bg-subtle);
  color: var(--chakra-colors-fg-muted);
  text-shadow: 0 0 0
}

.app-icon-lg.icon-callqueue,.app-icon.icon-callqueue,app-icon-lg.icon-callqueue {
  background-image: var(--icon-callqueue);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-directory,.app-icon.icon-directory {
  background-image: var(--icon-directory);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-goback,.app-icon.icon-goback {
  background-image: var(--goback);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-voicemail,.app-icon.icon-voicemail {
  background-image: var(--icon-voicemail);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-vmailmanage,.app-icon.icon-vmailmanage {
  background-image: var(--icon-vmailmanage);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-external,.app-icon.icon-external {
  background-image: var(--icon-external);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-message,.app-icon.icon-message {
  background-image: var(--icon-message);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-repeat,.app-icon.icon-repeat {
  background-image: var(--icon-repeat);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-tier,.app-icon.icon-tier {
  background-image: var(--icon-tier);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon.icon-tier {
  background-image: var(--icon-tier)
}

.app-icon-lg.icon-user,.app-icon.icon-user {
  background-image: var(--icon-user);
  background-repeat: no-repeat;
  background-position: center
}

.app-icon-lg.icon-conference,.app-icon.icon-conference {
  background-image: var(--icon-conference);
  background-repeat: no-repeat;
  background-position: center
}

div#attendant_tier_1_1 {
  margin-bottom: 4px
}

.nav-link-current a div.nav-bg-image {
  opacity: .8
}

i.icon-share-alt.icon-white {
}

.btn.btn-primary.btn-save.btn-combo-save,.btn.btn-primary.dropdown-toggle {
  background: var(--chakra-colors-accent-solid);
  border: none;
  color: var(--chakra-colors-accent-contrast);
  box-shadow: var(--chakra-shadows-xs);
  border-radius: var(--chakra-radii-md);
}

.btn-group.open .btn-primary.dropdown-toggle {
  background-color: var(--colors-primary-600);
  box-shadow: inset 0 0 0;
}

.round-music {
  background: var(--icon-music);
  background-position: center;
  background-repeat: no-repeat
}

span.not-registered {
  background-image: var(--icon-not-registered);
  background-repeat: no-repeat;
  background-position: center
}

span.checkmark {
  background-image: var(--icon-checked);
  background-repeat: no-repeat;
  background-position: center
}

.ui-datepicker td .ui-state-hover {
  background-image: none
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
  background-image: none;
  background-color: var(--chakra-colors-accent-solid)
}

.modal-header {
  .nav-tabs {
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 15px;
  }
}

.modal-footer .btn+.btn {
  margin-bottom: 0;
  margin-left: 5px;
  color: var(--chakra-colors-accent-contrast);
  background: var(--chakra-colors-accent-solid);
  background-image: none;
  border: none;
  border-radius: var(--chakra-radii-md);
  &:hover {
    background-color: var(--chakra-colors-voxtell-700);
  }
}

.chat-available {
  display: none!important
}

.presence.open {
  background: var(--chakra-colors-green-500)!important;
  border-radius: 40px
}

.presence.inactive {
  background: var(--chakra-colors-gray-400)!important;
  border-radius: 40px
}

.contact-dock-gravatar {
  background-color: var(--colors-primary-400)
}

.presence.inuse {
  background: var(--chakra-colors-red-500);
  border-radius: 12px
}

span.nsicon.nsicon-shared.helpsy {
  color: #fff
}

.round-logout {
  background: var(--icon-logout);
  background-position: center;
  background-repeat: no-repeat
}

.round-login {
  background: var(--icon-login);
  background-position: center;
  background-repeat: no-repeat
}

#LinkManage {
  background: var(--icon-user-add);
  background-position: center;
  background-repeat: no-repeat
}

.round-call {
  background: var(--icon-phone);
  background-position: center;
  background-repeat: no-repeat
}

.nsicon-more {
  background: var(--icon-vertical-menu);
  background-position: center;
  background-repeat: no-repeat
}

.helpsy:hover {
  scale: 1
}

a#Link {
  scale: 1!important
}


.round-button {
  background-repeat: no-repeat;
  background-position:center;
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  font-size: 0;
  outline: none;
  vertical-align: middle;
  background-color: transparent;
  border: none;
}

#table-column-queue-dropdown {
  label.checkbox {
    padding-left: 20px;
    text-align: left;
  }
}

/* phone-config builder: each button card anchors its own absolutely-positioned
   label (.btn-detail) - without this the labels anchor to the page and stay
   put while the card list scrolls */
li.btn-config {
  position: relative;
}

/* builder toolbar buttons use the NS icon FONT (nsicon glyphs) - box the
   elements for the mask icons and silence the font glyph */
i.nsicon-phone-extension, i.nsicon-contacts {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-top: -2px;
}

/* pills that mix a 15px icon with small label text (e.g. All Contacts) can't
   center on inline metrics - flex them */
.profile-tags .label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  line-height: 1.4;
}

.profile-tags .label i {
  margin-top: 0;
}

/* NS nudges the label's inner span up with position:relative (a baseline hack
   from the inline era) - neutralize it so flex centering actually centers */
.profile-tags .label > span {
  position: static;
}

i.nsicon-phone-extension:before, i.nsicon-contacts:before {
  content: none;
}

/* FontAwesome font-glyph icons (kabob menu, Back buttons): box them for the
   mask and silence the font glyph */
i.kabob.fa, i.fa.fa-reply {
  display: inline-block;
  width: 14px;
  height: 20px;
  vertical-align: middle;
}

i.kabob.fa:before, i.fa.fa-reply:before {
  content: none;
}

/* icon-only buttons (zoom, etc.): Bootstrap's 14px sprite icons make a
   shorter line box than text does, so those buttons shrank below their 30px
   siblings - give every in-button icon the 20px text line box */
.btn [class^="icon-"], .btn [class*=" icon-"] {
  height: 20px;
  vertical-align: middle;
}

/* ---- icon colors: the Hugeicons masks (vt-icons.css) paint with currentColor,
   so each icon element needs a deliberate text color. Neutral actions read
   fg-subtle; call semantics keep their traffic colors. ---- */

.play, .download-audio, .audio, .listen, .download-report, .reports, .copy,
.details, .rename, .upload, .save, .mute, .conference-inbound,
.conference-outbound, .del, .add, .edit, .forward, .edit.forward.helpsy,
.round-message, .round-reply, .round-music, .round-call, .round-login,
.round-logout, .sort-icon, .icon-graph, .glyphicon-small-stats, .manage,
.glyphicon-small-cogwheel, span.nsicon.nsicon-more, .nsicon-more,
i.icon-remove.icon-black, span.icon-facetime-video, .icon-refresh,
.icon-print, .icon-th, .mask, .icon-info-sign, .agents,
.form-search .input-append > .btn > i, #form-user-search>div>a>.icon-remove,
i.icon-share-alt.icon-white, #LinkManage, .icon-calendar {
  color: var(--chakra-colors-fg-subtle);
}

/* input add-ons (e.g. datepicker calendar buttons): belong to the field */
.input-append .add-on, .input-prepend .add-on,
.input-append .btn, .input-append a.btn {
  background-color: var(--chakra-colors-bg-subtle);
  border: 1px solid var(--chakra-colors-border);
  background-image: none;
  text-shadow: none;
}

/* dock (contacts/chat) headers are dark; their buttons don't inherit the
   header's white text color, so the mask icons painted black - force white */
.dock-head .dock-head-button i {
  color: var(--chakra-colors-white-alpha-900);
}

.inbound { color: var(--chakra-colors-green-500); }
.outbound { color: var(--chakra-colors-blue-500); }
.missed, .blocked, .delete, .round-button { color: var(--chakra-colors-red-500); }
span.checkmark { color: var(--chakra-colors-green-500); }
span.not-registered { color: var(--chakra-colors-orange-400); }

/* ---- modern surfaces: modals + tables (Vee design language) ---- */

.modal {
  border-radius: var(--chakra-radii-2xl);
  border: 1px solid var(--chakra-colors-border);
  box-shadow: var(--chakra-shadows-lg);
}

.modal-header {
  border-bottom-color: var(--chakra-colors-border-muted);
}

.modal-footer {
  background-color: var(--chakra-colors-bg-subtle);
  border-top: 1px solid var(--chakra-colors-border-muted);
  border-radius: 0 0 var(--chakra-radii-2xl) var(--chakra-radii-2xl);
  box-shadow: none;
}

.popover {
  border-radius: var(--chakra-radii-xl);
  border-color: var(--chakra-colors-border);
  box-shadow: var(--chakra-shadows-lg);
}

/* ---- Answering Rules modals: Add Rule (#write-rule) + Allow/Block ---- */

/* text fields: retire the legacy gray inset look */
#write-rule input[type='text'],
#allowblock-lists input[type='text'] {
  height: 32px;
  box-sizing: border-box;
  margin-bottom: 0;
  padding: 4px 10px;
  background-color: var(--chakra-colors-bg-panel);
  border: 1px solid var(--chakra-colors-border);
  border-radius: var(--chakra-radii-md);
  box-shadow: none;
  color: var(--chakra-colors-fg);
}
#write-rule input[type='text'][disabled],
#write-rule input[type='text'][readonly] {
  background-color: var(--chakra-colors-bg-muted);
  color: var(--chakra-colors-fg-muted);
}

/* appended buttons (sim-ring delay clock, allow/block add) join the field:
   shared hairline, flat left cap on the button */
#write-rule .input-append,
#allowblock-lists .input-append {
  display: inline-flex;
  align-items: stretch;
}
#write-rule .input-append input[type='text'],
#allowblock-lists .input-append input[type='text'] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#write-rule .input-append .btn,
#allowblock-lists .input-append .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: auto;
  margin-left: -1px;
  padding: 0 10px;
  border-radius: 0 var(--chakra-radii-md) var(--chakra-radii-md) 0;
  box-shadow: none;
}

/* Allow/Block: titles breathe (global h6 pulls -12px for home panels) */
#allowblock-lists h6 {
  margin: 0;
  padding: 10px 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--chakra-colors-fg);
}

/* the card stack (input header / list well / anonymous row) shares one
   hairline weight and outer radius */
#allowblock-lists .spam-input,
#allowblock-lists .allowblock-input {
  border-color: var(--chakra-colors-border-muted);
  padding: 0 12px 12px;
}
#allowblock-lists .spam-input {
  border-radius: var(--chakra-radii-lg);
}
#allowblock-lists .allowblock-input {
  border-radius: var(--chakra-radii-lg) var(--chakra-radii-lg) 0 0;
}
#allowblock-lists .allowblock-input .input-append {
  display: flex;
}
#allowblock-lists .allowblock-input input[type='text'] {
  flex: 1;
  width: auto;
  min-width: 0;
}
#allowblock-lists .well {
  border: 1px solid var(--chakra-colors-border-muted);
  border-radius: 0 0 var(--chakra-radii-lg) var(--chakra-radii-lg);
  box-shadow: none;
}
#allowblock-lists #block-div .well {
  border-radius: 0;
}
#allowblock-lists .allowblock-table {
  /* NS forces overflow-y: scroll - the empty track reads as a stray inner
     hairline next to the well's border */
  overflow-y: auto !important;
}
#allowblock-lists .allowblock-anon {
  background-color: var(--chakra-colors-bg-subtle);
  border-color: var(--chakra-colors-border-muted);
  border-radius: 0 0 var(--chakra-radii-lg) var(--chakra-radii-lg);
  padding: 8px 12px;
}

.table th, .table td {
  border-top-color: var(--chakra-colors-border-muted);
}

.table tbody tr:hover td {
  background-color: var(--chakra-colors-bg-subtle);
}