/*
 * Grid4 NetSapiens Portal Skin V4
 * Generated by scripts/build-v4.mjs from src/v4/build-manifest.json.
 * Do not edit this generated file directly.
 */

/* Source: src/v4/css/tokens/foundation.css */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap");

:root {
  --g4-v4-brand-blue: #52B4FA;
  --g4-v4-brand-blue-rgb: 82, 180, 250;
  --g4-v4-brand-navy: #1C2143;
  --g4-v4-light-app-background: #E1E8F0;
  --g4-v4-light-surface: #EFF7FC;
  --g4-v4-light-secondary-surface: #D2DCE7;
  --g4-v4-light-border: rgba(28, 33, 67, 0.18);
  --g4-v4-light-heading-divider: rgba(28, 33, 67, 0.28);
  --g4-v4-dark-app-background: #252A31;
  --g4-v4-dark-surface: #181D24;
  --g4-v4-dark-border: rgba(210, 223, 238, 0.16);
  --g4-v4-dark-text: #F4F4F4;
  --g4-v4-dark-secondary-text: #D9E0E8;
  --g4-v4-scrollbar-track: rgba(148, 163, 184, 0.18);
  --g4-v4-scrollbar-thumb: rgba(100, 116, 139, 0.46);
  --g4-v4-scrollbar-thumb-hover: rgba(71, 85, 105, 0.6);
  --g4-v4-curtain-surface: #f4f7fb;
  --g4-v4-curtain-dark-surface: #09111C;
  --g4-v4-curtain-spinner-track: rgba(var(--g4-v4-brand-blue-rgb), 0.24);
  --g4-v4-curtain-spinner-size: 34px;
  --g4-v4-curtain-spinner-width: 4px;
  --g4-v4-curtain-failsafe-duration: 4.5s;
  --g4-v4-control-height: 30px;
  --g4-v4-control-width: 220px;
  --g4-v4-radius: 5px;
  --g4-v4-control-gap: 5px;
  --g4-v4-surface-inset: 6px;
  --g4-v4-domain-banner-gap: 4px;
}

/* Source: src/v4/css/core/curtain.css */

@keyframes g4-v4-curtain-failsafe {
  0%,
  85% {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@keyframes g4-v4-curtain-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*
 * The curtain is deliberately fail-open. Browsers without :has() support do
 * not receive the CSS-first curtain, leaving the native portal accessible.
 * Login and Attendant are core compatibility exclusions because those pages
 * may load custom CSS without the normal portal JavaScript lifecycle.
 */
@supports selector(html:has(body)) {
  html:not(:has(#login-container)):not(:has(.attendant-container)):not([data-grid4-v4-ready]) body::before,
  html:not(:has(#login-container)):not(:has(.attendant-container)):not([data-grid4-v4-ready]) body::after {
    content: "";
    position: fixed;
    z-index: 2147483600;
    display: block;
  }

  html:not(:has(#login-container)):not(:has(.attendant-container)):not([data-grid4-v4-ready]) body::before {
    inset: 0;
    background: var(--g4-v4-curtain-surface);
    animation: g4-v4-curtain-failsafe var(--g4-v4-curtain-failsafe-duration) ease forwards;
  }

  html:not(:has(#login-container)):not(:has(.attendant-container)):not([data-grid4-v4-ready]) body::after {
    width: var(--g4-v4-curtain-spinner-size);
    height: var(--g4-v4-curtain-spinner-size);
    top: 50%;
    left: 50%;
    border: var(--g4-v4-curtain-spinner-width) solid var(--g4-v4-curtain-spinner-track);
    border-top-color: var(--g4-v4-brand-blue);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation:
      g4-v4-curtain-spin 0.9s linear infinite,
      g4-v4-curtain-failsafe var(--g4-v4-curtain-failsafe-duration) ease forwards;
  }

  @media (prefers-color-scheme: dark) {
    html:not(:has(#login-container)):not(:has(.attendant-container)):not([data-grid4-theme]):not([data-grid4-v4-ready]) body::before {
      background: var(--g4-v4-curtain-dark-surface);
    }
  }

  html[data-grid4-theme="theme-dark"]:not(:has(#login-container)):not(:has(.attendant-container)):not([data-grid4-v4-ready]) body::before {
    background: var(--g4-v4-curtain-dark-surface);
  }
}

html[data-grid4-v4-ready] body::before,
html[data-grid4-v4-ready] body::after {
  content: none !important;
  pointer-events: none !important;
}

/* Source: src/v4/css/core/login.css */

/*
 * Preserve the accepted V2 login presentation: the native NetSapiens card on
 * a plain white page, with no image-based skin background.
 */
@supports selector(html:has(body)) {
  html:has(#login-container) body {
    min-height: 100vh;
    background-color: #FFF !important;
    background-image: none !important;
    background-position: 50% 0 !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    background-attachment: scroll !important;
  }
}

/* Source: src/v4/css/core/base.css */

@supports selector(html:has(body)) {
  html:has(body.g4-v4-active) {
    font-size: clamp(15px, 0.625vw, 18px);
  }
}

body.g4-v4-active {
  margin: 0;
  background: var(--g4-v4-light-app-background);
  color: var(--g4-v4-brand-navy);
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body.g4-v4-active.theme-dark {
  background: var(--g4-v4-dark-app-background);
}

body.g4-v4-active .page-container.g4-v4-shell-host {
  box-sizing: border-box;
  width: 100%;
  padding: 0 1.5rem;
}

html:has(body.g4-v4-active),
body.g4-v4-active {
  scrollbar-width: thin;
  scrollbar-color: var(--g4-v4-scrollbar-thumb) var(--g4-v4-scrollbar-track);
}

html:has(body.g4-v4-active)::-webkit-scrollbar,
body.g4-v4-active::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

html:has(body.g4-v4-active)::-webkit-scrollbar-track,
body.g4-v4-active::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--g4-v4-scrollbar-track);
}

html:has(body.g4-v4-active)::-webkit-scrollbar-thumb,
body.g4-v4-active::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--g4-v4-scrollbar-thumb);
  background-clip: padding-box;
}

html:has(body.g4-v4-active)::-webkit-scrollbar-thumb:hover,
body.g4-v4-active::-webkit-scrollbar-thumb:hover {
  background: var(--g4-v4-scrollbar-thumb-hover);
}

/* Source: src/v4/css/core/shell.css */

#g4-v4-shell {
  --g4-v4-app-bg: var(--g4-v4-light-app-background);
  --g4-v4-surface: var(--g4-v4-light-surface);
  --g4-v4-surface-secondary: var(--g4-v4-light-secondary-surface);
  --g4-v4-border: var(--g4-v4-light-border);
  --g4-v4-text: var(--g4-v4-brand-navy);
  --g4-v4-text-secondary: #4D5C72;
  --g4-v4-shadow: rgba(28, 33, 67, 0.12);
  --g4-v4-sidebar-width: 12.825rem;
  --g4-v4-header-height: 2.25rem;
  position: relative;
  min-height: 100vh;
  background: var(--g4-v4-app-bg);
  color: var(--g4-v4-text);
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

#g4-v4-shell.theme-dark {
  --g4-v4-app-bg: var(--g4-v4-dark-app-background);
  --g4-v4-surface: var(--g4-v4-dark-surface);
  --g4-v4-surface-secondary: var(--g4-v4-dark-surface);
  --g4-v4-border: var(--g4-v4-dark-border);
  --g4-v4-text: var(--g4-v4-dark-text);
  --g4-v4-text-secondary: var(--g4-v4-dark-secondary-text);
  --g4-v4-shadow: rgba(0, 0, 0, 0.42);
}

#g4-v4-shell > .wrapper {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding: var(--g4-v4-header-height) 1.333rem 0.667rem var(--g4-v4-sidebar-width);
  margin: 0;
  background: var(--g4-v4-app-bg);
  color: var(--g4-v4-text);
}

#g4-v4-shell #header {
  position: fixed;
  z-index: 1040;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--g4-v4-header-height);
  padding: 0 1.25rem;
  margin: 0;
  border-bottom: 5px solid var(--g4-v4-border);
  background: var(--g4-v4-surface-secondary);
  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.08);
}

#g4-v4-shell.theme-dark #header {
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.42);
}

#g4-v4-shell #header-logo,
#g4-v4-shell #navigation-subbar {
  display: none;
}

#g4-v4-shell #header-user {
  position: absolute;
  top: -0.5625rem;
  right: 1.25rem;
  width: auto;
  height: 3.333rem;
  padding-top: 0.667rem;
  color: var(--g4-v4-text);
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
}

#g4-v4-shell #header-user a {
  color: var(--g4-v4-brand-blue);
}

#g4-v4-shell #navigation {
  position: fixed;
  z-index: 1035;
  top: var(--g4-v4-header-height);
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--g4-v4-sidebar-width);
  height: auto;
  padding: 0 0 0.875rem;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 5px solid var(--g4-v4-border);
  background: var(--g4-v4-surface-secondary);
  box-shadow: 0.125rem 0 0.75rem rgba(0, 0, 0, 0.08);
}

#g4-v4-shell.theme-dark #navigation {
  box-shadow: 0.125rem 0 0.5rem rgba(0, 0, 0, 0.1);
}

#g4-v4-shell #navigation::before {
  content: "";
  display: block;
  flex: 0 0 6.5rem;
  width: calc(100% - 1.875rem);
  height: 6.5rem;
  margin: 2.3125rem auto;
  background: url("https://portalskin.smartcomm.io/SmartComm%20Test%20Logo.svg") center / contain no-repeat;
}

#g4-v4-shell #nav-buttons {
  display: block;
  flex: 1 1 auto;
  box-sizing: border-box;
  width: calc(100% - 0.333rem);
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: auto;
}

#g4-v4-shell #nav-buttons > li {
  float: none;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

#g4-v4-shell #nav-buttons a.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  width: auto;
  height: auto;
  min-height: 1.5rem;
  padding: 0.5rem 0.4rem;
  margin: 0.125rem 0.4rem;
  gap: 0.75rem;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--g4-v4-text-secondary);
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.333rem;
  text-align: left;
  text-decoration: none;
}

#g4-v4-shell #nav-buttons a.nav-link.active,
#g4-v4-shell #nav-buttons li.nav-link-current > a.nav-link {
  background: var(--g4-v4-brand-blue);
  color: #FFF;
  font-weight: 600;
}

#g4-v4-shell #nav-buttons .nav-button,
#g4-v4-shell #nav-buttons .nav-bg-image,
#g4-v4-shell #nav-buttons .nav-arrow {
  display: none;
}

#g4-v4-shell #nav-buttons .g4-v4-nav-icon {
  flex: 0 0 1.067rem;
  width: 1.067rem;
  margin: 0 0.333rem 0 0;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1.25rem;
  text-align: center;
}

#g4-v4-shell #nav-buttons .nav-text {
  display: block;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  margin: 0 0.533rem;
  color: inherit;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: inherit;
  line-height: 0.975rem;
  text-align: left;
}

/* Keep the unread Messages count centered within the clipped navigation row.
   Its natural absolute-position static point follows the link's flex alignment. */
#g4-v4-shell #nav-buttons span#nav-msg-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-width: 1.45rem !important;
  height: 1.45rem !important;
  padding: 0 0.35rem !important;
  top: unset !important;
  right: 10px !important;
  line-height: 1 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #B53B3B !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: 0 !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  -webkit-text-fill-color: #FFF !important;
}

#g4-v4-shell #nav-buttons span#nav-msg-count::before,
#g4-v4-shell #nav-buttons span#nav-msg-count::after {
  content: none !important;
  display: none !important;
}

#g4-v4-shell #nav-buttons li:not(.nav-link-current)
  > a.nav-link:not(.active) > .g4-v4-nav-icon,
#g4-v4-shell #nav-buttons li:not(.nav-link-current)
  > a.nav-link:not(.active) > .nav-text {
  color: var(--g4-v4-brand-navy);
}

#g4-v4-shell #nav-buttons li:not(.nav-link-current)
  > a.nav-link:not(.active) > .nav-text {
  font-weight: 600;
}

#g4-v4-shell.theme-dark #nav-buttons li:not(.nav-link-current)
  > a.nav-link:not(.active) > .g4-v4-nav-icon,
#g4-v4-shell.theme-dark #nav-buttons li:not(.nav-link-current)
  > a.nav-link:not(.active) > .nav-text {
  color: var(--g4-v4-dark-secondary-text);
}

#g4-v4-shell #g4-v4-theme-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  padding: 1px 0.4rem;
  margin: 0.75rem auto 0;
  border: 1px solid var(--g4-v4-border);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--g4-v4-text);
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1);
  font-size: 1.75rem;
  cursor: pointer;
}

#g4-v4-shell.theme-dark #g4-v4-theme-toggle {
  border-color: var(--g4-v4-brand-blue);
  color: var(--g4-v4-brand-blue);
}

#g4-v4-shell #content {
  display: block;
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 550px;
  padding: 1.27rem 0.92rem 0.92rem;
  margin: 0;
  background: var(--g4-v4-app-bg);
  color: var(--g4-v4-text);
}

/* Source: src/v4/css/components/domain-banner.css */

body.g4-v4-active.has-domain-banner #g4-v4-shell {
  --g4-v4-header-height: var(--g4-v4-domain-banner-offset, 3.5rem);
}

/* NetSapiens leaves an empty duplicate banner placeholder beside the fixed
   banner on managed-domain pages. Keep it out of normal flow so the shell is
   not shifted down a second time. */
body.g4-v4-active > #domain-message:empty {
  display: none !important;
}

body.g4-v4-active .fixed-container {
  box-sizing: border-box;
  padding-top: 0.08rem;
  z-index: 1050;
}

/* Match the V3 domain-context banner rather than the native alert geometry. */
body.g4-v4-active .fixed-container > #domain-message,
body.g4-v4-active .fixed-container > .mask-bar {
  box-sizing: border-box !important;
  width: fit-content !important;
  height: auto !important;
  min-height: 40px !important;
  max-width: min(calc(100% - 1.5rem), 60rem) !important;
  margin: 0.05rem auto 0 !important;
  padding: 0.32rem 0.85rem !important;
  border: 1px solid rgba(28, 33, 67, 0.1) !important;
  border-radius: 0.9rem !important;
  background: rgba(210, 220, 231, 0.96) !important;
  color: #3a87ad !important;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.22) !important;
}

body.g4-v4-active.theme-dark .fixed-container > #domain-message,
body.g4-v4-active.theme-dark .fixed-container > .mask-bar {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(8, 11, 15, 0.94) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active .fixed-container > #domain-message .domain-message-container,
body.g4-v4-active .fixed-container > .mask-bar .domain-message-container,
body.g4-v4-active .fixed-container > .mask-bar .mask-container {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: normal !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  column-gap: 0.75rem !important;
  background: transparent !important;
  border: 0 !important;
}

body.g4-v4-active .fixed-container > #domain-message .domain-message-container > .clearfix,
body.g4-v4-active .fixed-container > .mask-bar .domain-message-container > .clearfix,
body.g4-v4-active .fixed-container > .mask-bar .mask-container > .clearfix {
  display: none !important;
}

body.g4-v4-active .fixed-container > #domain-message .domain-message-buttons,
body.g4-v4-active .fixed-container > .mask-bar .domain-message-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.g4-v4-active .fixed-container > #domain-message .domain-message-buttons:first-child,
body.g4-v4-active .fixed-container > .mask-bar .domain-message-buttons:first-child {
  justify-self: start !important;
}

body.g4-v4-active .fixed-container > #domain-message .domain-message-buttons:last-of-type,
body.g4-v4-active .fixed-container > .mask-bar .domain-message-buttons:last-of-type {
  justify-self: end !important;
}

body.g4-v4-active .fixed-container > #domain-message .domain-message-text,
body.g4-v4-active .fixed-container > .mask-bar .domain-message-text {
  display: flex !important;
  grid-column: 2 !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  flex: 1 1 auto !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  color: inherit !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.79rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  white-space: normal !important;
}

body.g4-v4-active .fixed-container > #domain-message h5,
body.g4-v4-active .fixed-container > .mask-bar h5 {
  max-width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

body.g4-v4-active .fixed-container > #domain-message .btn,
body.g4-v4-active .fixed-container > .mask-bar .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 2.35rem !important;
  min-height: 2.35rem !important;
  margin: 0 !important;
  padding: 0 0.95rem !important;
  gap: 0.45rem !important;
  border: 1px solid #3b82f6 !important;
  border-radius: 0.75rem !important;
  background: #3b82f6 !important;
  color: #f8fbff !important;
  box-shadow: 0 0.55rem 1rem rgba(0, 0, 0, 0.14) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.933333rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
  opacity: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

body.g4-v4-active .fixed-container > #domain-message .domain-message-buttons:first-child .btn,
body.g4-v4-active .fixed-container > .mask-bar .domain-message-buttons:first-child .btn {
  border-color: #3b82f6 !important;
  background: #3b82f6 !important;
  color: #f8fbff !important;
}

body.g4-v4-active .fixed-container > #domain-message button[data-modal-path*="/domains/edit/"] {
  border-color: #f59e0b !important;
  background: #f59e0b !important;
  color: #f8fbff !important;
}

body.g4-v4-active .fixed-container > #domain-message a[href*="/uiconfigs/"] {
  border-color: #10b981 !important;
  background: #10b981 !important;
  color: #f6fffb !important;
}

body.g4-v4-active .fixed-container > #domain-message .domain-message-buttons:first-child .btn:hover,
body.g4-v4-active .fixed-container > #domain-message .domain-message-buttons:first-child .btn:focus {
  border-color: #2563eb !important;
  background: #2563eb !important;
}

body.g4-v4-active .fixed-container > #domain-message button[data-modal-path*="/domains/edit/"]:hover,
body.g4-v4-active .fixed-container > #domain-message button[data-modal-path*="/domains/edit/"]:focus {
  border-color: #d97706 !important;
  background: #d97706 !important;
}

body.g4-v4-active .fixed-container > #domain-message a[href*="/uiconfigs/"]:hover,
body.g4-v4-active .fixed-container > #domain-message a[href*="/uiconfigs/"]:focus {
  border-color: #059669 !important;
  background: #059669 !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
  body.g4-v4-active .fixed-container > #domain-message .domain-message-container,
  body.g4-v4-active .fixed-container > .mask-bar .domain-message-container,
  body.g4-v4-active .fixed-container > .mask-bar .mask-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    row-gap: 0.25rem !important;
  }

  body.g4-v4-active .fixed-container > #domain-message .domain-message-text,
  body.g4-v4-active .fixed-container > .mask-bar .domain-message-text {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.g4-v4-active .fixed-container > #domain-message .domain-message-buttons:first-child,
  body.g4-v4-active .fixed-container > .mask-bar .domain-message-buttons:first-child {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body.g4-v4-active .fixed-container > #domain-message .domain-message-buttons:last-of-type,
  body.g4-v4-active .fixed-container > .mask-bar .domain-message-buttons:last-of-type {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 760px) {
  body.g4-v4-active .fixed-container > #domain-message,
  body.g4-v4-active .fixed-container > .mask-bar {
    max-width: min(calc(100% - 1rem), 100%) !important;
  }

  body.g4-v4-active .fixed-container > #domain-message .domain-message-container,
  body.g4-v4-active .fixed-container > .mask-bar .domain-message-container,
  body.g4-v4-active .fixed-container > .mask-bar .mask-container {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 0.45rem !important;
  }

  body.g4-v4-active .fixed-container > #domain-message .domain-message-buttons,
  body.g4-v4-active .fixed-container > #domain-message .domain-message-text,
  body.g4-v4-active .fixed-container > .mask-bar .domain-message-buttons,
  body.g4-v4-active .fixed-container > .mask-bar .domain-message-text {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  body.g4-v4-active .fixed-container > #domain-message .btn,
  body.g4-v4-active .fixed-container > .mask-bar .btn {
    height: 2rem !important;
    min-height: 2rem !important;
  }
}

/* Source: src/v4/css/components/communications-docks.css */

/* Contacts and chat docks are legacy portal widgets, so V4 themes their
 * existing surfaces without changing their layout or behavior. */
body.g4-v4-active .chat-popup > .dock-head {
  border-color: #333 !important;
  background: #333 !important;
}

body.g4-v4-active .chat-popup .dock-submenu-buttons > .dropdown > .dropdown > button.dock-submenu-button {
  position: relative !important;
  width: 3px !important;
  padding: 0 !important;
  overflow: visible !important;
  border-color: transparent !important;
  background: transparent !important;
}

body.g4-v4-active .chat-popup .dock-submenu-buttons > .dropdown > .dropdown > button.dock-submenu-button::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 8px !important;
  width: 24px !important;
  height: 24px !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  transition: background-color 140ms ease !important;
}

body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-button,
body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-button i,
body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-button span,
body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-button a {
  color: #000 !important;
  opacity: 1 !important;
}

body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-button .icon-facetime-video {
  filter: brightness(0) !important;
}

body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-buttons button.dock-submenu-button {
  border-radius: 4px !important;
  transition: background-color 140ms ease, border-color 140ms ease !important;
}

body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-buttons button.dock-submenu-button > a.dock-submenu-button {
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-buttons button.dock-submenu-button:hover,
body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-buttons button.dock-submenu-button:focus {
  border-color: rgba(17, 22, 29, 0.24) !important;
  background: rgba(17, 22, 29, 0.12) !important;
}

body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-buttons > .dropdown > .dropdown > button.dock-submenu-button:hover,
body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-buttons > .dropdown > .dropdown > button.dock-submenu-button:focus {
  border-color: transparent !important;
  background: transparent !important;
}

body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-buttons > .dropdown > .dropdown > button.dock-submenu-button:hover::before,
body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-buttons > .dropdown > .dropdown > button.dock-submenu-button:focus::before {
  background: rgba(17, 22, 29, 0.12) !important;
}

body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-buttons button.dock-submenu-button:hover > a.dock-submenu-button,
body.g4-v4-active:not(.theme-dark) .chat-popup .dock-submenu-buttons button.dock-submenu-button:focus > a.dock-submenu-button {
  background: transparent !important;
}

body.g4-v4-active:not(.theme-dark) .chat-popup .chat-outbound .chat-well {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #fff !important;
}

body.g4-v4-active.theme-dark .dock-popup {
  border: 1px solid var(--g4-v4-brand-blue) !important;
  color: var(--g4-v4-dark-text) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42) !important;
}

body.g4-v4-active.theme-dark .dock-popup .dock-head {
  border-color: var(--g4-v4-dark-border) !important;
  background: #11161d !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .dock-popup .dock-body,
body.g4-v4-active.theme-dark .dock-popup .scroll-container,
body.g4-v4-active.theme-dark .dock-popup .table-container,
body.g4-v4-active.theme-dark .dock-popup .contacts-table,
body.g4-v4-active.theme-dark .dock-popup .recent-chat-table,
body.g4-v4-active.theme-dark .dock-popup .contact-row-table,
body.g4-v4-active.theme-dark .dock-popup .ns-chat,
body.g4-v4-active.theme-dark .dock-popup .chat-box,
body.g4-v4-active.theme-dark .dock-popup .chat-messages-container {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header,
body.g4-v4-active.theme-dark .dock-popup .groups-container,
body.g4-v4-active.theme-dark .dock-popup .dock-submenu,
body.g4-v4-active.theme-dark .dock-popup .uc-chat-message-box,
body.g4-v4-active.theme-dark .dock-popup .flex-container-participants {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-app-background) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .dock-popup .contact-row,
body.g4-v4-active.theme-dark .dock-popup .contact-row-info,
body.g4-v4-active.theme-dark .dock-popup .contact-name-td,
body.g4-v4-active.theme-dark .dock-popup .contact-extension-td,
body.g4-v4-active.theme-dark .dock-popup .contact-info,
body.g4-v4-active.theme-dark .dock-popup .contact-name,
body.g4-v4-active.theme-dark .dock-popup .dock-head-title,
body.g4-v4-active.theme-dark .dock-popup .dock-submenu-buttons,
body.g4-v4-active.theme-dark .dock-popup .contacts-sort-search,
body.g4-v4-active.theme-dark .dock-popup .contacts-sort-dropdown,
body.g4-v4-active.theme-dark .dock-popup h5,
body.g4-v4-active.theme-dark .dock-popup .chat-message,
body.g4-v4-active.theme-dark .dock-popup .uc-chat-user {
  border-color: var(--g4-v4-dark-border) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .dock-popup .contact-extension,
body.g4-v4-active.theme-dark .dock-popup .contact-status-msg,
body.g4-v4-active.theme-dark .dock-popup .contact-recent-msg,
body.g4-v4-active.theme-dark .dock-popup .chat-timestamp,
body.g4-v4-active.theme-dark .dock-popup .muted {
  color: var(--g4-v4-dark-secondary-text) !important;
}

body.g4-v4-active.theme-dark .dock-popup .contact-row:hover,
body.g4-v4-active.theme-dark .dock-popup .recent-chat-table .contact-row:hover {
  background: rgba(var(--g4-v4-brand-blue-rgb), 0.13) !important;
}

/* Match the V3 contact hover: the name and optional status are one row. */
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover > td,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-row-table,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-row-info,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-presence-td,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-name-td,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-extension-td,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-row-msg,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-row-msg > td {
  background: #474e56 !important;
}

body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-name {
  color: #f4f4f4 !important;
}

body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-extension,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-status-msg {
  color: #d9e0e8 !important;
}

body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-buttons .btn {
  border-color: rgba(210, 223, 238, 0.28) !important;
  background: rgba(210, 223, 238, 0.12) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-buttons .btn:hover,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-buttons .btn:focus {
  background: rgba(210, 223, 238, 0.2) !important;
}

body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-buttons .icon-facetime-video,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-buttons .icon-comment,
body.g4-v4-active.theme-dark .dock-popup .contacts-table .contact-row:hover .contact-buttons .icon-call {
  filter: brightness(0) invert(1) !important;
}

body.g4-v4-active.theme-dark .dock-popup .btn,
body.g4-v4-active.theme-dark .dock-popup .dock-submenu-button,
body.g4-v4-active.theme-dark .dock-popup .chat-input-tool,
body.g4-v4-active.theme-dark .dock-popup .contacts-searchbox-icon {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-app-background) !important;
  color: var(--g4-v4-dark-secondary-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active.theme-dark .dock-popup .btn.active,
body.g4-v4-active.theme-dark .dock-popup .btn:active {
  background: rgba(var(--g4-v4-brand-blue-rgb), 0.2) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .dock-popup input,
body.g4-v4-active.theme-dark .dock-popup textarea,
body.g4-v4-active.theme-dark .dock-popup .name-change-bubble,
body.g4-v4-active.theme-dark .dock-popup .dropdown-menu,
body.g4-v4-active.theme-dark .dock-popup .intercom-composer-popover {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .dock-popup input::placeholder,
body.g4-v4-active.theme-dark .dock-popup textarea::placeholder {
  color: var(--g4-v4-dark-secondary-text) !important;
}

/* The New Conversation dock keeps its Selectivity shell and SMS-number footer
   outside the generic input/body selectors above. Theme those two remaining
   vendor surfaces without changing the dock's layout or behavior. */
body.g4-v4-active.theme-dark #conversation-new
  .selectivity-multiple-input-container {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active.theme-dark #conversation-new .sms-chat-footer {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-secondary-text) !important;
}

body.g4-v4-active.theme-dark .chat-popup .uc-chat-message-box .chat-input-tool {
  left: 6px !important;
  border-color: transparent !important;
  background: transparent !important;
}

body.g4-v4-active.theme-dark .chat-popup .uc-chat-message-box .message-to-send {
  padding-left: 32px !important;
}

body.g4-v4-active.theme-dark .dock-popup .chat-well {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-app-background) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .dock-popup .chat-outbound .chat-well {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #fff !important;
}

body.g4-v4-active.theme-dark .dock-popup #contacts-btn-toggle.active,
body.g4-v4-active.theme-dark .dock-popup #recent-btn-toggle.active {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #fff !important;
}

body.g4-v4-active.theme-dark .dock-popup a,
body.g4-v4-active.theme-dark .dock-popup .contacts-message2-text,
body.g4-v4-active.theme-dark .dock-popup .dropdown-label {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active.theme-dark .dock-popup .caret {
  border-top-color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active.theme-dark .dock-popup .dock-submenu-button,
body.g4-v4-active.theme-dark .dock-popup .dock-submenu-button *,
body.g4-v4-active.theme-dark .dock-popup .chat-input-tool,
body.g4-v4-active.theme-dark .dock-popup .chat-input-tool *,
body.g4-v4-active.theme-dark .dock-popup .mms-file-upload-btn,
body.g4-v4-active.theme-dark .dock-popup .mms-file-upload-btn *,
body.g4-v4-active.theme-dark .dock-popup .contacts-searchbox-icon,
body.g4-v4-active.theme-dark .dock-popup .contacts-searchbox-icon *,
body.g4-v4-active.theme-dark .dock-popup .nsicon-sort {
  color: var(--g4-v4-dark-secondary-text) !important;
}

body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header .btn,
body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header .btn i,
body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header .btn span,
body.g4-v4-active.theme-dark .chat-popup .dock-submenu-button,
body.g4-v4-active.theme-dark .chat-popup .dock-submenu-button i,
body.g4-v4-active.theme-dark .chat-popup .dock-submenu-button span {
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .chat-popup .dock-submenu-button i,
body.g4-v4-active.theme-dark .chat-popup .dock-submenu-button span {
  opacity: 1 !important;
}

body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons button.dock-submenu-button {
  border-radius: 4px !important;
  transition: background-color 140ms ease, border-color 140ms ease !important;
}

body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons button.dock-submenu-button > a.dock-submenu-button {
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons button.dock-submenu-button:hover,
body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons button.dock-submenu-button:focus {
  border-color: rgba(210, 223, 238, 0.36) !important;
  background: rgba(210, 223, 238, 0.2) !important;
}

body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons > .dropdown > .dropdown > button.dock-submenu-button:hover,
body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons > .dropdown > .dropdown > button.dock-submenu-button:focus {
  border-color: transparent !important;
  background: transparent !important;
}

body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons > .dropdown > .dropdown > button.dock-submenu-button:hover::before,
body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons > .dropdown > .dropdown > button.dock-submenu-button:focus::before {
  background: rgba(210, 223, 238, 0.2) !important;
}

body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons button.dock-submenu-button:hover *,
body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons button.dock-submenu-button:focus * {
  opacity: 1 !important;
}

body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons button.dock-submenu-button:hover > a.dock-submenu-button,
body.g4-v4-active.theme-dark .chat-popup .dock-submenu-buttons button.dock-submenu-button:focus > a.dock-submenu-button {
  background: transparent !important;
}

body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header .icon-facetime-video,
body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header .icon-comment,
body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header .icon-call,
body.g4-v4-active.theme-dark .chat-popup .dock-submenu-button .icon-facetime-video {
  filter: brightness(0) invert(1) !important;
}

body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header .btn {
  border-color: rgba(210, 223, 238, 0.28) !important;
  background: rgba(210, 223, 238, 0.12) !important;
}

body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header .btn:hover,
body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header .btn:focus {
  background: rgba(210, 223, 238, 0.2) !important;
}

body.g4-v4-active.theme-dark .dock-popup .dock-contacts-header .contacts-searchbox-icon {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.g4-v4-active.theme-dark .dock-popup .contacts-sort-dropdown #sortby .nsicon-sort {
  left: calc(100% - 12px) !important;
}

body.g4-v4-active.theme-dark .dock-popup .intercom-composer-popover-header {
  border-color: var(--g4-v4-dark-border) !important;
}

/* Source: src/v4/css/components/buttons.css */

/* Shared primary actions. Keep route-specific toolbar buttons in route modules. */
#g4-v4-shell .btn.color-primary,
#g4-v4-shell .btn.btn-success,
#g4-v4-shell a.btn.color-primary,
#g4-v4-shell input.btn.color-primary,
#g4-v4-shell button.btn.color-primary,
#g4-v4-shell .btn.helpsy.color-primary,
#g4-v4-shell input[type="submit"].btn.color-primary {
  box-sizing: border-box !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 12px !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: 0 0.7rem 1.45rem rgba(var(--g4-v4-brand-blue-rgb), 0.22) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important;
}

#g4-v4-shell .btn.color-primary:hover,
#g4-v4-shell .btn.btn-success:hover,
#g4-v4-shell .btn.btn-success:focus,
#g4-v4-shell a.btn.color-primary:hover,
#g4-v4-shell input.btn.color-primary:hover,
#g4-v4-shell button.btn.color-primary:hover {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
}

#g4-v4-shell .btn.color-primary:disabled,
#g4-v4-shell .btn.color-primary.disabled,
#g4-v4-shell .btn.color-primary[aria-disabled="true"] {
  opacity: 0.65;
  cursor: default;
}

#g4-v4-shell.theme-dark .btn.color-primary,
#g4-v4-shell.theme-dark .btn.btn-success,
#g4-v4-shell.theme-dark a.btn.color-primary,
#g4-v4-shell.theme-dark input.btn.color-primary,
#g4-v4-shell.theme-dark button.btn.color-primary {
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
}

#g4-v4-shell.theme-dark .btn.color-primary:hover,
#g4-v4-shell.theme-dark .btn.btn-success:hover,
#g4-v4-shell.theme-dark .btn.btn-success:focus,
#g4-v4-shell.theme-dark a.btn.color-primary:hover,
#g4-v4-shell.theme-dark input.btn.color-primary:hover,
#g4-v4-shell.theme-dark button.btn.color-primary:hover {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-dark-surface) !important;
}

/* Plain vendor buttons in page toolbars are primary actions in the accepted V3 design. */
#g4-v4-shell .action-container-left > .btn,
#g4-v4-shell .action-container-right .btn {
  box-sizing: border-box !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 12px !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}

#g4-v4-shell .action-container-left > .btn:hover,
#g4-v4-shell .action-container-right .btn:hover {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
}

#g4-v4-shell.theme-dark .action-container-left > .btn:hover,
#g4-v4-shell.theme-dark .action-container-right .btn:hover {
  background: var(--g4-v4-dark-surface) !important;
}

/* Back actions are secondary controls in V3, including the wrapped variants
   used by Call History subpages. */
body.g4-v4-active #g4-v4-shell .back-btn {
  box-sizing: border-box !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(28, 33, 67, 0.18) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: #F4F7FA !important;
  background-image: none !important;
  color: var(--g4-v4-brand-navy) !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell .back-btn:hover,
body.g4-v4-active #g4-v4-shell .back-btn:focus {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
  outline: none !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell .back-btn {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell .back-btn:hover,
body.g4-v4-active.theme-dark #g4-v4-shell .back-btn:focus {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-dark-surface) !important;
}

/*
 * NetSapiens renders the shared page refresh action as an anchor on some
 * routes and as button-like vendor markup on others. Keep its complete state
 * model here so route-level base styles cannot suppress hover/focus colors.
 */
body.g4-v4-active #g4-v4-shell #pageRefresh {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--g4-v4-control-height) !important;
  min-width: var(--g4-v4-control-height) !important;
  max-width: var(--g4-v4-control-height) !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 120ms ease, border-color 120ms ease !important;
}

body.g4-v4-active #g4-v4-shell #pageRefresh:hover,
body.g4-v4-active #g4-v4-shell #pageRefresh:focus {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
  outline: none !important;
}

body.g4-v4-active #g4-v4-shell.theme-dark #pageRefresh:hover,
body.g4-v4-active #g4-v4-shell.theme-dark #pageRefresh:focus {
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active #g4-v4-shell #pageRefresh .icon-refresh {
  position: static !important;
  margin: 0 !important;
  color: #FFF !important;
  line-height: 1 !important;
  filter: brightness(0) invert(1) !important;
}

#g4-v4-shell .action-container-right .btn-group {
  display: inline-flex !important;
  gap: var(--g4-v4-control-gap) !important;
}

/* Native route toolbars reuse Bootstrap's hide class to keep controls for
   inactive report tabs out of the layout. Preserve that state even when the
   shared action-row rule above supplies the visible groups' flex layout. */
#g4-v4-shell .action-container-right .btn-group.hide {
  display: none !important;
}

#g4-v4-shell .action-container-right .btn-group > .btn {
  margin: 0 !important;
  border-radius: var(--g4-v4-radius) !important;
}

/* NetSapiens reuses an empty legacy icon element for icon-only add buttons.
   Draw one deterministic plus here so every shared add action gets the same
   glyph without route-specific sprite or font repairs. */
body.g4-v4-active #g4-v4-shell .btn > i.icon-plus:only-child {
  position: relative !important;
  display: block !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  background: none !important;
  background-image: none !important;
  background-position: 0 0 !important;
  filter: none !important;
}

body.g4-v4-active #g4-v4-shell .btn > i.icon-plus:only-child::before,
body.g4-v4-active #g4-v4-shell .btn > i.icon-plus:only-child::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  border-radius: 1px !important;
  background: #FFF !important;
  transform: translate(-50%, -50%) !important;
}

body.g4-v4-active #g4-v4-shell .btn > i.icon-plus:only-child::before {
  width: 10px !important;
  height: 2px !important;
}

body.g4-v4-active #g4-v4-shell .btn > i.icon-plus:only-child::after {
  width: 2px !important;
  height: 10px !important;
}

/* Source: src/v4/css/components/forms.css */

/* Shared toolbar searches. Page-specific widths belong in route modules. */
#g4-v4-shell .form-search .input-append > input.search-query,
#g4-v4-shell .form-search .input-append > input.ui-autocomplete-input {
  box-sizing: border-box !important;
  width: 240px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: none !important;
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
}

#g4-v4-shell .form-search .input-append > input.search-query:focus,
#g4-v4-shell .form-search .input-append > input.ui-autocomplete-input:focus {
  outline: none !important;
}

#g4-v4-shell .form-search .input-append > input.search-query:focus-visible,
#g4-v4-shell .form-search .input-append > input.ui-autocomplete-input:focus-visible {
  border-color: var(--g4-v4-brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(var(--g4-v4-brand-blue-rgb), 0.15) !important;
}

/* Keep native selection controls lightweight while branding their selected state. */
body.g4-v4-active input[type="checkbox"],
body.g4-v4-active input[type="radio"] {
  accent-color: var(--g4-v4-brand-blue) !important;
}

/* Source: src/v4/css/components/compound-controls.css */

/* Adjacent controls share one visual perimeter; only the outside corners are rounded. */
#g4-v4-shell .input-append:not(.hide):has(> input, > select, > textarea, > .add-on, > .btn),
#g4-v4-shell .input-prepend:not(.hide):has(> input, > select, > textarea, > .add-on, > .btn) {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  vertical-align: top !important;
}

#g4-v4-shell .input-append:has(> input, > select, > textarea, > .add-on, > .btn)
  > :first-child:not(:last-child),
#g4-v4-shell .input-prepend:has(> input, > select, > textarea, > .add-on, > .btn)
  > :first-child:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#g4-v4-shell .input-append:has(> input, > select, > textarea, > .add-on, > .btn)
  > :last-child:not(:first-child),
#g4-v4-shell .input-prepend:has(> input, > select, > textarea, > .add-on, > .btn)
  > :last-child:not(:first-child) {
  margin-left: -1px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Preserve square seams for groups containing more than two controls. */
#g4-v4-shell .input-append:has(> input, > select, > textarea, > .add-on, > .btn)
  > :not(:first-child):not(:last-child),
#g4-v4-shell .input-prepend:has(> input, > select, > textarea, > .add-on, > .btn)
  > :not(:first-child):not(:last-child) {
  margin-left: -1px !important;
  border-radius: 0 !important;
}

/*
 * Bootstrap also uses .btn-group for unrelated actions. Merge only a true
 * split-button group containing a dropdown caret. Keep :has() in the pending
 * minimum-browser compatibility inventory.
 */
#g4-v4-shell .btn-group:not(.hide):has(> .dropdown-toggle) {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}

#g4-v4-shell .btn-group:has(> .dropdown-toggle) > :first-child:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#g4-v4-shell .btn-group:has(> .dropdown-toggle) > .dropdown-toggle {
  margin-left: -1px !important;
  border-left-color: #339ee5 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

#g4-v4-shell .btn-group:has(> .dropdown-toggle) > .dropdown-toggle > .caret {
  border-top-color: #fff !important;
}

/* Modal date fields use the accepted 220 px input plus 30 px calendar action. */
body.g4-v4-active #g4-v4-shell .modal .modal-body
  .input-append:has(> input, > select, > textarea, > .add-on, > .btn) {
  box-sizing: border-box !important;
  width: 250px !important;
  height: var(--g4-v4-control-height) !important;
}

body.g4-v4-active #g4-v4-shell .modal .modal-body .input-append > input.date-field {
  box-sizing: border-box !important;
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: var(--g4-v4-control-height) !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
}

body.g4-v4-active #g4-v4-shell .modal .modal-body .input-append > .add-on {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 var(--g4-v4-control-height) !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--g4-v4-control-height) !important;
  min-width: var(--g4-v4-control-height) !important;
  max-width: var(--g4-v4-control-height) !important;
  height: var(--g4-v4-control-height) !important;
  padding: 4px !important;
  border: 1px solid var(--g4-v4-light-border) !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
  background: var(--g4-v4-light-secondary-surface) !important;
  color: var(--g4-v4-brand-navy) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  margin-left: 0 !important;
  vertical-align: middle !important;
}

body.g4-v4-active #g4-v4-shell .modal .modal-body
  .input-append > .add-on > .icon-calendar {
  display: block !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell .modal .modal-body .input-append > .add-on,
body.g4-v4-active.theme-dark #g4-v4-shell .modal .modal-body .input-prepend > .add-on {
  border-color: var(--g4-v4-dark-border) !important;
  background: #181D24 !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active #g4-v4-shell .modal .modal-body .input-prepend > .add-on {
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell .modal .modal-body
  .input-append > .add-on > .icon-calendar {
  filter: invert(1) brightness(2.5) contrast(1.5) !important;
}

/* Source: src/v4/css/components/autocomplete.css */

/* Autocomplete menus are appended outside the shell, so scope them through the active body. */
body.g4-v4-active .ui-autocomplete {
  box-sizing: border-box !important;
  padding: 2px !important;
  border: 1px solid var(--g4-v4-light-border) !important;
  border-radius: 0 !important;
  background: #E7EDF4 !important;
  color: var(--g4-v4-brand-navy) !important;
  box-shadow: none !important;
}

body.g4-v4-active .ui-autocomplete .ui-menu-item,
body.g4-v4-active .ui-autocomplete .ui-menu-item a,
body.g4-v4-active .ui-autocomplete .ui-menu-item-wrapper {
  color: var(--g4-v4-brand-navy) !important;
}

body.g4-v4-active .ui-autocomplete .ui-state-active,
body.g4-v4-active .ui-autocomplete .ui-state-focus,
body.g4-v4-active .ui-autocomplete .ui-menu-item a:hover {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark .ui-autocomplete {
  border-color: #333 !important;
  background: #000 !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark .ui-autocomplete .ui-menu-item,
body.g4-v4-active.theme-dark .ui-autocomplete .ui-menu-item a,
body.g4-v4-active.theme-dark .ui-autocomplete .ui-menu-item-wrapper {
  color: #FFF !important;
}

/* Source: src/v4/css/components/popovers.css */

/* Bootstrap popovers are appended to body, outside the V4 shell. */
body.g4-v4-active .popover {
  --g4-v4-popover-bg: #E7EDF4;
  --g4-v4-popover-title-bg: #E7EDF4;
  --g4-v4-popover-border: var(--g4-v4-light-border);
  --g4-v4-popover-text: var(--g4-v4-brand-navy);
  border-color: var(--g4-v4-popover-border) !important;
  border-radius: 6px !important;
  background: var(--g4-v4-popover-bg) !important;
  color: var(--g4-v4-popover-text) !important;
  box-shadow: 0 1rem 2rem rgba(28, 33, 67, 0.14) !important;
}

body.g4-v4-active .popover .popover-title,
body.g4-v4-active .popover .popover-content {
  background: var(--g4-v4-popover-bg) !important;
  color: var(--g4-v4-popover-text) !important;
}

body.g4-v4-active .popover .popover-title {
  border-bottom-color: var(--g4-v4-popover-border) !important;
  background: var(--g4-v4-popover-title-bg) !important;
}

body.g4-v4-active .popover.top > .arrow {
  border-top-color: var(--g4-v4-popover-border) !important;
}

body.g4-v4-active .popover.top > .arrow::after {
  border-top-color: var(--g4-v4-popover-bg) !important;
}

body.g4-v4-active .popover.bottom > .arrow {
  border-bottom-color: var(--g4-v4-popover-border) !important;
}

body.g4-v4-active .popover.bottom > .arrow::after {
  border-bottom-color: var(--g4-v4-popover-bg) !important;
}

body.g4-v4-active .popover.left > .arrow {
  border-left-color: var(--g4-v4-popover-border) !important;
}

body.g4-v4-active .popover.left > .arrow::after {
  border-left-color: var(--g4-v4-popover-bg) !important;
}

body.g4-v4-active .popover.right > .arrow {
  border-right-color: var(--g4-v4-popover-border) !important;
}

body.g4-v4-active .popover.right > .arrow::after {
  border-right-color: var(--g4-v4-popover-bg) !important;
}

body.g4-v4-active.theme-dark .popover {
  --g4-v4-popover-bg: var(--g4-v4-dark-app-background);
  --g4-v4-popover-title-bg: #282E36;
  --g4-v4-popover-border: rgba(210, 223, 238, 0.18);
  --g4-v4-popover-text: var(--g4-v4-dark-text);
  box-shadow: 0 0.85rem 1.7rem rgba(0, 0, 0, 0.42) !important;
}

/* Source: src/v4/css/components/icons.css */

/* NetSapiens uses a dark sprite for informational glyphs. Invert that one
   semantic icon class in dark mode; route refinements may adjust intensity. */
body.g4-v4-active.theme-dark #g4-v4-shell i.icon-info-sign {
  filter: invert(1) brightness(1) !important;
}

/* Timing controls use the portal's dark Glyphicon sprite even when their
   button surface is Grid4 blue. Keep the shared clock glyph white. */
body.g4-v4-active #g4-v4-shell .sim-delay-btn > i.icon-time {
  filter: brightness(0) invert(1) !important;
}

/* Source: src/v4/css/components/tables.css */

/* Shared list-table structure; route modules may refine exceptional columns or toolbars. */
#g4-v4-shell {
  --g4-v4-table-header-bg: #B3C3D4;
  --g4-v4-table-row-bg: #DFEAF5;
  --g4-v4-table-text: var(--g4-v4-brand-navy);
}

#g4-v4-shell.theme-dark {
  --g4-v4-table-header-bg: #282E36;
  --g4-v4-table-row-bg: #383E45;
  --g4-v4-table-text: #EDF2F8;
}

#g4-v4-shell .table-container {
  box-sizing: border-box !important;
  padding: var(--g4-v4-surface-inset) !important;
  overflow-x: auto !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) var(--g4-v4-radius) 0 0 !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-table-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}

#g4-v4-shell .table-container > table.table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-table-text) !important;
}

#g4-v4-shell .table-container > table.table > thead > tr > th {
  box-sizing: content-box !important;
  padding: 0.62rem 0.75rem !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  box-shadow: none !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 15px !important;
  vertical-align: middle !important;
}

#g4-v4-shell.theme-dark .table-container > table.table > thead > tr > th {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#g4-v4-shell .table-container > table.table > thead > tr > th:first-child {
  padding-right: 0.5rem !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

#g4-v4-shell .table-container > table.table > thead > tr > th:last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

#g4-v4-shell .table-container > table.table .checkboxes {
  width: 2.35rem !important;
  min-width: 2.35rem !important;
}

#g4-v4-shell .table-container > table.table > tbody > tr {
  height: 29px !important;
  background: transparent !important;
  color: var(--g4-v4-table-text) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05) !important;
  transform: none !important;
}

#g4-v4-shell .table-container > table.table > tbody > tr > td {
  box-sizing: border-box !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-table-text) !important;
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 20px !important;
  vertical-align: middle !important;
}

#g4-v4-shell.theme-dark .table-container > table.table > tbody > tr > td {
  border-top-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

#g4-v4-shell .table-container > table.table > tbody > tr > td:first-child {
  padding-right: 0.5rem !important;
  padding-left: 0.75rem !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

#g4-v4-shell .table-container > table.table > tbody > tr > td:last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

#g4-v4-shell .table-container > table.table > tbody > tr:hover,
#g4-v4-shell .table-container > table.table > tbody > tr:hover > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  box-shadow: none !important;
  transform: none !important;
}

#g4-v4-shell .table-container > table.table > tbody > tr:hover a {
  color: #EEF2F8 !important;
}

/* Table-column pickers sit outside the table surface and retain Bootstrap's
   white menu background unless their dark palette is applied explicitly. */
#g4-v4-shell.theme-dark .tablecolumn.btn-group > .dropdown-menu {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(24, 29, 36, 0.96) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.35) !important;
}

#g4-v4-shell.theme-dark .tablecolumn.btn-group > .dropdown-menu p.muted {
  color: var(--g4-v4-text-secondary) !important;
}

#g4-v4-shell.theme-dark .tablecolumn.btn-group > .dropdown-menu label {
  color: var(--g4-v4-text) !important;
}

#g4-v4-shell .table-container > table.table td.action-buttons {
  line-height: 0 !important;
}

#g4-v4-shell .table-container > table.table td.action-buttons > a,
#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown > a.dropdown-toggle,
#g4-v4-shell .table-container > table.table > tbody > tr > td:last-child > a.helpsy {
  color: var(--g4-v4-brand-blue) !important;
  opacity: 0.58 !important;
  vertical-align: middle !important;
}

#g4-v4-shell .table-container > table.table > tbody > tr:hover
  td.action-buttons > a,
#g4-v4-shell .table-container > table.table > tbody > tr:hover
  td.action-buttons > .dropdown > a.dropdown-toggle,
#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown.open > a.dropdown-toggle {
  opacity: 1 !important;
}

/* Legacy in-row action menus are visually shared table controls. */
#g4-v4-shell .table-container > table.table td.action-buttons > .dropdown {
  position: relative !important;
}

#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu {
  position: fixed !important;
  top: var(--g4-v4-action-menu-top, -10000px) !important;
  right: auto !important;
  left: var(--g4-v4-action-menu-left, -10000px) !important;
  z-index: 50010 !important;
  display: none !important;
  min-width: 172px !important;
  margin-top: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) 0 var(--g4-v4-radius) var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  box-shadow: 0 12px 28px rgba(28, 33, 67, 0.14) !important;
  opacity: 1 !important;
  filter: none !important;
}

#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown.g4-v4-manage-open > .dropdown-menu {
  display: block !important;
}

#g4-v4-shell.theme-dark .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34) !important;
}

#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu > li {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu > li + li {
  border-top: 1px solid rgba(28, 33, 67, 0.08) !important;
}

#g4-v4-shell.theme-dark .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu > li + li {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu > li > a {
  display: block !important;
  padding: 9px 16px !important;
  color: var(--g4-v4-brand-navy) !important;
  background: transparent !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  text-align: left !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  filter: none !important;
}

#g4-v4-shell.theme-dark .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu > li > a {
  color: var(--g4-v4-dark-text) !important;
}

#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu > li:hover > a,
#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu > li > a:hover,
#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu > li > a:focus,
#g4-v4-shell .table-container > table.table td.action-buttons
  > .dropdown > .dropdown-menu > .active > a {
  color: #FFF !important;
  background: var(--g4-v4-brand-blue) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

#g4-v4-shell .table-container > table.table > tbody > tr.g4-v4-manage-active,
#g4-v4-shell .table-container > table.table > tbody > tr.g4-v4-manage-active > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  box-shadow: none !important;
}

#g4-v4-shell .table-container > table.table > tbody
  > tr.g4-v4-manage-active > td > a,
#g4-v4-shell .table-container > table.table > tbody
  > tr.g4-v4-manage-active td.action-buttons > a,
#g4-v4-shell .table-container > table.table > tbody
  > tr.g4-v4-manage-active td.action-buttons > .dropdown > a.dropdown-toggle {
  color: #FFF !important;
  opacity: 1 !important;
}

/* Source: src/v4/css/components/pagination.css */

/* Shared list pagination: compact V3 tiles without Bootstrap's joined perimeter. */
#g4-v4-shell .pagination {
  display: flex !important;
  align-items: center !important;
}

#g4-v4-shell .pagination > ul {
  display: flex !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

#g4-v4-shell .pagination > ul > li {
  display: block !important;
  margin: 0 !important;
}

#g4-v4-shell .pagination > ul > li > a {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--g4-v4-control-height) !important;
  min-width: var(--g4-v4-control-height) !important;
  height: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-brand-blue) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

#g4-v4-shell .pagination > ul > li > a:hover,
#g4-v4-shell .pagination > ul > li > a:focus {
  background: var(--g4-v4-surface-secondary) !important;
  color: var(--g4-v4-brand-blue) !important;
}

#g4-v4-shell .pagination > ul > li.active > a {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

#g4-v4-shell .pagination > ul > li.disabled > a {
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-brand-blue) !important;
  cursor: default !important;
}

/* Pagination metadata such as "View:" is emitted as a disabled anchor with
   no destination. Present these shared labels as plain text while retaining
   normal disabled Previous/Next tiles, which still carry href attributes. */
#g4-v4-shell .pagination > ul > li.disabled
  > a:not([href]):not(:has(*)) {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--g4-v4-text) !important;
}

/* Legacy toolbar filters apply a 3px inline top margin to native checkboxes.
   Neutralize only that exact pagination-filter offset without resizing inputs. */
#g4-v4-shell .form-search .pagination label.checkbox
  > input[type="checkbox"][style*="margin-top"] {
  position: relative !important;
  top: -1.5px !important;
}

/* Source: src/v4/css/components/chips.css */

/* Compact configuration tags; avoid changing unrelated Bootstrap .label elements. */
#g4-v4-shell .ui-config-table .label {
  box-sizing: content-box !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.3rem !important;
  padding: 0.14rem 0.48rem !important;
  margin: 0 0.35rem 0.35rem 0 !important;
  border: 1px solid rgba(28, 33, 67, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(28, 33, 67, 0.16) !important;
  color: var(--g4-v4-brand-navy) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 0.748rem !important;
  letter-spacing: 0.02em !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#g4-v4-shell.theme-dark .ui-config-table .label {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #E8EEF6 !important;
}

/* Source: src/v4/css/components/empty-states.css */

/* Native portal empty-result wrapper, presented as one compact centered surface. */
#g4-v4-shell .nonecreated {
  box-sizing: content-box !important;
  width: 32rem !important;
  max-width: calc(100% - 3rem) !important;
  padding: 1.25rem 1.5rem !important;
  margin: 4rem auto 0 !important;
  border: 1px dashed var(--g4-v4-light-border) !important;
  border-radius: 0.5rem !important;
  background: rgba(210, 220, 231, 0.45) !important;
  color: #75839B !important;
  text-align: center !important;
}

#g4-v4-shell .nonecreated h3 {
  padding: 0.25rem !important;
  margin: 0.667rem 0 0 !important;
  color: inherit !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
}

#g4-v4-shell .nonecreated .btn {
  box-sizing: border-box !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 12px !important;
  margin: 0 0.5rem 0 0 !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: 0.375rem !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}

#g4-v4-shell.theme-dark .nonecreated {
  border-color: var(--g4-v4-dark-border) !important;
  background: rgba(24, 29, 36, 0.45) !important;
  color: #AAB4C0 !important;
}

/* Source: src/v4/css/components/tabs.css */

/* Shared primary page tabs. Inner modal tabs can define a denser treatment separately. */
#g4-v4-shell .nav.nav-tabs {
  padding: 0 !important;
  margin-bottom: 0.9rem !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
}

#g4-v4-shell .nav.nav-tabs > li {
  margin: 0 0 -1px 0.35rem !important;
}

#g4-v4-shell .nav.nav-tabs > li > a {
  box-sizing: border-box !important;
  padding: 0.62rem 1rem !important;
  margin: 0 !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: 0.65rem 0.65rem 0 0 !important;
  background: var(--g4-v4-surface-secondary) !important;
  color: var(--g4-v4-brand-blue) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}

#g4-v4-shell .nav.nav-tabs > li.active > a,
#g4-v4-shell .nav.nav-tabs > li.active > a:hover,
#g4-v4-shell .nav.nav-tabs > li.active > a:focus {
  border-color: rgba(var(--g4-v4-brand-blue-rgb), 0.4) !important;
  border-bottom-color: var(--g4-v4-surface) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: 0 0.8rem 1.35rem rgba(var(--g4-v4-brand-blue-rgb), 0.08) !important;
  font-weight: 700 !important;
}

#g4-v4-shell.theme-dark .nav.nav-tabs > li > a {
  border-color: rgba(210, 223, 238, 0.18) !important;
  background: var(--g4-v4-table-header-bg) !important;
}

#g4-v4-shell.theme-dark .nav.nav-tabs > li.active > a,
#g4-v4-shell.theme-dark .nav.nav-tabs > li.active > a:hover,
#g4-v4-shell.theme-dark .nav.nav-tabs > li.active > a:focus {
  border-color: rgba(var(--g4-v4-brand-blue-rgb), 0.34) !important;
  border-bottom-color: var(--g4-v4-surface) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

/* Source: src/v4/css/components/modals.css */

/* Shared modal shell. Route modules should only add controls unique to their workflow. */
body.g4-v4-active .modal {
  box-sizing: border-box !important;
  width: 600px !important;
  border: 1px solid var(--g4-v4-light-border) !important;
  border-radius: 6px !important;
  background: var(--g4-v4-light-surface) !important;
  color: var(--g4-v4-brand-navy) !important;
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* Preserve the portal's existing compact-modal signal. Bootstrap uses span7
   for the narrower 540px dialogs whose form rows are designed to stack. */
body.g4-v4-active .modal.span7 {
  width: 540px !important;
}

/* Center measured dialogs from their rendered box instead of a cached height.
   Bootstrap's top transition otherwise exposes a second position correction when
   late modal styles change the measured height. */
body.g4-v4-active .modal.g4-v4-modal-measured:not(.g4-v4-modal-viewport-fit) {
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transition-property: opacity !important;
}

body.g4-v4-active .modal.g4-v4-modal-viewport-fit {
  margin-top: 0 !important;
  transform: none !important;
  transition-property: opacity !important;
}

body.g4-v4-active .modal .modal-header {
  box-sizing: border-box !important;
  padding: 9px 15px !important;
  border-bottom: 1px solid var(--g4-v4-light-border) !important;
  background: var(--g4-v4-light-secondary-surface) !important;
  color: var(--g4-v4-brand-navy) !important;
}

body.g4-v4-active .modal .modal-header h4 {
  padding: 0.25rem !important;
  color: inherit !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
}

body.g4-v4-active .modal .modal-header .close {
  margin: 2px 0.5rem 0 0 !important;
  border: 0 !important;
  border-radius: var(--g4-v4-radius) !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
  opacity: 0.6 !important;
}

body.g4-v4-active .modal .modal-body {
  box-sizing: border-box !important;
  max-height: calc(100vh - 11rem) !important;
  padding: 15px !important;
  overflow-y: auto !important;
  background: var(--g4-v4-light-surface) !important;
  color: var(--g4-v4-brand-navy) !important;
}

/* Legacy accordion headers use the same surface as their containing modal. */
body.g4-v4-active .modal .accordion-heading {
  background: var(--g4-v4-light-surface) !important;
  color: var(--g4-v4-brand-navy) !important;
}

body.g4-v4-active .modal .control-label {
  width: auto !important;
  margin-bottom: 0.1rem !important;
  color: inherit !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

body.g4-v4-active .modal .modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
body.g4-v4-active .modal .modal-body select,
body.g4-v4-active .modal .modal-body textarea {
  box-sizing: border-box !important;
  border: 1px solid var(--g4-v4-light-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-light-surface) !important;
  color: var(--g4-v4-brand-navy) !important;
  box-shadow: none !important;
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.8125rem !important;
}

body.g4-v4-active .modal .modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
body.g4-v4-active .modal .modal-body select,
body.g4-v4-active
  .modal:not(#add-phonenumber):not(#edit-phone):not(#add-phone):not(#write-uiconfig):not(#bulkedit-phones)
  .modal-body textarea,
body.g4-v4-active #add-phonenumber .modal-body textarea:not(#notes),
body.g4-v4-active #write-uiconfig .modal-body textarea:not(#notes),
body.g4-v4-active :is(#edit-phone, #add-phone) .modal-body
  textarea:not(#PhoneOverrides):not(#PhoneNotes) {
  width: 250px !important;
  max-width: 250px !important;
}

body.g4-v4-active .modal .modal-body input:disabled,
body.g4-v4-active .modal .modal-body select:disabled,
body.g4-v4-active .modal .modal-body textarea:disabled {
  background: #D2DCE7 !important;
  color: #75839B !important;
  opacity: 1 !important;
}

body.g4-v4-active .modal .modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
body.g4-v4-active .modal .modal-body select {
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 12px !important;
}

/* The portal's micro class is an intentional compact numeric field, not a
   standard modal control. Preserve its native content width and 30px rendered
   height wherever that semantic class is used. */
body.g4-v4-active #g4-v4-shell .modal .modal-body input.micro {
  box-sizing: content-box !important;
  width: 40px !important;
  max-width: 40px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
}

body.g4-v4-active .modal .modal-body textarea {
  padding: 8px 12px !important;
  resize: both !important;
}

body.g4-v4-active
  .modal:not(#add-phonenumber):not(#edit-phone):not(#add-phone):not(#write-uiconfig):not(#bulkedit-phones)
  .modal-body textarea,
body.g4-v4-active #add-phonenumber .modal-body textarea:not(#notes),
body.g4-v4-active #write-uiconfig .modal-body textarea:not(#notes),
body.g4-v4-active :is(#edit-phone, #add-phone) .modal-body
  textarea:not(#PhoneOverrides):not(#PhoneNotes) {
  height: 78.75px !important;
  min-height: 78.75px !important;
}

body.g4-v4-active .modal .modal-body
  .input-append:not(.hide):has(> input, > select, > textarea, > .add-on, > .btn) {
  display: inline-flex !important;
  width: 250px !important;
  height: var(--g4-v4-control-height) !important;
}

body.g4-v4-active .modal .modal-body .input-append > input {
  width: 220px !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.g4-v4-active .modal .modal-body .input-append > .btn,
body.g4-v4-active .modal .modal-body .input-append > .add-on {
  box-sizing: border-box !important;
  width: var(--g4-v4-control-height) !important;
  height: var(--g4-v4-control-height) !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.g4-v4-active .modal .modal-footer {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--g4-v4-control-gap) !important;
  padding: 14px 2.75rem 15px 15px !important;
  border-top: 1px solid var(--g4-v4-light-border) !important;
  border-radius: 0 0 6px 6px !important;
  background: var(--g4-v4-light-secondary-surface) !important;
  color: var(--g4-v4-brand-navy) !important;
}

body.g4-v4-active .modal .modal-footer .btn {
  box-sizing: border-box !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  border-radius: var(--g4-v4-radius) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}

body.g4-v4-active .modal .modal-footer .btn.cancel {
  min-width: 75px !important;
  border: 1px solid var(--g4-v4-light-border) !important;
  background: #F4F7FA !important;
  color: var(--g4-v4-brand-navy) !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
}

/* Import dialogs are the accepted compact modal variant. */
body.g4-v4-active .modal[id^="import-"] {
  width: 480px !important;
}

body.g4-v4-active .modal[id^="import-"] .modal-body
  .control-group:has(.fileupload input[type="file"]) {
  display: flex !important;
  align-items: center !important;
  gap: var(--g4-v4-control-gap) !important;
}

body.g4-v4-active .modal[id^="import-"] .modal-body
  .control-group:has(.fileupload input[type="file"]) > .control-label {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

body.g4-v4-active .modal[id^="import-"] .modal-body
  .control-group:has(.fileupload input[type="file"]) > .controls {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

body.g4-v4-active .modal[id^="import-"] .modal-footer {
  display: block !important;
  padding: 14px 15px 15px !important;
  text-align: right !important;
}

body.g4-v4-active .modal[id^="import-"] .modal-footer > .btn {
  display: inline-block !important;
  margin: 0 7.5px 0 4px !important;
  vertical-align: middle !important;
}

body.g4-v4-active .modal[id^="import-"] .modal-footer > .btn:first-child {
  margin-left: 0 !important;
}

body.g4-v4-active .modal[id^="import-"] .modal-footer > a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* File-upload Browse controls and import template downloads are primary task actions in V3. */
body.g4-v4-active .modal .modal-body .fileupload.btn,
body.g4-v4-active .modal[id^="import-"] .modal-footer > .btn.helpsy {
  box-sizing: border-box !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 12px !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}

body.g4-v4-active .modal .modal-body .fileupload.btn {
  margin-right: 0.5rem !important;
}

body.g4-v4-active .modal .modal-body .fileupload.btn > span {
  color: #FFF !important;
}

body.g4-v4-active .modal .modal-body .fileupload.btn:hover,
body.g4-v4-active .modal .modal-body .fileupload.btn:focus,
body.g4-v4-active .modal[id^="import-"] .modal-footer > .btn.helpsy:hover,
body.g4-v4-active .modal[id^="import-"] .modal-footer > .btn.helpsy:focus {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark .modal .modal-body .fileupload.btn:hover,
body.g4-v4-active.theme-dark .modal .modal-body .fileupload.btn:focus,
body.g4-v4-active.theme-dark .modal[id^="import-"] .modal-footer > .btn.helpsy:hover,
body.g4-v4-active.theme-dark .modal[id^="import-"] .modal-footer > .btn.helpsy:focus {
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active .modal .modal-footer .btn.color-primary,
body.g4-v4-active .modal .modal-footer input.btn.color-primary,
body.g4-v4-active #g4-v4-shell .modal .modal-footer .btn.color-primary,
body.g4-v4-active #g4-v4-shell .modal .modal-footer input.btn.color-primary {
  border: 1px solid var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

body.g4-v4-active .modal .modal-footer .btn:disabled,
body.g4-v4-active .modal .modal-footer .btn.disabled {
  opacity: 0.65 !important;
  cursor: default !important;
}

body.g4-v4-active.theme-dark .modal,
body.g4-v4-active.theme-dark .modal .modal-header,
body.g4-v4-active.theme-dark .modal .modal-body {
  border-color: rgba(210, 223, 238, 0.18) !important;
  background: var(--g4-v4-dark-app-background) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .modal .accordion-heading {
  background: var(--g4-v4-dark-app-background) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .modal .modal-footer {
  border-color: var(--g4-v4-dark-border) !important;
  background: #282E36 !important;
  color: var(--g4-v4-dark-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active.theme-dark .modal .modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
body.g4-v4-active.theme-dark .modal .modal-body select,
body.g4-v4-active.theme-dark .modal .modal-body textarea {
  border-color: rgba(210, 223, 238, 0.18) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .modal .modal-body input:disabled,
body.g4-v4-active.theme-dark .modal .modal-body select:disabled,
body.g4-v4-active.theme-dark .modal .modal-body textarea:disabled {
  border-color: rgba(210, 223, 238, 0.16) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-secondary-text) !important;
}

/* Bootstrap read-only spans, Selectivity shells, and fieldset legends sit
   outside the native input selectors above but share the modal palette. */
body.g4-v4-active.theme-dark .modal .modal-body .uneditable-input,
body.g4-v4-active.theme-dark .modal .modal-body
  .selectivity-multiple-input-container {
  border-color: rgba(210, 223, 238, 0.18) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-secondary-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active.theme-dark .modal .modal-body legend {
  border-bottom-color: var(--g4-v4-dark-border) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark .modal .modal-footer .btn.cancel {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--g4-v4-dark-text) !important;
}

/* Firebase uses an all-primary footer and a narrower read-only filename field in V3. */
body.g4-v4-active #write-firebase .modal-footer {
  gap: 15px !important;
  padding-right: 23px !important;
}

body.g4-v4-active #write-firebase .modal-footer::before,
body.g4-v4-active #write-firebase .modal-footer::after {
  display: none !important;
}

body.g4-v4-active #write-firebase .modal-footer > button.btn[data-dismiss="modal"] {
  min-width: 75px !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
}

body.g4-v4-active #write-firebase #UiconfigFile {
  width: 237px !important;
  max-width: 237px !important;
  border-radius: 3px !important;
}

body.g4-v4-active.theme-dark #write-firebase #UiconfigFile {
  border-color: rgba(210, 223, 238, 0.16) !important;
  color: var(--g4-v4-dark-secondary-text) !important;
}

body.g4-v4-active .modal.g4-v4-modal-viewport-fit {
  overflow: hidden !important;
}

/* Source: src/v4/css/components/switches.css */

/* Shared Bootstrap switches used by manager and user-portal forms. */
#g4-v4-shell .bootstrap-switch {
  box-sizing: border-box !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-bottom-color: rgba(0, 0, 0, 0.25) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

#g4-v4-shell .bootstrap-switch .bootstrap-switch-container {
  display: flex !important;
  align-items: stretch !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: var(--g4-v4-surface) !important;
  background-image: none !important;
  line-height: 0 !important;
}

#g4-v4-shell .bootstrap-switch .bootstrap-switch-handle-on,
#g4-v4-shell .bootstrap-switch .bootstrap-switch-handle-off,
#g4-v4-shell .bootstrap-switch .bootstrap-switch-label {
  box-sizing: border-box !important;
  display: block !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: top !important;
}

#g4-v4-shell .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
#g4-v4-shell .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  border-color: #339EE5 !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#g4-v4-shell .bootstrap-switch .bootstrap-switch-label {
  border-top: 0 !important;
  border-right: 1px solid rgba(28, 33, 67, 0.28) !important;
  border-bottom: 0 !important;
  border-left: 1px solid rgba(28, 33, 67, 0.28) !important;
  background: var(--g4-v4-surface) !important;
  background-image: none !important;
  color: var(--g4-v4-brand-navy) !important;
  box-shadow:
    inset 0 0 0 1px rgba(28, 33, 67, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  text-shadow: none !important;
}

#g4-v4-shell .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  border-color: rgba(0, 0, 0, 0.1) !important;
  border-bottom-color: rgba(0, 0, 0, 0.25) !important;
  background: #F0F0F0 !important;
  background-image: none !important;
  color: red !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#g4-v4-shell.theme-dark .bootstrap-switch,
#g4-v4-shell.theme-dark .bootstrap-switch .bootstrap-switch-container {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
}

#g4-v4-shell.theme-dark .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
#g4-v4-shell.theme-dark .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  border-color: rgba(var(--g4-v4-brand-blue-rgb), 0.62) !important;
  background: rgba(var(--g4-v4-brand-blue-rgb), 0.88) !important;
  color: #EEF4FB !important;
}

#g4-v4-shell.theme-dark .bootstrap-switch .bootstrap-switch-label {
  border-right-color: rgba(210, 223, 238, 0.34) !important;
  border-left-color: rgba(210, 223, 238, 0.34) !important;
  background: #383E45 !important;
  color: var(--g4-v4-dark-text) !important;
  box-shadow:
    inset 0 0 0 1px rgba(210, 223, 238, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#g4-v4-shell.theme-dark .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  border-color: var(--g4-v4-dark-border) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: red !important;
  font-weight: 700 !important;
}

#g4-v4-shell #add-phonenumber.modal .bootstrap-switch-id-DID_enabled {
  width: 102px !important;
  min-width: 102px !important;
  max-width: 102px !important;
}

/* Source: src/v4/css/components/sliders.css */

/* Standard jQuery UI slider fills use the opaque Grid4 brand blue everywhere. */
body.g4-v4-active .ui-slider > .ui-slider-range,
body.g4-v4-active .ui-slider > .ui-slider-range.ui-widget-header {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-color: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Keep modal slider fills flush with the track instead of exposing the
   native white track around the completed range. */
body.g4-v4-active #g4-v4-shell
  .modal .ui-slider.ui-slider-horizontal {
  box-sizing: border-box !important;
  height: 10px !important;
  border: 0 !important;
  border-radius: 5px !important;
  box-shadow: inset 0 0 0 1px rgba(117, 139, 164, 0.36) !important;
}

body.g4-v4-active #g4-v4-shell
  .modal .ui-slider.ui-slider-horizontal > .ui-slider-range {
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
}

/* Source: src/v4/css/components/datepickers.css */

/* jQuery UI datepicker is appended to body, outside #g4-v4-shell. */
body.g4-v4-active #ui-datepicker-div.ui-datepicker.ui-widget-content {
  border: 1px solid var(--g4-v4-light-border) !important;
  border-radius: 4px !important;
  background: #E7EDF4 !important;
  background-image: none !important;
  color: var(--g4-v4-brand-navy) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker .ui-datepicker-header {
  border: 1px solid var(--g4-v4-light-border) !important;
  border-radius: 4px !important;
  background: var(--g4-v4-light-secondary-surface) !important;
  background-image: none !important;
  color: var(--g4-v4-brand-navy) !important;
  box-shadow: none !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker .ui-datepicker-title {
  color: var(--g4-v4-brand-navy) !important;
  text-shadow: none !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker
  :is(.ui-datepicker-prev, .ui-datepicker-next) {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  top: 50% !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--g4-v4-radius) !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  background-image: none !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker .ui-datepicker-prev {
  left: 2px !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker .ui-datepicker-next {
  right: 2px !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker
  :is(.ui-datepicker-prev, .ui-datepicker-next) > .ui-icon {
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  border-top: 2px solid var(--g4-v4-brand-blue) !important;
  border-right: 2px solid var(--g4-v4-brand-blue) !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  background: none !important;
  font-size: 0 !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker
  .ui-datepicker-prev > .ui-icon {
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker
  .ui-datepicker-next > .ui-icon {
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker
  :is(.ui-datepicker-prev, .ui-datepicker-next):is(
    :hover, :focus, .ui-state-hover, .ui-state-focus
  ) {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker
  :is(.ui-datepicker-prev, .ui-datepicker-next):is(
    :hover, :focus, .ui-state-hover, .ui-state-focus
  ) > .ui-icon {
  border-top-color: #FFF !important;
  border-right-color: #FFF !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker th {
  color: #808080 !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker td a,
body.g4-v4-active #ui-datepicker-div.ui-datepicker td span {
  border: 1px solid transparent !important;
  background: transparent !important;
  background-image: none !important;
  color: #808080 !important;
}

body.g4-v4-active #ui-datepicker-div.ui-datepicker td
  :is(.ui-state-highlight, .ui-state-active, .ui-state-hover),
body.g4-v4-active #ui-datepicker-div.ui-datepicker td a:hover {
  border-color: var(--g4-v4-brand-blue) !important;
  border-radius: 4px !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark #ui-datepicker-div.ui-datepicker.ui-widget-content {
  border-color: #333 !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.34) !important;
}

body.g4-v4-active.theme-dark #ui-datepicker-div.ui-datepicker .ui-datepicker-header {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark #ui-datepicker-div.ui-datepicker .ui-datepicker-title {
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark #ui-datepicker-div.ui-datepicker th {
  color: var(--g4-v4-dark-secondary-text) !important;
}

body.g4-v4-active.theme-dark #ui-datepicker-div.ui-datepicker td a,
body.g4-v4-active.theme-dark #ui-datepicker-div.ui-datepicker td span {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--g4-v4-dark-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active.theme-dark #ui-datepicker-div.ui-datepicker td .ui-state-hover,
body.g4-v4-active.theme-dark #ui-datepicker-div.ui-datepicker td a:hover {
  border-color: rgba(var(--g4-v4-brand-blue-rgb), 0.28) !important;
  background: rgba(var(--g4-v4-brand-blue-rgb), 0.16) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark #ui-datepicker-div.ui-datepicker td .ui-state-highlight {
  border-color: rgba(var(--g4-v4-brand-blue-rgb), 0.36) !important;
  background: rgba(var(--g4-v4-brand-blue-rgb), 0.24) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark #ui-datepicker-div.ui-datepicker td .ui-state-active {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

/* Source: src/v4/css/components/dropdowns.css */

/* Shared portal dropdown surface. Specialized header, table-action, and route
   menus can refine this base without duplicating light/dark interaction states. */
#g4-v4-shell .dropdown-menu {
  border: 1px solid var(--g4-v4-light-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: #FFF !important;
  color: var(--g4-v4-brand-navy) !important;
  box-shadow: 0 0.75rem 1.8rem rgba(28, 33, 67, 0.18) !important;
}

#g4-v4-shell .dropdown-menu > li > a {
  background: transparent !important;
  color: var(--g4-v4-brand-blue) !important;
}

#g4-v4-shell .dropdown-menu > li > a:hover,
#g4-v4-shell .dropdown-menu > li > a:focus,
#g4-v4-shell .dropdown-menu > li:hover > a,
#g4-v4-shell .dropdown-menu > .active > a {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

#g4-v4-shell.theme-dark .dropdown-menu {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
  box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.35) !important;
}

/* Source: src/v4/css/components/header-menus.css */

#g4-v4-shell #header #app-menu-list {
  color: var(--g4-v4-brand-navy);
  border: 1px solid var(--g4-v4-light-border);
  background: var(--g4-v4-light-surface);
  background-image: none;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

#g4-v4-shell #header #app-menu-list > li > a {
  color: var(--g4-v4-brand-navy);
  background: transparent;
  background-image: none;
  font-weight: 500;
  text-shadow: none;
}

/* Bootstrap's native caret remains #0088CC even though the Apps label uses
   the configured brand color. Keep the indicator aligned in both themes. */
body.g4-v4-active #g4-v4-shell #header
  .language-dropdown > .dropdown-toggle > .caret {
  border-top-color: var(--g4-v4-brand-blue) !important;
}

#g4-v4-shell #header li.dropdown > .dropdown-menu.pull-right {
  color: var(--g4-v4-brand-navy);
  border: 1px solid var(--g4-v4-light-border);
  background: #E7EDF4;
  background-image: none;
  box-shadow: 0 0.85rem 2rem rgba(28, 33, 67, 0.16);
}

#g4-v4-shell #header li.dropdown > .dropdown-menu.pull-right > li > a {
  color: var(--g4-v4-brand-navy);
  background: transparent;
  background-image: none;
  font-weight: 500;
  text-shadow: none;
}

#g4-v4-shell #header #app-menu-list > li > a:hover,
#g4-v4-shell #header #app-menu-list > li > a:focus,
#g4-v4-shell #header #app-menu-list > .active > a,
#g4-v4-shell #header li.dropdown > .dropdown-menu.pull-right > li > a:hover,
#g4-v4-shell #header li.dropdown > .dropdown-menu.pull-right > li > a:focus,
#g4-v4-shell #header li.dropdown > .dropdown-menu.pull-right > .active > a {
  color: #FFF !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  text-shadow: none;
}

#g4-v4-shell.theme-dark #header #app-menu-list {
  color: var(--g4-v4-dark-text);
  border-color: var(--g4-v4-dark-border);
  background: var(--g4-v4-dark-surface);
}

#g4-v4-shell.theme-dark #header #app-menu-list > li > a {
  color: var(--g4-v4-dark-text);
}

#g4-v4-shell.theme-dark #header li.dropdown > .dropdown-menu.pull-right {
  color: var(--g4-v4-dark-text);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(24, 29, 36, 0.96);
  box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.35);
}

#g4-v4-shell.theme-dark #header li.dropdown > .dropdown-menu.pull-right > li > a {
  color: var(--g4-v4-brand-blue);
}

#g4-v4-shell.theme-dark #header .icon-th {
  color: #FFF !important;
  filter: invert(1) brightness(2.5) contrast(1.5) !important;
}

/* Source: src/v4/css/routes/user-portal.css */

/* Shared User Portal identity and geometry. Keep this layer intentionally
   narrow; route-specific surfaces belong in their own modules. */
body.g4-user-portal #g4-v4-shell
  :is(
    .btn:not(.close),
    button:not(.round-button):not(.close),
    input[type="button"],
    input[type="submit"]
  ) {
  box-sizing: border-box !important;
  min-height: var(--g4-v4-control-height) !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.g4-user-portal #g4-v4-shell .dropdown-menu {
  border-radius: var(--g4-v4-radius) !important;
}

body.g4-user-portal #g4-v4-shell
  .dropdown-menu > li > a:is(:hover, :focus),
body.g4-user-portal #g4-v4-shell
  .dropdown-menu > .active > a {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

/* Source: src/v4/css/routes/home.css */

body.page-home #g4-v4-shell .home-panel-main,
body.page-home #g4-v4-shell .home-content {
  background: var(--g4-v4-app-bg);
}

body.page-home #g4-v4-shell .graphs-panel-home,
body.page-home #g4-v4-shell .active-panel-home,
body.page-home #g4-v4-shell .quick-nav-home,
body.page-home #g4-v4-shell .stats-panel-home {
  box-sizing: content-box;
  padding: 0.1rem;
  margin-top: 10px;
  margin-bottom: 0.1rem;
  overflow: hidden;
  border: 1px solid var(--g4-v4-border);
  border-radius: var(--g4-v4-radius);
  background: var(--g4-v4-surface);
  color: var(--g4-v4-text);
}

body.page-home #g4-v4-shell .graphs-panel-home {
  box-shadow: 0 0.75rem 1.75rem var(--g4-v4-shadow);
}

body.page-home #g4-v4-shell .active-panel-home {
  box-shadow: 0 0.75rem 1.75rem var(--g4-v4-shadow);
}

body.page-home #g4-v4-shell .quick-nav-home,
body.page-home #g4-v4-shell .stats-panel-home {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.page-home #g4-v4-shell.theme-dark .graphs-panel-home {
  background: rgba(24, 29, 36, 0.92);
  box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.28);
}

body.page-home #g4-v4-shell.theme-dark .active-panel-home {
  background: rgba(24, 29, 36, 0.92);
  box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.28);
}

body.page-home #g4-v4-shell.theme-dark .quick-nav-home,
body.page-home #g4-v4-shell.theme-dark .stats-panel-home {
  background: rgba(24, 29, 36, 0.85);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

body.page-home #g4-v4-shell .graphs-panel-home > h6,
body.page-home #g4-v4-shell .active-panel-home > h6,
body.page-home #g4-v4-shell .quick-nav-home h6,
body.page-home #g4-v4-shell .stats-panel-home > h6 {
  box-sizing: content-box;
  padding: 0.25rem;
  margin: 10px 0 5px;
  border-bottom-color: var(--g4-v4-light-heading-divider) !important;
  color: var(--g4-v4-text);
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7933rem;
  font-weight: 700;
  line-height: 1.333rem;
}

body.page-home #g4-v4-shell.theme-dark .graphs-panel-home > h6,
body.page-home #g4-v4-shell.theme-dark .active-panel-home > h6,
body.page-home #g4-v4-shell.theme-dark .quick-nav-home h6,
body.page-home #g4-v4-shell.theme-dark .stats-panel-home > h6 {
  border-bottom-color: #EEE !important;
}

/* The domain Home active-calls partial keeps a 160px scroll shell even when
   its only body row is the native empty message. The route JS marks that one
   state so the existing card can size to its visible content. */
body.page-home #g4-v4-shell #omp-active-body > .table-container {
  box-sizing: border-box;
  padding: var(--g4-v4-surface-inset);
  border: 1px solid var(--g4-v4-border);
  border-radius: var(--g4-v4-radius);
  background: var(--g4-v4-surface);
}

body.page-home #g4-v4-shell #omp-active-body > .table-container > #calls_table {
  width: 100%;
  margin: 0;
}

/* Active call rows include a trailing action cell that the native header does
   not. Supply its matching header surface only while that column exists. */
body.page-home #g4-v4-shell
  #calls_table:has(> tbody > tr > td.action-buttons)
  > thead > tr > th:last-child {
  border-radius: 0 !important;
}

body.page-home #g4-v4-shell
  #calls_table:has(> tbody > tr > td.action-buttons)
  > thead > tr::after {
  content: "" !important;
  display: table-cell !important;
  box-sizing: border-box !important;
  width: 38px !important;
  padding: 5px !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 1px solid var(--g4-v4-border) !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
}

body.page-home #g4-v4-shell.theme-dark
  #calls_table:has(> tbody > tr > td.action-buttons)
  > thead > tr::after {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.page-home #g4-v4-shell
  #omp-active-body > .table-container > #calls_table :is(th, td) {
  box-sizing: content-box !important;
  line-height: 20px !important;
  vertical-align: middle !important;
}

body.page-home #g4-v4-shell
  #omp-active-body > .table-container > #calls_table th {
  padding: 5px !important;
  font-size: 0.75rem !important;
}

body.page-home #g4-v4-shell
  #omp-active-body > .table-container > #calls_table > tbody > tr > td {
  padding: 4px 5px !important;
  font-size: 13px !important;
}

body.page-home #g4-v4-shell
  #omp-active-body > .table-container > #calls_table > tbody > tr > td.action-buttons {
  padding: 2px 5px 3px !important;
}

body.page-home #g4-v4-shell
  .active-panel-home:has(> #omp-active-body.g4-v4-empty-state-panel),
body.page-home #g4-v4-shell #omp-active-body.g4-v4-empty-state-panel,
body.page-home #g4-v4-shell
  #omp-active-body.g4-v4-empty-state-panel > .table-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.page-home #g4-v4-shell #omp-active-body.g4-v4-empty-state-panel,
body.page-home #g4-v4-shell
  #omp-active-body.g4-v4-empty-state-panel > .table-container {
  overflow: visible !important;
}

body.page-home #g4-v4-shell
  #omp-active-body.g4-v4-empty-state-panel .nonecreated {
  position: relative !important;
  top: auto !important;
  margin: 1.5rem auto 0 !important;
}

body.page-home #g4-v4-shell #reseller-callgraphs-body {
  background: transparent;
  color: var(--g4-v4-text);
}

body.page-home #g4-v4-shell .chart-container {
  box-sizing: content-box;
  padding: 0.1rem;
  margin: 0 0 0.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--g4-v4-surface);
  color: var(--g4-v4-text);
}

body.page-home #g4-v4-shell #domains {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 0.9rem);
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0.48rem 0.78rem;
  margin: 0.35rem 0.45rem 0.55rem;
  border: 1px solid var(--g4-v4-border);
  border-radius: var(--g4-v4-radius);
  background: var(--g4-v4-surface);
  color: var(--g4-v4-text);
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.1375rem;
  box-shadow: none;
}

body.page-home #g4-v4-shell #domains::placeholder {
  color: rgba(28, 33, 67, 0.58);
  opacity: 1;
}

body.page-home #g4-v4-shell.theme-dark #domains::placeholder {
  color: #AAB4C0;
}

body.page-home #g4-v4-shell #recent-domains-div > h6 {
  color: var(--g4-v4-brand-navy);
}

body.page-home #g4-v4-shell.theme-dark #recent-domains-div > h6 {
  color: var(--g4-v4-dark-text);
}

body.page-home #g4-v4-shell #recent-domains-div a {
  color: var(--g4-v4-brand-blue) !important;
}

body.page-home #g4-v4-shell #reports-btn,
body.page-home #g4-v4-shell #date-reports-btn,
body.page-home #g4-v4-shell #type-reports-btn {
  color: var(--g4-v4-brand-blue);
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}

body.page-home #g4-v4-shell #reports-btn .caret,
body.page-home #g4-v4-shell #date-reports-btn .caret,
body.page-home #g4-v4-shell #type-reports-btn .caret {
  border-top-color: var(--g4-v4-brand-blue);
}

body.page-home #g4-v4-shell #reseller-callgraphs-body .dropdown,
body.page-home #g4-v4-shell #graph-type-preposition,
body.page-home #g4-v4-shell #reseller-callgraphs-body .dropdown + span {
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body.page-home #g4-v4-shell .zoomControls {
  color: var(--g4-v4-brand-navy);
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body.page-home #g4-v4-shell.theme-dark .zoomControls {
  color: var(--g4-v4-dark-text);
}

body.page-home #g4-v4-shell .zoomControls > .btn {
  color: #FFF;
  border: 1px solid var(--g4-v4-brand-blue);
  border-radius: 0.375rem;
  background: var(--g4-v4-brand-blue);
  background-image: none;
  box-shadow: none;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 10px;
  text-shadow: none;
}

body.page-home #g4-v4-shell .zoomControls > .btn + .btn {
  margin-left: 4px;
}

body.page-home #g4-v4-shell #chart_div_AnnotationChart_borderDiv {
  background: var(--g4-v4-surface) !important;
}

body.page-home #g4-v4-shell #chart_div_AnnotationChart_annotationsTd {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-left: 0 none transparent !important;
}

body.page-home #g4-v4-shell #chart_div rect[data-g4-v4-chart-role="shell"],
body.page-home #g4-v4-shell #chart_div rect[data-g4-v4-chart-role="plot"] {
  fill: var(--g4-v4-surface) !important;
  stroke: none !important;
}

body.page-home #g4-v4-shell #chart_div rect[data-g4-v4-chart-role="grid"] {
  fill: var(--g4-v4-border) !important;
  stroke: none !important;
}

body.page-home #g4-v4-shell #chart_div svg text,
body.page-home #g4-v4-shell #chart_div svg tspan {
  fill: var(--g4-v4-text) !important;
  stroke: none !important;
  filter: none !important;
  text-shadow: none !important;
}

body.page-home #g4-v4-shell.theme-dark .home-print {
  opacity: 1 !important;
}

body.page-home #g4-v4-shell.theme-dark .home-print .icon-print {
  color: #FFF !important;
  filter: invert(1) brightness(2.5) contrast(1.5) !important;
}

body.page-home #g4-v4-shell.theme-dark
  .stats-panel-home .home-refresh {
  color: var(--g4-v4-brand-blue) !important;
  opacity: 0.6 !important;
}

body.page-home #g4-v4-shell.theme-dark
  .stats-panel-home .home-refresh .icon-refresh {
  color: var(--g4-v4-dark-text) !important;
  opacity: 0.82 !important;
  filter: invert(1) brightness(1.35) contrast(1.05) !important;
}

body.page-home #g4-v4-shell.theme-dark
  .stats-panel-home .icon-info-sign {
  color: var(--g4-v4-dark-text) !important;
  opacity: 0.82 !important;
  filter: invert(1) brightness(1.35) contrast(1.05) !important;
}

/* Basic-user Home panels use route-specific wrappers instead of the shared
   table-container component. Apply the same surfaces and table structure here
   so the Home dashboard stays consistent with the rest of the V4 portal. */
body.g4-user-portal.page-home #g4-v4-shell
  :is(.vmail-panel-home, .callhistory-panel-home, .status-panel-home,
      .rules-panel-home, .conference-panel-home, .phones-panel-home) {
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(.vmail-panel-home, .callhistory-panel-home, .status-panel-home,
      .rules-panel-home, .conference-panel-home, .phones-panel-home)
  > h6,
body.g4-user-portal.page-home #g4-v4-shell
  :is(.vmail-panel-home, .callhistory-panel-home, .status-panel-home,
      .rules-panel-home, .conference-panel-home, .phones-panel-home)
  > h6 > a:not(.home-refresh),
body.g4-user-portal.page-home #g4-v4-shell
  :is(.vmail-panel-home, .callhistory-panel-home, .status-panel-home,
      .rules-panel-home, .conference-panel-home, .phones-panel-home)
  > h6 > a:not(.home-refresh) .link-arrow {
  color: var(--g4-v4-brand-blue) !important;
  -webkit-text-fill-color: var(--g4-v4-brand-blue) !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body) > table.table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-table-text) !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table > thead > tr > th {
  box-sizing: content-box !important;
  padding: 0.62rem 0.75rem !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  -webkit-text-fill-color: var(--g4-v4-table-text) !important;
  box-shadow: none !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 15px !important;
  vertical-align: middle !important;
}

body.g4-user-portal.page-home #g4-v4-shell.theme-dark
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table > thead > tr > th {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table > thead > tr > th:first-child {
  padding-right: 0.5rem !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table > thead > tr > th:last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table > tbody > tr {
  height: 29px !important;
  background: transparent !important;
  color: var(--g4-v4-table-text) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05) !important;
  transform: none !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table > tbody > tr > td {
  box-sizing: border-box !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-table-text) !important;
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 20px !important;
  vertical-align: middle !important;
}

body.g4-user-portal.page-home #g4-v4-shell.theme-dark
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table > tbody > tr > td {
  border-top-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table > tbody > tr > td:first-child {
  padding-right: 0.5rem !important;
  padding-left: 0.75rem !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table > tbody > tr > td:last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table.table-hover > tbody > tr:hover,
body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table.table-hover > tbody > tr:hover > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  -webkit-text-fill-color: #FFF !important;
  box-shadow: none !important;
  transform: none !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  :is(#home-vmail-body, #home-callhistory-body)
  > table.table.table-hover > tbody > tr:hover a {
  color: #FFF !important;
  -webkit-text-fill-color: #FFF !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  .rules-panel-home #rule_select {
  box-sizing: border-box !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  -webkit-text-fill-color: #FFF !important;
  text-shadow: none !important;
}

body.g4-user-portal.page-home #g4-v4-shell
  #home-phones-body > .nonecreated {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  top: auto !important;
  margin: 0 auto !important;
}

/* Source: src/v4/css/routes/call-center.css */

/* Domain Call Center dashboard. Keep the native two-column layout and theme
   only the card, table, action, and generated-chart surfaces it already owns. */
body.page-agents #g4-v4-shell .callcenter-manager-home {
  background: var(--g4-v4-app-bg) !important;
  color: var(--g4-v4-text) !important;
}

body.page-agents #g4-v4-shell .callcenter-manager-home
  :is(.queues-panel-home, .graphs-panel-home, .dash-stats-panel, .agents-panel-home) {
  box-sizing: border-box !important;
  overflow: visible !important;
  padding: 1.5px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: 0 0.75rem 1.75rem var(--g4-v4-shadow) !important;
}

body.page-agents #g4-v4-shell .callcenter-manager-home
  :is(.queues-panel-home, .graphs-panel-home, .dash-stats-panel, .agents-panel-home) > h6 {
  padding: 3.75px !important;
  border-bottom-color: var(--g4-v4-border) !important;
  color: var(--g4-v4-text) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.7933rem !important;
  font-weight: 700 !important;
}

body.page-agents #g4-v4-shell
  :is(.queues-panel-home, .agents-panel-home) > h6 > a {
  transition: none !important;
}

body.page-agents.theme-dark #g4-v4-shell
  :is(.queues-panel-home, .agents-panel-home) > h6 > a {
  color: #FFF !important;
}

body.page-agents:not(.theme-dark) #g4-v4-shell
  :is(.queues-panel-home, .agents-panel-home) > h6 > a {
  color: #000 !important;
}

/* On desktop the native floated columns size themselves independently. Make
   them equal-height flex items and let Call Queues absorb the difference,
   pushing the unchanged graph card down until its bottom aligns with Agents.
   Preserve the native 10px outer spacing and inter-card gap. */
@media (min-width: 768px) {
  body.page-agents #g4-v4-shell
    .callcenter-manager-home > .row-fluid {
    display: flex !important;
    align-items: stretch !important;
  }

  body.page-agents #g4-v4-shell
    .callcenter-manager-home > .row-fluid > .home-content {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 10px !important;
  }

  body.page-agents #g4-v4-shell
    .callcenter-manager-home > .row-fluid > .home-content
    > :is(.queues-panel-home, .graphs-panel-home) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.page-agents #g4-v4-shell
    .callcenter-manager-home > .row-fluid > .home-content
    > .queues-panel-home {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  body.page-agents #g4-v4-shell
    .callcenter-manager-home > .row-fluid > .home-content
    > .graphs-panel-home {
    flex: 0 0 auto !important;
  }

  body.page-agents #g4-v4-shell
    .queues-panel-home > #home-queues-body {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

body.page-agents #g4-v4-shell .callcenter-manager-home
  :is(.queues-panel-home, .agents-panel-home) .link-arrow,
body.page-agents #g4-v4-shell #stats-grid-queue-settings {
  color: var(--g4-v4-brand-blue) !important;
}

body.page-agents #g4-v4-shell
  .agents-panel-home #sortby,
body.page-agents #g4-v4-shell
  .agents-panel-home #agents-current-sortby {
  color: var(--g4-v4-brand-blue) !important;
  -webkit-text-fill-color: var(--g4-v4-brand-blue) !important;
}

body.page-agents #g4-v4-shell .agents-panel-home #sortby > .caret {
  border-top-color: var(--g4-v4-brand-blue) !important;
  border-bottom-color: var(--g4-v4-brand-blue) !important;
}

/* Highlight the complete Agents entry, including the action-button area, with
   the Grid4 brand blue in both themes. The row copy switches to white for
   contrast while the presence indicator and native action controls remain
   unchanged. */
body.page-agents #g4-v4-shell
  #agents-table > tbody > tr.agent-fullrow:hover > td,
body.page-agents #g4-v4-shell
  #agents-table > tbody > tr.agent-fullrow:hover .inner-table,
body.page-agents #g4-v4-shell
  #agents-table > tbody > tr.agent-fullrow:hover
  .inner-table > tbody > tr.agentrow > td {
  background: var(--g4-v4-brand-blue) !important;
}

body.page-agents #g4-v4-shell
  #agents-table > tbody > tr.agent-fullrow:hover
  :is(.agent-name, .agent-device) {
  color: #FFF !important;
}

/* Native disabled actions use partial opacity, which lets the blue row hover
   show through their otherwise-opaque button surface. Keep the control fully
   opaque while preserving its disabled attribute and native muted styling. */
body.page-agents #g4-v4-shell
  #agents-table button.agent-listen-btn:disabled {
  opacity: 1 !important;
}

body.page-agents #g4-v4-shell #home-queues-body,
body.page-agents #g4-v4-shell #home-queues-body > .table-container {
  background: var(--g4-v4-surface) !important;
}

body.page-agents #g4-v4-shell #home-queues-body > .table-container {
  box-sizing: border-box !important;
  padding: var(--g4-v4-surface-inset) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-agents.theme-dark #g4-v4-shell
  #home-queues-body > .table-container {
  border: 1px solid rgba(82, 180, 250, 0.08) !important;
}

body.page-agents #g4-v4-shell
  #home-queues-body > .table-container > #manager_queues {
  width: 100% !important;
  margin: 0 !important;
  table-layout: fixed !important;
}

body.page-agents #g4-v4-shell
  #manager_queues thead.tableFloatingHeader {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.page-agents #g4-v4-shell
  #manager_queues > thead:first-of-type {
  position: static !important;
  display: table-header-group !important;
  visibility: visible !important;
}

body.page-agents #g4-v4-shell
  #manager_queues > thead:first-of-type th {
  position: sticky !important;
  z-index: 4 !important;
  top: 0 !important;
  overflow: hidden !important;
  background: var(--g4-v4-surface-secondary) !important;
  color: var(--g4-v4-text) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding: 5px !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11.25px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
}

/* Preserve the accepted Call Center column proportions without V3's runtime
   colgroup injection. Reserve the eighth column for the two row actions so
   they stay inside the table without creating horizontal overflow. */
body.page-agents #g4-v4-shell #manager_queues > thead:first-of-type th:nth-child(1) {
  width: 4.0665% !important;
}

body.page-agents #g4-v4-shell #manager_queues > thead:first-of-type th:nth-child(2) {
  width: 35.4142% !important;
}

body.page-agents #g4-v4-shell #manager_queues > thead:first-of-type th:nth-child(3) {
  width: 12.7909% !important;
}

body.page-agents #g4-v4-shell #manager_queues > thead:first-of-type th:nth-child(4) {
  width: 16.1225% !important;
}

body.page-agents #g4-v4-shell #manager_queues > thead:first-of-type th:nth-child(5) {
  width: 5.5663% !important;
}

body.page-agents #g4-v4-shell #manager_queues > thead:first-of-type th:nth-child(6) {
  width: 12.266% !important;
}

body.page-agents #g4-v4-shell #manager_queues > thead:first-of-type th:nth-child(7) {
  width: 9.2727% !important;
}

body.page-agents #g4-v4-shell #manager_queues > thead:first-of-type th:nth-child(8) {
  width: 4.5% !important;
}

body.page-agents #g4-v4-shell
  #manager_queues > tbody > tr > td {
  box-sizing: content-box !important;
  padding: 4px 5px !important;
  border-bottom: 0 !important;
}

body.page-agents #g4-v4-shell #manager_queues > tbody
  :is(a.activecall, a.queuelength, a.loggedinagents, a.availagents) {
  color: var(--g4-v4-brand-blue) !important;
  -webkit-text-fill-color: var(--g4-v4-brand-blue) !important;
}

body.page-agents #g4-v4-shell #manager_queues > tbody > tr:hover
  :is(a.activecall, a.queuelength, a.loggedinagents, a.availagents) {
  color: #FFF !important;
  -webkit-text-fill-color: #FFF !important;
}

body.page-agents #g4-v4-shell .callcenter-manager-home
  .graphs-panel-home .chart-container {
  padding: 1.5px !important;
  border-radius: 7.5px !important;
  background: var(--g4-v4-surface) !important;
}

body.page-agents.theme-dark #g4-v4-shell
  #manager_queues > thead:first-of-type th {
  background: #282E36 !important;
}

/* The vendor graph toggle is a black sprite, which remains correct in the
   light theme but needs a white treatment against the dark table header. */
body.page-agents.theme-dark #g4-v4-shell
  #manager_queues .graph-all-toggle {
  filter: brightness(0) invert(1) !important;
}

/* Edit Agents is rendered without the shared table-container wrapper, so its
   vendor header, dividers, and hover colors need a modal-local theme treatment. */
body.page-agents #g4-v4-shell #write-agents
  table.table > thead > tr > th {
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  border-color: var(--g4-v4-border) !important;
}

body.page-agents #g4-v4-shell #write-agents
  table.table > tbody > tr > td {
  border-top-color: var(--g4-v4-border) !important;
}

body.page-agents #g4-v4-shell #write-agents
  table.table-hover > tbody > tr:hover > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  border-color: var(--g4-v4-brand-blue) !important;
}

/* Bootstrap appends the action tooltips inside the last table cell and gives
   them an inline left offset that can extend behind the vertical scrollbar.
   Anchor the tooltip inside the content edge and keep that transient element
   from creating a horizontal scrollbar. */
body.page-agents #g4-v4-shell #write-agents #add-agents-table {
  overflow-x: hidden !important;
}

body.page-agents #g4-v4-shell #write-agents #add-agents-table
  td.action-buttons > .tooltip.top {
  left: auto !important;
  right: 19px !important;
  margin-left: 0 !important;
  transform: none !important;
}

body.page-agents #g4-v4-shell #write-agents #add-agents-table
  td.action-buttons:has(> a.delete:is(:hover, :focus))
  > .tooltip.top > .tooltip-arrow {
  left: auto !important;
  right: 1px !important;
  margin-left: 0 !important;
  transform: none !important;
}

body.page-agents #g4-v4-shell #write-agents #add-agents-table
  td.action-buttons:has(> a.edit:is(:hover, :focus))
  > .tooltip.top > .tooltip-arrow {
  left: auto !important;
  right: 24px !important;
  margin-left: 0 !important;
  transform: none !important;
}

body.page-agents #g4-v4-shell #cc-reports-btn,
body.page-agents #g4-v4-shell #builder-dropdown,
body.page-agents #g4-v4-shell #cc-settings-btn,
body.page-agents #g4-v4-shell .cc-btn-snapboards {
  box-sizing: border-box !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.page-agents #g4-v4-shell
  .btn-group:has(> #cc-reports-btn + #builder-dropdown) {
  display: inline-flex !important;
  align-items: center !important;
  width: 100% !important;
}

body.page-agents #g4-v4-shell #cc-reports-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

/* Without configured email reports the vendor omits the caret button. Expand
   the remaining Reports control to its complete half-column; configured
   domains retain the split-button layout above. */
body.page-agents #g4-v4-shell
  .btn-group:has(> #cc-reports-btn:only-child) {
  display: flex !important;
  width: 100% !important;
}

body.page-agents #g4-v4-shell
  .btn-group:has(> #cc-reports-btn:only-child) > #cc-reports-btn {
  flex: 1 1 auto !important;
  width: 100% !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-agents #g4-v4-shell #builder-dropdown {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--g4-v4-control-height) !important;
  width: var(--g4-v4-control-height) !important;
  min-width: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  margin-left: -1px !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

/* Separate the two controls only in the configured email-reports split-button
   state. The caret-free Reports button remains governed by the :only-child
   layout above and retains its full width and complete border radius. */
body.page-agents #g4-v4-shell
  .btn-group:has(> #cc-reports-btn + #builder-dropdown) > #builder-dropdown {
  border-left: 1px solid #339EE5 !important;
}

body.page-agents #g4-v4-shell #builder-dropdown .caret {
  position: static !important;
  margin: 0 !important;
  border-top-color: #FFF !important;
  border-bottom-color: #FFF !important;
}

body.page-agents #g4-v4-shell #builder-actions-dropdown {
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: 0 0.5rem 1.25rem var(--g4-v4-shadow) !important;
}

body.page-agents #g4-v4-shell #builder-actions-dropdown > li > a {
  background: transparent !important;
  color: var(--g4-v4-brand-blue) !important;
}

body.page-agents #g4-v4-shell #builder-actions-dropdown > li > a:hover,
body.page-agents #g4-v4-shell #builder-actions-dropdown > li > a:focus {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.page-agents #g4-v4-shell #cc-settings-btn-div {
  box-sizing: border-box !important;
  padding-left: var(--g4-v4-control-gap) !important;
}

body.page-agents #g4-v4-shell #cc-settings-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-agents #g4-v4-shell
  :is(#cc-reports-btn, #cc-settings-btn) > i {
  position: static !important;
  margin: 0 4px 0 0 !important;
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

body.page-agents #g4-v4-shell
  :is(#cc-reports-btn, #builder-dropdown, #cc-settings-btn, .cc-btn-snapboards):hover,
body.page-agents #g4-v4-shell
  :is(#cc-reports-btn, #builder-dropdown, .cc-btn-snapboards):focus {
  background: var(--g4-v4-brand-navy) !important;
}

body.page-agents.theme-dark #g4-v4-shell
  :is(#cc-reports-btn, #builder-dropdown, #cc-settings-btn, .cc-btn-snapboards):hover,
body.page-agents.theme-dark #g4-v4-shell
  :is(#cc-reports-btn, #builder-dropdown, .cc-btn-snapboards):focus {
  background: var(--g4-v4-dark-surface) !important;
}

body.page-agents.theme-dark #g4-v4-shell #cc-stats-div {
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
  border-color: var(--g4-v4-dark-border) !important;
}

/* Google Charts paints a solid white full-canvas rectangle in light mode.
   Match only that direct background layer to the surrounding card surface. */
body.page-agents:not(.theme-dark) #g4-v4-shell
  #cc-stats-div svg > rect[x="0"][y="0"][fill="#ffffff"] {
  fill: var(--g4-v4-surface) !important;
}

/* CA and CV retain their native white fill, so the native #EEE outline is too
   faint against the tile in light mode. Dark mode intentionally keeps it. */
body.page-agents.theme-light #g4-v4-shell
  :is(#dash-stats-grid-ca, #dash-stats-grid-cv) {
  border-color: var(--g4-v4-light-border) !important;
}

body.page-agents.theme-dark #g4-v4-shell #cc-stats-div svg {
  opacity: 1 !important;
}

body.page-agents.theme-dark #g4-v4-shell #cc-stats-div svg :is(text, tspan) {
  fill: var(--g4-v4-dark-text) !important;
  stroke: none !important;
  filter: none !important;
  text-shadow: none !important;
}

body.page-agents.theme-dark #g4-v4-shell
  #cc-stats-div svg rect[fill="#ffffff"] {
  fill: var(--g4-v4-dark-surface) !important;
}

body.page-agents.theme-dark #g4-v4-shell #cc-stats-div svg
  rect:is(
    [fill="#ebebeb"],
    [fill="#cccccc"],
    [fill="#ececf7"],
    [fill="#f7f7fc"],
    [fill="#f2f2f2"],
    [fill="#ababab"]
  ) {
  fill: var(--g4-v4-dark-border) !important;
}

body.page-agents.theme-dark #g4-v4-shell
  :is(#stats-agent-online, #stats-grid-queue-label, .agents-panel-home .iconfont-search) {
  color: #FFF !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Call Center settings keeps the native form, but its custom-status input is
   intended to use the full tab width rather than the shared compact
   input-append width. The input and add action remain separate controls. */
body.page-agents #g4-v4-shell
  #cc-settings-modal #cc-settings-custom-status form.form-search,
body.page-agents #g4-v4-shell
  #cc-settings-modal #cc-settings-custom-status form.form-search > .input-append {
  width: 100% !important;
}

body.page-agents #g4-v4-shell
  #cc-settings-modal > .modal-body > .tab-content {
  box-sizing: border-box !important;
  padding: 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The vendor forces a scrollbar on the Custom Statuses list even when every
   status fits. Keep the list scrollable, but show the bar only on overflow. */
body.page-agents #g4-v4-shell
  #cc-settings-modal #cc-settings-custom-status
  > div[style*="overflow-y"] {
  overflow-y: auto !important;
}

body.page-agents #g4-v4-shell
  #cc-settings-modal #cc-settings-custom-status form.form-search > .input-append {
  display: flex !important;
  align-items: center !important;
  gap: var(--g4-v4-control-gap) !important;
  box-sizing: border-box !important;
  height: 40px !important;
}

body.page-agents #g4-v4-shell
  #cc-settings-modal #cc-settings-custom-status #status-filter-add {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-agents #g4-v4-shell
  #cc-settings-modal #cc-settings-custom-status #add-status-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--g4-v4-control-height) !important;
  width: var(--g4-v4-control-height) !important;
  min-width: var(--g4-v4-control-height) !important;
  max-width: var(--g4-v4-control-height) !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-agents #g4-v4-shell
  #cc-settings-modal #cc-settings-custom-status #add-status-btn > i {
  margin: 0 !important;
}

/* The vendor Email Reports fragment carries a 550px inline minimum that leaves
   a large empty body. Its visible Basic pane is self-sizing, so release that
   minimum and restore the accepted V3 tab-content shell. */
body.page-agents #g4-v4-shell #email-report .modal-body {
  min-height: 0 !important;
  height: auto !important;
}

body.page-agents #g4-v4-shell #email-report .tab-content {
  box-sizing: border-box !important;
  padding: 15px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: calc(var(--g4-v4-radius) * 2) !important;
  background: transparent !important;
  color: var(--g4-v4-text) !important;
}

body.page-agents.theme-dark #g4-v4-shell #email-report .tab-content {
  background: transparent !important;
  color: var(--g4-v4-dark-text) !important;
  border-color: var(--g4-v4-dark-border) !important;
}

/* Email Reports uses native six-row multi-selects on its Advanced tab. Keep
   them out of the global single-line control height so all six rows remain
   visible and the following fields retain their intended spacing. */
body.page-agents #g4-v4-shell #email-report
  #report-email-advanced .report-email-selector {
  min-height: 140px !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  overflow: hidden !important;
}

body.page-agents #g4-v4-shell #email-report
  #report-email-advanced .report-email-selector select[multiple] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 126px !important;
}

body.page-agents #g4-v4-shell #email-report
  #report-email-advanced .report-email-selector select[multiple] > option {
  padding: 4px 8px !important;
}

body.page-agents #g4-v4-shell
  :is(#cc-settings-modal, #email-report) .modal-footer .btn:first-of-type {
  min-width: 75px !important;
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  text-shadow: none !important;
}

/* Source: src/v4/css/routes/user-call-center.css */

/* Individual User Portal Call Center dashboard. This markup shares the
   page-agents route class with the manager dashboard, so g4-user-portal is
   required on every selector. */
body.g4-user-portal.page-agents #g4-v4-shell
  :is(.queues-panel-home, .graphs-panel-home, .phones-panel-home,
      .stats-panel-home, .agenthistory-panel-home) {
  box-sizing: border-box !important;
  overflow: visible !important;
  padding: 1.5px !important;
  border: 4px solid var(--g4-v4-light-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: 0 0.75rem 1.75rem var(--g4-v4-shadow) !important;
}

body.g4-user-portal.page-agents.theme-dark #g4-v4-shell
  :is(.queues-panel-home, .graphs-panel-home, .phones-panel-home,
      .stats-panel-home, .agenthistory-panel-home) {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.g4-user-portal.page-agents #g4-v4-shell
  :is(.queues-panel-home, .graphs-panel-home, .phones-panel-home,
      .stats-panel-home, .agenthistory-panel-home) > h6 {
  box-sizing: content-box !important;
  padding: 3.75px !important;
  border-bottom-color: var(--g4-v4-border) !important;
  color: var(--g4-v4-text) !important;
  font-weight: 700 !important;
}

body.g4-user-portal.page-agents #g4-v4-shell #home-queues-body {
  min-height: 202.5px !important;
  padding-bottom: 15px !important;
  overflow: visible !important;
  background: var(--g4-v4-surface) !important;
}

/* Shared User Portal controls use the standard 30px control height, but the
   queue login/logout actions are native 20px sprite buttons. Keeping their
   intrinsic size prevents the sprite sheet from repeating into a second icon
   and lets the queue rows retain their compact table height. */
body.g4-user-portal.page-agents #g4-v4-shell
  #agent_queues button.round-button {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 0 !important;
  max-height: 20px !important;
  border-radius: 0 !important;
  background-repeat: no-repeat !important;
}

/* The native split-chart layout assigns exactly half of the available width
   to each lower chart. Added padding makes those two halves exceed 100% and
   pushes the second chart onto a new row, so retain the native zero inset. */
body.g4-user-portal.page-agents #g4-v4-shell
  .graphs-panel-home .chart-container {
  padding: 0 !important;
}

body.g4-user-portal.page-agents.theme-dark #g4-v4-shell
  #agent-callgraphs-body :is(#chart_div2, #chart_div3, #chart_div4) {
  background: var(--g4-v4-surface) !important;
}

body.g4-user-portal.page-agents.theme-dark #g4-v4-shell
  #agent-callgraphs-body svg rect[fill="#ffffff"] {
  fill: var(--g4-v4-dark-surface) !important;
}

body.g4-user-portal.page-agents.theme-dark #g4-v4-shell
  #agent-callgraphs-body svg rect:is(
    [fill="#ebebeb"],
    [fill="#cccccc"]
  ) {
  fill: var(--g4-v4-dark-border) !important;
}

body.g4-user-portal.page-agents.theme-dark #g4-v4-shell
  #agent-callgraphs-body svg :is(text, tspan) {
  fill: var(--g4-v4-dark-text) !important;
  stroke: none !important;
  filter: none !important;
  text-shadow: none !important;
}

body.g4-user-portal.page-agents #g4-v4-shell
  #big-button-group > .btn-group.hide {
  display: none !important;
}

body.g4-user-portal.page-agents #g4-v4-shell
  #big-button-group > .btn-group:not(.hide) {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  height: 44px !important;
}

body.g4-user-portal.page-agents #g4-v4-shell
  #big-button-group > .btn-group > .btn:first-child {
  flex: 1 1 auto !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-right: 0 !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  text-shadow: none !important;
}

body.g4-user-portal.page-agents #g4-v4-shell
  #big-button-group > .btn-group > .big-button-caret {
  display: inline-flex !important;
  flex: 0 0 44px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-left-color: #339EE5 !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
}

body.g4-user-portal.page-agents #g4-v4-shell
  #big-button-group > .btn-group > .big-button-caret > .caret {
  position: static !important;
  margin: 0 !important;
  border-top-color: #FFF !important;
  border-bottom-color: #FFF !important;
  opacity: 1 !important;
}

body.g4-user-portal.page-agents #g4-v4-shell
  .agent-status-panel-home :is(.btn-group-full, .cc-btn-snapboards) {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
}

body.g4-user-portal.page-agents #g4-v4-shell #agent-callhistory-body {
  box-sizing: border-box !important;
  padding: var(--g4-v4-surface-inset) !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.g4-user-portal.page-agents #g4-v4-shell
  #agent-callhistory-body > table.table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
}

body.g4-user-portal.page-agents.theme-dark #g4-v4-shell
  #agent-callhistory-body > table.table > tbody > tr > td {
  background: var(--g4-v4-row-bg) !important;
  background-image: none !important;
  color: var(--g4-v4-text) !important;
}

/* Source: src/v4/css/routes/user-messages.css */

/* Individual User Portal Messages route. */
body.g4-user-portal.page-messages #g4-v4-shell #messages-dropdown {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 120px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 10px !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  text-shadow: none !important;
}

body.g4-user-portal.page-messages #g4-v4-shell
  #messages-dropdown > .caret {
  position: static !important;
  margin: 0 !important;
  border-top-color: #FFF !important;
  border-bottom-color: #FFF !important;
  opacity: 1 !important;
}

body.g4-user-portal.page-messages #g4-v4-shell #folders-dropdown {
  min-width: 160px !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

body.g4-user-portal.page-messages #g4-v4-shell
  #folders-dropdown > li > a {
  color: var(--g4-v4-link) !important;
}

body.g4-user-portal.page-messages #g4-v4-shell
  #folders-dropdown > li > a:is(:hover, :focus) {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

/* Voicemail settings use the same semantic panel in the User Portal and the
   Office Manager user editor, so keep their full-page controls on one theme. */
body.g4-v4-active.theme-dark #g4-v4-shell
  .voicemail-panel-main :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
    select,
    textarea
  ) {
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background-color: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: none !important;
}

/* Vendor read-only counters are spans rather than native inputs. Keep the
   message count and storage values on the same dark palette as the form. */
body.g4-v4-active.theme-dark #g4-v4-shell #content
  .voicemail-panel-main .uneditable-input.number {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #content
  .voicemail-panel-main .form-actions.affix-form-actions {
  border-color: var(--g4-v4-border) !important;
  background: rgba(24, 29, 36, 0.8) !important;
  color: var(--g4-v4-text) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell
  .voicemail-panel-main legend {
  color: #FFF !important;
}

/* Keep every standard Voicemail Settings value control on one native-sized
   CSS geometry. This also covers address/extension fields added at runtime
   without measuring or rewriting them in JavaScript. */
body.g4-v4-active #g4-v4-shell
  .voicemail-panel-main .controls :is(
    input[type="text"],
    input[type="email"],
    textarea,
    select:not(#UserVmailnagInterval)
  ) {
  box-sizing: border-box !important;
  width: 220px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
}

/* Match the proven V3 metrics inside the fixed-height controls so glyphs are
   not clipped at non-default browser zoom levels. */
body.g4-v4-active #g4-v4-shell
  .voicemail-panel-main .controls :is(
    input[type="text"],
    input[type="email"],
    textarea,
    select
  ) {
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 12.1875px !important;
  line-height: 17.0625px !important;
}

/* The shared User Portal button minimum is 30px; native Voicemail delete
   sprites are 20px and otherwise expose the adjacent sprite frame. */
body.g4-v4-active #g4-v4-shell
  .voicemail-panel-main button.del {
  min-height: 0 !important;
}

/* This row includes a literal whitespace node between the input and icon.
   Removing the additional margin matches the 3px gap used by the other rows. */
body.g4-v4-active #g4-v4-shell
  .voicemail-panel-main #add-vmail-fwd {
  margin-left: 0 !important;
}

/* The interval has only short numeric options. Native auto sizing is the
   lightest way to retain room for the selected value and platform caret. */
body.g4-v4-active #g4-v4-shell
  .voicemail-panel-main #UserVmailnagInterval {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Source: src/v4/css/routes/user-contacts.css */

/* Individual User Portal Contacts route. */
body.g4-user-portal.page-contacts #g4-v4-shell .contacts-panel-main {
  display: grid !important;
  grid-template-columns: minmax(18rem, 1fr) auto !important;
  align-items: start !important;
  gap: 0 15px !important;
  border-radius: var(--g4-v4-radius) !important;
  background: transparent !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > :is(.action-container-left, .action-container-right) {
  float: none !important;
  width: auto !important;
  margin-bottom: 0 !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > .action-container-left {
  min-width: 0 !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main .form-search:has(#textfilter) > .input-append {
  display: inline-flex !important;
  width: 250px !important;
  max-width: 100% !important;
  border-radius: 4px !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main .form-search > .input-append > #textfilter {
  flex: 1 1 250px !important;
  box-sizing: border-box !important;
  width: 250px !important;
  min-width: 0 !important;
  max-width: 250px !important;
  border-radius: 4px !important;
}

/* The native search submit is inert on this route; V3 omits it as well. */
body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main .form-search > .input-append > #textfilter + .btn {
  display: none !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > .action-container-left .btn.dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 120px !important;
  height: var(--g4-v4-control-height) !important;
  padding: 4px 10px !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  text-shadow: none !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > .action-container-left .btn.dropdown-toggle > .caret {
  position: static !important;
  margin: 0 !important;
  border-top-color: #FFF !important;
  border-bottom-color: #FFF !important;
  opacity: 1 !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > .action-container-right {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  float: right !important;
  width: auto !important;
  height: var(--g4-v4-control-height) !important;
  white-space: nowrap !important;
  font-size: 0 !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > .action-container-right > .action-container-row {
  display: contents !important;
  margin: 0 !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > .action-container-right .btn-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 0 5px !important;
  font-size: 0 !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > .action-container-right .btn {
  box-sizing: border-box !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > .action-container-right > #ButtonAddContactWriteContact,
body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > .action-container-right #ButtonExportModal {
  margin-left: 5px !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main > .table-container {
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
  margin-top: 13.5px !important;
  overflow: visible !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  .contacts-panel-main #contacts-table thead th {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  #contacts-table tbody td:first-child {
  padding: 4px 5px 4px 4px !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  #contacts-table tbody td:first-child .gravatar-img-contact {
  box-sizing: border-box !important;
  width: 33px !important;
  min-width: 33px !important;
  height: 33px !important;
  min-height: 33px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}

body.g4-user-portal.page-contacts #g4-v4-shell
  #contacts-table .contact-presence-td > :is(.presence, [class*="chat-available"]) {
  z-index: 4 !important;
}

/* The portal always renders this filter-result placeholder after the contacts
   table. Keep it invisible until the portal supplies an actual message. */
body.g4-user-portal.page-contacts #g4-v4-shell
  .nonecreated-contacts:has(> .filter-message:empty) {
  display: none !important;
}

/* Keep the compact import dialog by placing format help below the filename.
   Shared Contacts can render without the User Portal or route body classes. */
body.g4-v4-active #g4-v4-shell #import-modal .modal-body
  .control-group:has(.fileupload input[type="file"]) {
  align-items: flex-start !important;
}

body.g4-v4-active #g4-v4-shell #import-modal .modal-body
  .control-group:has(.fileupload input[type="file"]) > .controls {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
}

body.g4-v4-active #g4-v4-shell #import-modal .modal-body
  .control-group:has(.fileupload input[type="file"]) > .controls > .help-inline {
  display: block !important;
  margin: 4px 0 0 !important;
  line-height: 18px !important;
  white-space: normal !important;
}

/* Source: src/v4/css/routes/user-answering-rules.css */

/* Answering Rules views share this legacy grid in both the User Portal and
   Office Manager user editor. It is not wrapped in the shared table container,
   so reproduce that surface locally without changing normal portal tables. */
body.g4-v4-active #g4-v4-shell .rules-panel-main {
  box-sizing: border-box !important;
  position: relative !important;
  height: 420px !important;
  min-height: 420px !important;
  padding: var(--g4-v4-surface-inset) !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

body.g4-v4-active #g4-v4-shell #sort-rules {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
  background: transparent !important;
  color: var(--g4-v4-table-text) !important;
}

body.g4-v4-active #g4-v4-shell
  #sort-rules > thead > tr > th {
  box-sizing: border-box !important;
  height: 30px !important;
  padding: 4px 5px !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  vertical-align: middle !important;
}

body.g4-v4-active #g4-v4-shell
  #sort-rules > tbody > tr > td {
  box-sizing: border-box !important;
  height: 30px !important;
  padding: 4px 5px !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-table-text) !important;
  font-size: 13px !important;
  line-height: 20px !important;
  vertical-align: middle !important;
}

body.g4-v4-active #g4-v4-shell
  #sort-rules :is(th, td):first-child {
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.g4-v4-active #g4-v4-shell
  #sort-rules :is(th, td):last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.g4-v4-active #g4-v4-shell
  #sort-rules > tbody > tr:hover > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.g4-v4-active #g4-v4-shell
  #sort-rules > tbody > tr:hover a {
  color: #FFF !important;
}

body.g4-v4-active #g4-v4-shell
  .rules-panel-main > .form-actions {
  box-sizing: border-box !important;
  position: absolute !important;
  right: var(--g4-v4-surface-inset) !important;
  bottom: var(--g4-v4-surface-inset) !important;
  left: var(--g4-v4-surface-inset) !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  height: 78.5px !important;
  margin: 0 !important;
  padding: 15px 20px !important;
  border: 0 !important;
  border-radius: 0 0 var(--g4-v4-radius) var(--g4-v4-radius) !important;
  background: rgba(210, 220, 231, 0.8) !important;
  color: var(--g4-v4-text) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell
  .rules-panel-main {
  background: transparent !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell
  #sort-rules {
  background: var(--g4-v4-surface) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell
  .rules-panel-main > .form-actions {
  background: rgba(24, 29, 36, 0.8) !important;
}

/* The no-answer timeout is a full-page control rather than a modal field, so
   it does not inherit the shared dark modal control treatment. */
body.g4-v4-active.theme-dark #g4-v4-shell
  #AnswerruleNoAnswerTimeout {
  border-color: var(--g4-v4-dark-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
}

/* The rule editor is the one Answering Rules dialog whose forwarding rows
   need the wider V3 geometry. Keep this exception local instead of widening
   every portal modal, while supporting both User and Manager Portal routes. */
body.g4-v4-active #write-rule {
  width: 720px !important;
  margin-left: -360px !important;
}

body.g4-v4-active #write-rule
  .control-group.group {
  margin-top: 0.5rem !important;
  margin-bottom: 0.9rem !important;
}

body.g4-v4-active #write-rule
  :is(#AnswerruleTimeFrame,
      #id_for_numbers,
      #id_foa_numbers,
      #id_fbu_numbers,
      #id_fna_numbers,
      #id_fnr_numbers) {
  box-sizing: border-box !important;
  width: 220px !important;
  height: 30px !important;
  min-height: 30px !important;
}

body.g4-v4-active #write-rule label.checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding-left: 0 !important;
  line-height: 20px !important;
}

body.g4-v4-active #write-rule
  label.checkbox > input[type="checkbox"] {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
}

body.g4-v4-active #write-rule
  table.form-table.checkfield.simring {
  table-layout: fixed !important;
  width: 498px !important;
}

body.g4-v4-active #write-rule
  table.form-table.checkfield.simring > tbody > tr > td:first-child {
  box-sizing: border-box !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

body.g4-v4-active #write-rule
  table.form-table.checkfield.simring > tbody > tr > td:last-child {
  box-sizing: border-box !important;
  width: 348px !important;
  min-width: 348px !important;
  max-width: 348px !important;
}

body.g4-v4-active #write-rule
  table.form-table.checkfield.simring > tbody > tr:first-child
  > td:first-child > label.checkbox {
  box-sizing: border-box !important;
  height: 30px !important;
  min-height: 30px !important;
}

body.g4-v4-active #g4-v4-shell #write-rule
  #simring-list > li {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-height: 30px !important;
  gap: 5px !important;
}

body.g4-v4-active #g4-v4-shell #write-rule
  .sim-delay {
  display: inline-flex !important;
  align-items: stretch !important;
  width: 275px !important;
  height: 30px !important;
  margin: 0 !important;
  flex: 0 0 275px !important;
  font-size: 0 !important;
}

body.g4-v4-active #write-rule #answerrule_sim_numbers {
  box-sizing: border-box !important;
  width: 220px !important;
  flex: 0 0 220px !important;
  margin: 0 !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.g4-v4-active #write-rule .sim-delay-btn {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 55px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 0 0 -1px !important;
  padding: 4px !important;
  gap: 4px !important;
  flex: 0 0 55px !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.g4-v4-active #g4-v4-shell #write-rule .sim-delay-btn {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #write-rule .sim-delay-btn > span {
  color: #FFF !important;
}

body.g4-v4-active #g4-v4-shell #write-rule
  .sim-delay-btn:is(:hover, :focus) {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #write-rule
  .sim-delay-btn:is(:hover, :focus) {
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active #g4-v4-shell #write-rule
  :is(#add-simring, .rem-simring) {
  box-sizing: border-box !important;
  display: block !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 20px !important;
  line-height: 20px !important;
  overflow: hidden !important;
  vertical-align: top !important;
}

body.g4-v4-active #g4-v4-shell
  .rules-panel-main > .form-actions > h5 {
  margin: 0 !important;
  color: var(--g4-v4-text) !important;
}

/* Allow / Block is the accepted compact Answering Rules dialog. Its two list
   columns were designed around Bootstrap's 500px modal, so preserve that
   geometry instead of stretching the workflow to the shared 600px default. */
body.g4-v4-active #allowblock-lists {
  width: 500px !important;
}

body.g4-v4-active #allowblock-lists
  :is(.spam-input, .allowblock-input) h6 {
  color: var(--g4-v4-text) !important;
  font-weight: 600 !important;
}

body.g4-v4-active #allowblock-lists
  :is(.spam-input, .allowblock-input) h6 {
  padding: 3.75px !important;
}

body.g4-v4-active #allowblock-lists
  .allowblock-input h6 {
  margin-bottom: 8px !important;
}

body.g4-v4-active #allowblock-lists
  .spam-input > div {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

body.g4-v4-active #allowblock-lists
  :is(.spam-input, .allowblock-input, .well, .allowblock-anon) {
  border: 0 !important;
  box-shadow: none !important;
}

body.g4-v4-active #allowblock-lists .allowblock-input {
  box-sizing: border-box !important;
  width: 100% !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-bottom: 0 !important;
  border-radius: var(--g4-v4-radius) var(--g4-v4-radius) 0 0 !important;
  box-shadow: none !important;
}

body.g4-v4-active #allowblock-lists #spam_handling {
  width: 13rem !important;
  min-width: 13rem !important;
  max-width: 100% !important;
}

body.g4-v4-active #g4-v4-shell #allowblock-lists
  .allowblock-input .input-append {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 30px !important;
  margin: 0 0 10px !important;
  gap: 0 !important;
  font-size: 0 !important;
}

body.g4-v4-active #allowblock-lists
  .allowblock-input .input-append > input {
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 30px !important;
  margin: 0 !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.g4-v4-active #allowblock-lists
  .allowblock-input .input-append > .btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 0 0 -1px !important;
  padding: 0 !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.g4-v4-active #allowblock-lists .well {
  box-sizing: border-box !important;
  width: 100% !important;
  border: 1px solid var(--g4-v4-border) !important;
  background: var(--g4-v4-surface) !important;
  box-shadow: none !important;
}

body.g4-v4-active #allowblock-lists #allow-div > .well {
  border-radius: 0 0 var(--g4-v4-radius) var(--g4-v4-radius) !important;
}

body.g4-v4-active #allowblock-lists #block-div > .well {
  border-radius: 0 !important;
}

body.g4-v4-active #allowblock-lists
  .allowblock-table {
  min-height: 180px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
}

body.g4-v4-active #allowblock-lists
  #allow-div .allowblock-table {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
}

body.g4-v4-active #allowblock-lists
  .allowblock-anon label.checkbox {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 5px !important;
  gap: 3px !important;
  color: var(--g4-v4-text) !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  position: relative !important;
  left: -6px !important;
}

body.g4-v4-active #allowblock-lists
  .allowblock-anon {
  box-sizing: border-box !important;
  width: 100% !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-top: 0 !important;
  background: var(--g4-v4-surface-secondary) !important;
  box-shadow: none !important;
}

body.g4-v4-active #allowblock-lists
  .allowblock-anon label.checkbox > input[type="checkbox"] {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
}

body.g4-v4-active #allowblock-lists
  .allowblock-anon label.checkbox > span:empty {
  display: none !important;
}

body.g4-v4-active #allowblock-lists
  .modal-footer > .btn {
  min-width: 75px !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.g4-v4-active #allowblock-lists .modal-footer {
  padding-right: 15px !important;
}

body.g4-v4-active #allowblock-lists
  :is(.modal-footer > .btn, .allowblock-input .btn):hover,
body.g4-v4-active #allowblock-lists
  :is(.modal-footer > .btn, .allowblock-input .btn):focus {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark #allowblock-lists
  :is(.modal-footer > .btn, .allowblock-input .btn):hover,
body.g4-v4-active.theme-dark #allowblock-lists
  :is(.modal-footer > .btn, .allowblock-input .btn):focus {
  background: var(--g4-v4-dark-surface) !important;
}

/* Source: src/v4/css/routes/user-phones.css */

/* User Portal Phones is a compact registration list. Match the accepted V3
   header metrics without changing the shared table contract used elsewhere. */
body.g4-user-portal.page-phones #g4-v4-shell
  .table-container > table.table > thead > tr > th {
  box-sizing: border-box !important;
  padding: 4px 5px !important;
  font-size: 11.25px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

body.g4-user-portal.page-phones #g4-v4-shell
  .table-container > table.table > tbody > tr > td:first-child {
  padding: 4px 5px !important;
}

body.g4-user-portal.page-phones #g4-v4-shell .badge-registration {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-image: none !important;
  filter: none !important;
  transform: none !important;
  vertical-align: middle !important;
}

body.g4-user-portal.page-phones #g4-v4-shell
  td.registered > .badge-registration {
  position: relative !important;
  top: -2px !important;
}

body.g4-user-portal.page-phones #g4-v4-shell
  .badge-registration > i {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  background-image: none !important;
  background-position: 0 0 !important;
  filter: none !important;
}

body.g4-user-portal.page-phones #g4-v4-shell
  .badge-registration > i::before,
body.g4-user-portal.page-phones #g4-v4-shell
  .badge-registration > i::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  left: 1px !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 8px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 1px !important;
  background: #FFF !important;
  transform-origin: center !important;
}

body.g4-user-portal.page-phones #g4-v4-shell
  .badge-registration > .icon-ok::before {
  top: 2px !important;
  left: 1px !important;
  width: 8px !important;
  height: 5px !important;
  border: 0 !important;
  border-bottom: 2px solid #FFF !important;
  border-left: 2px solid #FFF !important;
  border-radius: 0 !important;
  background: none !important;
  transform: rotate(-45deg) !important;
}

body.g4-user-portal.page-phones #g4-v4-shell
  .badge-registration > .icon-ok::after {
  content: none !important;
}

body.g4-user-portal.page-phones #g4-v4-shell
  .badge-registration > .icon-remove::before {
  transform: rotate(45deg) !important;
}

body.g4-user-portal.page-phones #g4-v4-shell
  .badge-registration > .icon-remove::after {
  transform: rotate(-45deg) !important;
}

/* Add a Phone limits the suffix to one alphabetic character. Restore the
   compact input-mini footprint instead of inheriting the shared modal width. */
body.g4-v4-active #g4-v4-shell #write-phone
  .modal-body .input-prepend > #suffix.input-mini {
  box-sizing: border-box !important;
  flex: 0 0 60px !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

/* Source: src/v4/css/routes/user-music-on-hold.css */

/* User Portal Music on Hold has two empty-state panels with different copy
   heights. Keep their actions aligned without adding runtime measurement. */
body.g4-user-portal.page-musiconhold #g4-v4-shell
  #music-panel-main > :is(.nonecreated, .noncreatedadd, .noncreatedcopy) {
  transform: translateY(-60px) !important;
}

body.g4-user-portal.page-musiconhold #g4-v4-shell
  #msg-panel-main > :is(.nonecreated, .noncreatedadd, .noncreatedcopy) {
  transform: translateY(-20px) !important;
}

body.g4-user-portal.page-musiconhold #g4-v4-shell
  :is(#music-panel-main, #msg-panel-main) > .nonecreated h4 {
  box-sizing: content-box !important;
  padding: 0.25rem !important;
  margin: 0.667rem 0 0 !important;
  color: inherit !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

body.g4-user-portal.page-musiconhold #g4-v4-shell
  :is(#music-panel-main, #msg-panel-main) > .noncreatedadd > .btn {
  position: relative !important;
  top: 0 !important;
  margin: 0 7.5px 0 0 !important;
}

body.g4-user-portal.page-musiconhold #g4-v4-shell
  :is(#music-panel-main, #msg-panel-main) > .noncreatedadd > .btn + .btn {
  margin-left: 4px !important;
}

body.g4-user-portal.page-musiconhold #g4-v4-shell
  #msg-panel-main > .noncreatedadd > .add-intro {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

body.g4-user-portal.page-musiconhold #g4-v4-shell
  :is(#music-panel-main, #msg-panel-main) > .noncreatedadd > .color-primary {
  font-weight: 700 !important;
}

/* Source: src/v4/css/routes/call-center-reports.css */

/* Call Center reports. The native page uses DataTables wrappers and legacy
   pagination markup for filters, so keep these corrections scoped to its
   stable route instead of broadening the shared table and pager contracts. */
body.page-callcenter-reports #g4-v4-shell
  :is(#cc-settings-btn-header, #emailReportsLink, .print-report, #stats_download_btn) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}

body.page-callcenter-reports #g4-v4-shell
  :is(#cc-settings-btn-header, #emailReportsLink, .print-report, #stats_download_btn):hover,
body.page-callcenter-reports #g4-v4-shell
  :is(#cc-settings-btn-header, #emailReportsLink, .print-report, #stats_download_btn):focus {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
  outline: none !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  :is(#cc-settings-btn-header, #emailReportsLink, .print-report, #stats_download_btn):hover,
body.page-callcenter-reports.theme-dark #g4-v4-shell
  :is(#cc-settings-btn-header, #emailReportsLink, .print-report, #stats_download_btn):focus {
  background: var(--g4-v4-dark-surface) !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal-body-reports > .modal-header-settings-lower {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 60px !important;
  padding: 15px 0 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal-body-reports > .modal-header-settings-lower > .pull-left,
body.page-callcenter-reports #g4-v4-shell
  #modal-body-reports > .modal-header-settings-lower > .action-container-right,
body.page-callcenter-reports #g4-v4-shell
  #formerly-dropdown-options,
body.page-callcenter-reports #g4-v4-shell
  #formerly-dropdown-options > .pagination {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
  width: auto !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal-body-reports > .modal-header-settings-lower > .pull-left {
  flex: 1 1 auto !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal-body-reports > .modal-header-settings-lower > .action-container-right {
  flex: 0 0 auto !important;
}

/* Each report response includes the Queue Stats, Agent Stats, and Agent
   Availability column menus. Native route initialization selects the active
   menu with an inline display value; preserve that state over the shared
   action-row flex layout so a report never exposes another tab's columns. */
body.page-callcenter-reports #g4-v4-shell
  #modal-body-reports .tablecolumn[style*="display: none"] {
  display: none !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal-body-reports .tablecolumn[style*="display: inline-block"] {
  display: inline-flex !important;
}

/* The report graph is rendered by Google Charts. Keep its stable host on the
   final report-content width so a chart created during startup cannot retain
   the wider pre-shell viewport measurement. */
body.page-callcenter-reports #g4-v4-shell
  :is(.chart-container, #modal-graph-div) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Queue Stats and Agent Stats share this graph-metric dropdown. Replace the
   vendor's legacy link blue on both its label and CSS caret with Grid4 blue. */
body.page-callcenter-reports #g4-v4-shell
  #graph-type-title > a,
body.page-callcenter-reports #g4-v4-shell
  #graph-type-label {
  color: var(--g4-v4-brand-blue) !important;
  -webkit-text-fill-color: var(--g4-v4-brand-blue) !important;
}

body.page-callcenter-reports #g4-v4-shell
  #graph-type-title .caret {
  border-top-color: var(--g4-v4-brand-blue) !important;
  border-bottom-color: var(--g4-v4-brand-blue) !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  :is(.chart-container, #modal-graph-div) {
  color: var(--g4-v4-dark-text) !important;
  background: var(--g4-v4-dark-surface) !important;
  border-color: var(--g4-v4-dark-border) !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  #modal-graph-div svg :is(text, tspan) {
  fill: var(--g4-v4-dark-text) !important;
  stroke: none !important;
  filter: none !important;
  text-shadow: none !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  #modal-graph-div svg rect[fill="#ffffff"] {
  fill: var(--g4-v4-dark-surface) !important;
}

/* Agent Availability alternates native white and light-gray timeline rows.
   Preserve that staggered distinction with the two V4 dark surfaces. */
body.page-callcenter-reports.theme-dark #g4-v4-shell
  #modal-graph-div svg rect[fill="#e6e6e6"] {
  fill: var(--g4-v4-table-header-bg) !important;
}

/* Google Charts builds report hover tooltips as white callouts even after the
   graph canvas switches to dark mode. Most report graphs use an SVG path,
   while Agent Availability can use an SVG rect or the HTML fallback. */
body.page-callcenter-reports.theme-dark #g4-v4-shell
  #modal-graph-div .google-visualization-tooltip {
  background-color: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-dark-text) !important;
  border-color: var(--g4-v4-dark-border) !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  #modal-graph-div .google-visualization-tooltip :is(*, span, div, td) {
  background: transparent !important;
  color: var(--g4-v4-dark-text) !important;
  text-shadow: none !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  #modal-graph-div svg .google-visualization-tooltip :is(path, rect) {
  fill: var(--g4-v4-table-header-bg) !important;
  stroke: var(--g4-v4-dark-border) !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  #modal-graph-div svg .google-visualization-tooltip :is(text, tspan) {
  fill: var(--g4-v4-dark-text) !important;
  color: var(--g4-v4-dark-text) !important;
  stroke: none !important;
  text-shadow: none !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  #modal-graph-div svg rect:is(
    [fill="#ebebeb"],
    [fill="#cccccc"],
    [fill="#ececf7"],
    [fill="#f7f7fc"],
    [fill="#f2f2f2"],
    [fill="#ababab"]
  ) {
  fill: var(--g4-v4-dark-border) !important;
}

body.page-callcenter-reports #g4-v4-shell
  .reports-toolbar-row > .hide.pull-right > .btn-group {
  display: flex !important;
  align-items: center !important;
  gap: var(--g4-v4-control-gap) !important;
}

/* Every Call Center report shares this date/time toolbar. Match V3's dark
   controls and native time-menu options once here instead of repeating the
   same correction across all five report tabs. */
body.page-callcenter-reports.theme-dark #g4-v4-shell
  .reports-toolbar-row :is(input.reportdate, select),
body.page-callcenter-reports.theme-dark #g4-v4-shell
  .reports-toolbar-row .input-append > .add-on {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  background-image: none !important;
  color: var(--g4-v4-dark-text) !important;
  -webkit-text-fill-color: var(--g4-v4-dark-text) !important;
  box-shadow: none !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  .reports-toolbar-row select > option {
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  .reports-toolbar-row .input-append > .add-on > .icon-calendar {
  filter: invert(1) brightness(2.5) contrast(1.5) !important;
}

/* The Advanced Email Reports fields are native six-row multi-selects, not
   single-line form controls. Preserve their accepted V3/native height and
   reserve enough row space so the following selector cannot overlap them. */
body.page-callcenter-reports #g4-v4-shell #email-report
  #report-email-advanced .report-email-selector {
  min-height: 140px !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  overflow: hidden !important;
}

body.page-callcenter-reports #g4-v4-shell #email-report
  #report-email-advanced .report-email-selector select[multiple] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 126px !important;
}

body.page-callcenter-reports #g4-v4-shell #email-report
  #report-email-advanced .report-email-selector select[multiple] > option {
  padding: 4px 8px !important;
}

/* Extra recipients increase the Advanced form's content height. When the
   shared modal layout caps Email Reports to the viewport, keep the header and
   footer fixed and let only the form body scroll instead of growing the modal
   or pushing its actions below the screen. */
body.page-callcenter-reports #g4-v4-shell
  #email-report.g4-v4-modal-viewport-fit {
  display: flex !important;
  flex-direction: column !important;
}

body.page-callcenter-reports #g4-v4-shell
  #email-report.g4-v4-modal-viewport-fit > .modal-header {
  flex: 0 0 auto !important;
}

body.page-callcenter-reports #g4-v4-shell
  #email-report.g4-v4-modal-viewport-fit > form {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #email-report.g4-v4-modal-viewport-fit > form > .modal-body {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.page-callcenter-reports #g4-v4-shell
  #email-report.g4-v4-modal-viewport-fit > form > .modal-footer {
  flex: 0 0 auto !important;
}

/* The Call Center Settings fragment is also available from this reports
   route. Keep its status list free of unnecessary scrollbars and use the same
   centered compact add action as the primary Call Center route. */
body.page-callcenter-reports #g4-v4-shell
  #cc-settings-modal #cc-settings-custom-status > form.form-search + div {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.page-callcenter-reports #g4-v4-shell
  #cc-settings-modal #cc-settings-custom-status #add-status-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: var(--g4-v4-control-height) !important;
  min-width: var(--g4-v4-control-height) !important;
  max-width: var(--g4-v4-control-height) !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #cc-settings-modal #cc-settings-custom-status #add-status-btn > i {
  margin: 0 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #formerly-dropdown-options > .pagination > ul {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #formerly-dropdown-options > .pagination > ul > li,
body.page-callcenter-reports #g4-v4-shell
  #formerly-dropdown-options > .pagination > ul > li > a {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #formerly-dropdown-options > .pagination > ul > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 4px 12px !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-callcenter-reports #g4-v4-shell
  #formerly-dropdown-options label.checkbox {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}

body.page-callcenter-reports #g4-v4-shell
  #formerly-dropdown-options label.checkbox > input[type="checkbox"] {
  position: static !important;
  flex: 0 0 auto !important;
  float: none !important;
  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
}

body.page-callcenter-reports #g4-v4-shell
  :is(#modal-table-div, #modal_stats_table_wrapper,
      #modal_stats_table_wrapper .dataTables_scroll,
      #modal_stats_table_wrapper .dataTables_scrollHead,
      #modal_stats_table_wrapper .dataTables_scrollHeadInner,
      #modal_stats_table_wrapper .dataTables_scrollBody,
      #modal_stats_table_wrapper .dataTables_scrollFoot,
      #modal_stats_table_wrapper .dataTables_scrollFootInner) {
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-table-text) !important;
}

/* DataTables measures its cloned head and foot before the V4 shell settles.
   Keep all three table copies on the final container width in CSS rather than
   forcing a resize/reflow from JavaScript. */
body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table_wrapper
  :is(.dataTables_scrollHeadInner, .dataTables_scrollFootInner) {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-right: 0 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table_wrapper
  :is(.dataTables_scrollHeadInner table.dataTable,
      .dataTables_scrollBody table.dataTable,
      .dataTables_scrollFootInner table.dataTable) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table_wrapper table.dataTable {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-table-text) !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table_wrapper table.dataTable > thead > tr > th {
  box-sizing: border-box !important;
  padding: 5px !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11.25px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  vertical-align: middle !important;
}

/* Queue Stats and Agent Stats share the native dark graph sprite in their
   first table header. Render both the visible header and DataTables' sizing
   clone in white against the dark report-table surface. */
body.page-callcenter-reports.theme-dark #g4-v4-shell
  #modal_stats_table_wrapper .graph-all-toggle .icon-graph {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table_wrapper table.dataTable > thead > tr > th:first-child {
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table_wrapper table.dataTable > thead > tr > th:last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table > tbody > tr > td {
  box-sizing: border-box !important;
  padding: 4px 5px !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-table-text) !important;
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 20px !important;
  vertical-align: middle !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table > tbody > tr > td:first-child {
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table > tbody > tr > td:last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table.table-hover > tbody > tr:hover > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

/* The report payload writes inactive numeric values with an inline
   `darkgray` color. Normalize those values to the table theme, including the
   highlighted-row values the native inline style would otherwise keep gray. */
body.page-callcenter-reports:not(.theme-dark) #g4-v4-shell
  #modal_stats_table_wrapper :is(tbody, tfoot) span[style*="darkgray"] {
  color: #000 !important;
}

body.page-callcenter-reports.theme-dark #g4-v4-shell
  #modal_stats_table_wrapper :is(tbody, tfoot) span[style*="darkgray"] {
  color: #FFF !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table.table-hover > tbody > tr:hover > td span[style*="darkgray"] {
  color: #000 !important;
}

body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table_wrapper .dataTables_scrollFoot table.dataTable > tfoot > tr > th,
body.page-callcenter-reports #g4-v4-shell
  #modal_stats_table_wrapper .dataTables_scrollFoot table.dataTable > tfoot > tr > td {
  padding: 4px 5px !important;
  border: 0 !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-table-text) !important;
  font-size: 13px !important;
  line-height: 20px !important;
}

/* Source: src/v4/css/routes/call-queues.css */

/* Domain Call Queues. Preserve the compact V3 table and queue editor while
   leaving queue data and row actions under the portal's native lifecycle. */
body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container > table.table > thead a {
  color: var(--g4-v4-text) !important;
}

/* The portal's sprite uses a dark arrow for the active sort state. Replace it
   only in dark mode so the direction remains legible against the header. */
body.page-callqueues.theme-dark #g4-v4-shell
  .callqueues-panel-main table thead a:is(.asc, .desc) {
  display: inline-flex !important;
  align-items: center !important;
  padding-right: 0 !important;
  background-image: none !important;
}

body.page-callqueues.theme-dark #g4-v4-shell
  .callqueues-panel-main table thead a:is(.asc, .desc)::after {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  content: "" !important;
}

body.page-callqueues.theme-dark #g4-v4-shell
  .callqueues-panel-main table thead a.asc::after {
  border-bottom: 5px solid currentColor !important;
}

body.page-callqueues.theme-dark #g4-v4-shell
  .callqueues-panel-main table thead a.desc::after {
  border-top: 5px solid currentColor !important;
}

body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container > table.table
  > thead > tr > th {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  border-top-width: 0 !important;
  line-height: 20px !important;
}

body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container > table.table
  > tbody > tr > td:not(.action-buttons) a {
  color: var(--g4-v4-brand-blue) !important;
  opacity: 1 !important;
}

body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container > table.table
  > tbody > tr:hover > td:not(.action-buttons) a {
  color: #FFF !important;
}

body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container > table.table
  > thead > tr > th:nth-child(n + 2):nth-child(-n + 5) {
  padding-right: 5px !important;
  padding-left: 5px !important;
  text-align: left !important;
}

body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container > table.table
  > tbody > tr > td:nth-child(n + 2):nth-child(-n + 5) {
  text-align: left !important;
}

body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container > table.table
  > thead > tr > th:nth-child(6),
body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container > table.table
  > thead > tr > th:nth-child(7),
body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container > table.table
  > tbody > tr > td:nth-child(6),
body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container > table.table
  > tbody > tr > td:nth-child(7) {
  padding-right: 5px !important;
  padding-left: 5px !important;
  text-align: right !important;
}

body.page-callqueues #g4-v4-shell
  .callqueues-panel-main > .table-container {
  border-radius: var(--g4-v4-radius) !important;
}

/* Edit Agents is the accepted wide table-modal variant. Its eight columns
   need the V3 width and compact table frame; forcing them through the shared
   600px form-modal width wraps the headings into a visually different bar. */
body.page-callqueues #write-agents {
  width: 720px !important;
  max-width: calc(100vw - 40px) !important;
}

body.page-callqueues #write-agents .modal-body {
  box-sizing: border-box !important;
  height: 380px !important;
  padding: 0 !important;
}

/* When Add Agent is expanded, match V3's two independent scroll regions.
   The compact table-only state keeps the accepted 380px modal body. */
body.page-callqueues
  #write-agents.g4-v4-add-agent-expanded .modal-body {
  height: auto !important;
  overflow: hidden !important;
}

body.page-callqueues
  #write-agents.g4-v4-add-agent-expanded
  #addedit > .scrollable,
body.page-callqueues
  #write-agents.g4-v4-add-agent-expanded
  #add-agents-table {
  max-height: none !important;
  overflow-y: scroll !important;
}

body.page-callqueues #write-agents #add-agents-table {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 6px !important;
  overflow-x: hidden !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
}

/* Bootstrap appends action tooltips inside the final table cell. Anchor them
   inside the table so long permission messages cannot widen or clip the pane. */
body.page-callqueues #write-agents #add-agents-table
  td.action-buttons > a.helpsy + .tooltip {
  right: 6px !important;
  left: auto !important;
}

body.page-callqueues #write-agents #add-agents-table
  td.action-buttons > a.helpsy.disabled + .tooltip > .tooltip-inner {
  max-width: none !important;
}

body.page-callqueues #write-agents #add-agents-table
  td.action-buttons > a.helpsy + .tooltip.top > .tooltip-arrow {
  left: auto !important;
  margin-left: 0 !important;
}

body.page-callqueues #write-agents #add-agents-table
  td.action-buttons > a.edit.helpsy + .tooltip.top > .tooltip-arrow {
  right: 41px !important;
}

body.page-callqueues #write-agents #add-agents-table
  td.action-buttons > a.delete.helpsy + .tooltip.top > .tooltip-arrow {
  right: 18px !important;
}

/* Selectivity renders its results as a separate surface inside Add Agent.
   The same modal also opens from the supervisor's page-agents dashboard. */
body.g4-v4-active.theme-dark #write-agents
  :is(.selectivity-dropdown, .selectivity-results-container, .selectivity-result-item) {
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark #write-agents
  .selectivity-result-item:is(.highlight, :hover) {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.page-callqueues #write-agents #add-agents-table > table.table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
}

body.page-callqueues #write-agents table.table > thead > tr > th {
  box-sizing: border-box !important;
  height: 30px !important;
  padding: 4px 5px !important;
  border: 0 !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-text) !important;
  font-size: 11.25px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}

body.page-callqueues #write-agents table.table > thead > tr > th:first-child {
  border-left: 1px solid var(--g4-v4-border) !important;
}

body.page-callqueues #write-agents table.table > thead > tr > th:last-child {
  border-right: 1px solid var(--g4-v4-border) !important;
}

body.page-callqueues #write-agents table.table > tbody > tr {
  height: 29px !important;
}

body.page-callqueues #write-agents table.table > tbody > tr,
body.page-callqueues #write-agents table.table > tbody > tr > td {
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-text) !important;
}

body.page-callqueues #write-agents table.table > tbody > tr > td {
  box-sizing: border-box !important;
  padding: 4px 5px !important;
  vertical-align: middle !important;
}

body.page-callqueues #write-agents table.table
  > :is(thead, tbody) > tr > :first-child {
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.page-callqueues #write-agents table.table
  > :is(thead, tbody) > tr > :last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.page-callqueues #write-agents table.table
  > :is(thead, tbody) > tr > :not(:nth-child(2)) {
  text-align: center !important;
}

body.page-callqueues #write-agents table.table
  > :is(thead, tbody) > tr > :nth-child(2) {
  text-align: left !important;
}

body.page-callqueues.theme-dark #write-agents #add-agents-table {
  background: var(--g4-v4-dark-surface) !important;
}

body.page-callqueues #write-agents table.table > tbody > tr:hover,
body.page-callqueues #write-agents table.table > tbody > tr:hover > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

/* The queued-caller list is a bare modal table rather than one of the shared
   table-container lists. Mirror V3's compact modal header and define the
   populated-row states even when the current queue is empty. */
body.page-callqueues #view-queuedcalls #calls_table > thead > tr > th {
  box-sizing: content-box !important;
  padding: 5px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-text) !important;
  font-size: 11.25px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

body.page-callqueues.theme-dark
  #view-queuedcalls #calls_table > thead > tr > th {
  background: var(--g4-v4-dark-surface) !important;
}

body.page-callqueues #view-queuedcalls #calls_table > tbody > tr,
body.page-callqueues #view-queuedcalls #calls_table > tbody > tr > td {
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-text) !important;
}

body.page-callqueues #view-queuedcalls #calls_table > tbody > tr a {
  color: var(--g4-v4-brand-blue) !important;
  opacity: 1 !important;
}

body.page-callqueues #view-queuedcalls #calls_table.table-hover
  > tbody > tr:hover,
body.page-callqueues #view-queuedcalls #calls_table.table-hover
  > tbody > tr:hover > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.page-callqueues #view-queuedcalls #calls_table.table-hover
  > tbody > tr:hover a {
  color: #FFF !important;
}

body.page-callqueues #write-queue .modal-header {
  padding-bottom: 0 !important;
}

body.page-callqueues #write-queue .modal-body {
  height: 470px !important;
  min-height: 0 !important;
}

body.page-callqueues #write-queue .modal-body > .tab-content {
  box-sizing: border-box !important;
  height: 396px !important;
  padding: 15px !important;
  margin-top: -1px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: inherit !important;
}

body.page-callqueues #write-queue .control-group {
  margin: 7.5px 0 13.5px !important;
}

body.page-callqueues #write-queue .control-label {
  width: 155px !important;
  text-align: right !important;
}

body.page-callqueues #write-queue .controls {
  margin-left: 165px !important;
}

body.page-callqueues #write-queue input.large {
  width: 290px !important;
  max-width: 290px !important;
}

body.page-callqueues #write-queue input[type="radio"] {
  width: 0.6rem !important;
  height: 1rem !important;
}

body.page-callqueues #write-queue .modal-footer > .btn {
  min-width: 75px !important;
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  text-shadow: none !important;
}

body.page-callqueues #write-queue .modal-footer > .btn:hover,
body.page-callqueues #write-queue .modal-footer > .btn:focus {
  background: var(--g4-v4-brand-navy) !important;
}

body.page-callqueues.theme-dark #write-queue .modal-footer > .btn:hover,
body.page-callqueues.theme-dark #write-queue .modal-footer > .btn:focus {
  background: var(--g4-v4-dark-surface) !important;
}

/* Source: src/v4/css/routes/time-frames.css */

/* Domain Time Frames uses legacy floated pagination markup for two checkbox
   filters. Normalize that one row without changing checkbox behavior. */
body.page-timeframes #g4-v4-shell #content form.form-search {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: var(--g4-v4-control-height) !important;
  margin-bottom: 20px !important;
}

body.page-timeframes #g4-v4-shell form.form-search > .input-append {
  display: inline-flex !important;
  flex: 0 0 216px !important;
  width: 216px !important;
  height: var(--g4-v4-control-height) !important;
}

body.page-timeframes #g4-v4-shell form.form-search #choices {
  width: 216px !important;
  max-width: 216px !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-timeframes #g4-v4-shell
  form.form-search > .input-append > button.btn {
  display: none !important;
}

body.page-timeframes #g4-v4-shell
  form.form-search > .action-container-right {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
}

body.page-timeframes #g4-v4-shell
  form.form-search > .action-container-right:has(#pageRefresh) {
  order: 2 !important;
  flex-direction: row-reverse !important;
  width: 194px !important;
}

body.page-timeframes #g4-v4-shell
  form.form-search > .action-container-right:not(:has(#pageRefresh)) {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

body.page-timeframes #g4-v4-shell
  form.form-search > .action-container-right:has(#pageRefresh) .pagination {
  width: 154px !important;
}

body.page-timeframes #g4-v4-shell
  form.form-search > .action-container-right:not(:has(#pageRefresh)) .pagination {
  flex: 0 0 auto !important;
  width: auto !important;
}

body.page-timeframes #g4-v4-shell form.form-search .pagination {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: var(--g4-v4-control-height) !important;
}

body.page-timeframes #g4-v4-shell form.form-search .pagination ul,
body.page-timeframes #g4-v4-shell form.form-search .pagination li,
body.page-timeframes #g4-v4-shell form.form-search .pagination li > a {
  display: block !important;
  width: auto !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
}

body.page-timeframes #g4-v4-shell form.form-search .pagination li > a {
  box-sizing: border-box !important;
  padding: 0 14px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

body.page-timeframes #g4-v4-shell form.form-search label.checkbox {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  color: var(--g4-v4-text) !important;
  line-height: var(--g4-v4-control-height) !important;
  white-space: nowrap !important;
}

body.page-timeframes #g4-v4-shell form.form-search label.checkbox
  > input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin: 0 6px 0 0 !important;
}

body.page-timeframes #g4-v4-shell table thead a {
  color: var(--g4-v4-text) !important;
}

/* Owner and Extension use the portal's fixed dark sort sprite. Replace it
   with a CSS caret that remains black in light mode and white in dark mode. */
body.page-timeframes #g4-v4-shell .timeframes-table-index > thead
  :is(#TableHeaderLinkOwner, #TableHeaderLinkExtension) > a:is(.asc, .desc) {
  position: relative !important;
  padding-right: 14px !important;
  background-image: none !important;
  white-space: nowrap !important;
}

body.page-timeframes #g4-v4-shell .timeframes-table-index > thead
  :is(#TableHeaderLinkOwner, #TableHeaderLinkExtension)
  > a:is(.asc, .desc)::after {
  position: absolute !important;
  top: 50% !important;
  right: 1px !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  content: "" !important;
  transform: translateY(-50%) !important;
}

body.page-timeframes #g4-v4-shell .timeframes-table-index > thead
  :is(#TableHeaderLinkOwner, #TableHeaderLinkExtension) > a.asc::after {
  border-top: 0 !important;
  border-bottom: 6px solid currentColor !important;
}

body.page-timeframes #g4-v4-shell .timeframes-table-index > thead
  :is(#TableHeaderLinkOwner, #TableHeaderLinkExtension) > a.desc::after {
  border-top: 6px solid currentColor !important;
  border-bottom: 0 !important;
}

body.page-timeframes.theme-light #g4-v4-shell .timeframes-table-index > thead
  :is(#TableHeaderLinkOwner, #TableHeaderLinkExtension) > a.asc::after {
  border-bottom-color: #000 !important;
}

body.page-timeframes.theme-light #g4-v4-shell .timeframes-table-index > thead
  :is(#TableHeaderLinkOwner, #TableHeaderLinkExtension) > a.desc::after {
  border-top-color: #000 !important;
}

body.page-timeframes.theme-dark #g4-v4-shell .timeframes-table-index > thead
  :is(#TableHeaderLinkOwner, #TableHeaderLinkExtension) > a.asc::after {
  border-bottom-color: #FFF !important;
}

body.page-timeframes.theme-dark #g4-v4-shell .timeframes-table-index > thead
  :is(#TableHeaderLinkOwner, #TableHeaderLinkExtension) > a.desc::after {
  border-top-color: #FFF !important;
}

body.page-timeframes #g4-v4-shell table tbody td:first-child > a {
  color: var(--g4-v4-brand-blue) !important;
}

body.page-timeframes #g4-v4-shell table tbody tr:hover td:first-child > a {
  color: #FFF !important;
}

/* Domain Time Frames exposes its schedule details as links in the fourth
   column. Match the Name actions with Grid4 blue until the row is hovered. */
body.page-timeframes #g4-v4-shell .timeframes-table-user
  > tbody > tr:not(:hover):not(.dropdown-active) > td:nth-child(4) > a {
  color: var(--g4-v4-brand-blue) !important;
  -webkit-text-fill-color: var(--g4-v4-brand-blue) !important;
}

body.page-timeframes #g4-v4-shell .timeframes-table-user
  > tbody > tr:hover > td:nth-child(4) > a {
  color: #FFF !important;
  -webkit-text-fill-color: #FFF !important;
}

body.page-timeframes #g4-v4-shell table thead th:nth-child(2) {
  text-align: left !important;
}

body.page-timeframes #g4-v4-shell table thead th:nth-child(3) {
  text-align: right !important;
}

body.page-timeframes #g4-v4-shell .custom-timeframe-panel-heading {
  background: var(--g4-v4-table-header-bg) !important;
}

/* Time Frame is a genuine wide editor: its later recurrence steps contain
   calendar grids and need the same bounded 780px viewport used by V3. */
body.page-timeframes #write-timeframe {
  width: min(780px, calc(100vw - 2rem)) !important;
  height: min(841px, calc(100vh - 60px)) !important;
  max-width: calc(100vw - 2rem) !important;
  max-height: calc(100vh - 2rem) !important;
}

body.page-timeframes #write-timeframe .modal-header {
  padding-bottom: 0 !important;
}

body.page-timeframes #write-timeframe > form {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100% - 112px) !important;
  min-height: 0 !important;
}

body.page-timeframes #write-timeframe .modal-body {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.page-timeframes #write-timeframe .modal-body > .tab-content {
  box-sizing: border-box !important;
  padding: 15px !important;
  margin-top: -1px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: inherit !important;
}

body.page-timeframes #write-timeframe input[type="text"] {
  width: 211px !important;
  max-width: 211px !important;
}

/* Holiday selection keeps its native search affordance and panel geometry,
   while adopting the V4 dark surfaces. */
body.page-timeframes #write-timeframe .holiday-search-container input.holiday-search {
  box-sizing: border-box !important;
  padding-left: 35px !important;
}

body.page-timeframes.theme-dark #write-timeframe
  :is(.holiday-picker-container, .holiday-rows) {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-holiday
  input.time-input-holiday[type="text"] {
  box-sizing: border-box !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
}

/* Preserve the selected workweek pills while giving inactive days a dark-mode
   treatment. The observation selects join their day labels with a square seam. */
body.page-timeframes.theme-dark #write-timeframe
  #recurring-timeframe-modal-observance .workweek-day-label:not(.selected) {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-observance
  .workweek-observe-day-options .input-prepend select {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-observance
  select.holiday-is-on-day-selector {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

/* Specific Dates is a single compact range row. Keep all controls inside the
   bordered picker and align the add action with the date/time fields. */
body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  :is(.date-picker-pair, .specific-date-rows) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  .date-picker-pair {
  display: flex !important;
  flex-direction: column !important;
  padding: 10px !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  .time-input-row-sd {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  .time-input-row-sd > span {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  .time-input-row-sd > span:empty {
  display: none !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  .time-input-row-sd > input {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  .time-input-row-sd > .date-of-day {
  flex: 0 0 112px !important;
  width: 112px !important;
  max-width: 112px !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  .time-input-row-sd > .time-input-sd {
  flex: 0 0 92px !important;
  width: 92px !important;
  max-width: 92px !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  .time-input-row-sd > button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 30px !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin-left: auto !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  .time-input-row-sd > #add-status-btn {
  margin-right: 0.5rem !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-specific-dates
  .time-input-row-sd > button > i {
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

body.page-timeframes.theme-light #write-timeframe
  #recurring-timeframe-modal-specific-dates .date-picker-pair {
  border-color: var(--g4-v4-light-border) !important;
  background: var(--g4-v4-light-surface) !important;
  color: var(--g4-v4-brand-navy) !important;
  box-shadow: none !important;
}

body.page-timeframes.theme-dark #write-timeframe
  #recurring-timeframe-modal-specific-dates .date-picker-pair {
  border-color: #DDD !important;
  background: var(--g4-v4-dark-app-background) !important;
  color: var(--g4-v4-dark-text) !important;
  box-shadow: none !important;
}

/* Weekly ranges use the compact V3 time width so the add and copy actions fit
   without creating a horizontal scrollbar. */
body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  .time-input-row > input.time-input[type="text"] {
  box-sizing: border-box !important;
  flex: 0 0 108px !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  a.copy-to-all,
body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  a.copy-to-all:link,
body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  a.copy-to-all:visited,
body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  a.copy-to-all:hover,
body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  a.copy-to-all:focus,
body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  a.copy-to-all:active {
  color: var(--g4-v4-brand-blue) !important;
}

/* Recurrence rows share one label column and use compact, content-appropriate
   widths with explicit room for the native select caret. */
body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  .controls-group.pt20:not([style*="display: none"]) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  .controls-group.pt20 > .control-label {
  box-sizing: border-box !important;
  flex: 0 0 79px !important;
  width: 79px !important;
  min-width: 79px !important;
  padding-right: 0 !important;
  text-align: left !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  .controls-group.pt20 > .flex-container-day-of-the-week {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  gap: 8px !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  .controls-group.pt20 > .flex-container-day-of-the-week > .pl20 {
  padding-left: 0 !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  :is(#dow-recurrence, #dow-recur-every-custom-count,
      #dow-recur-every-custom-interval, #dow-end-option) {
  padding-right: 32px !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  #dow-recurrence,
body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  :is(#dow-start-date, #dow-end-date) {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  #dow-recur-every-custom-count {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  #dow-recur-every-custom-interval {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  padding-right: 24px !important;
}

body.page-timeframes #write-timeframe #recurring-timeframe-modal-dow
  #dow-end-option {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

/* Custom Time Frame section titles must not paint a light layer over the
   already-themed panel heading. */
body.page-timeframes.theme-dark
  .custom-timeframe-panel-heading > .custom-timeframe-panel-title {
  background: transparent !important;
  background-color: transparent !important;
}

/* These dropdown buttons are standalone actions despite living in Bootstrap
   .btn-group wrappers, so they retain the standard radius on every corner. */
body.page-timeframes #g4-v4-shell .custom-timeframe-button-group
  :is(#mainActionButton, #custom-timeframe-options-btn) {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
}

body.g4-user-portal.page-timeframes #write-timeframe
  #recurring-timeframe-modal-type label.radio {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-height: 20px !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  font-size: 12.1875px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

body.g4-user-portal.page-timeframes #write-timeframe
  #recurring-timeframe-modal-type label.radio > input[type="radio"] {
  position: static !important;
  float: none !important;
  flex: 0 0 auto !important;
  order: -1 !important;
  width: 0.6rem !important;
  height: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-timeframes #write-timeframe .modal-footer {
  flex: 0 0 auto !important;
  padding-right: 15px !important;
}

body.page-timeframes #write-timeframe .modal-footer > .btn {
  min-width: 75px !important;
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  text-shadow: none !important;
}

body.page-timeframes #write-timeframe .modal-footer > .btn:hover,
body.page-timeframes #write-timeframe .modal-footer > .btn:focus {
  background: var(--g4-v4-brand-navy) !important;
}

body.page-timeframes.theme-dark #write-timeframe .modal-footer > .btn:hover,
body.page-timeframes.theme-dark #write-timeframe .modal-footer > .btn:focus {
  background: var(--g4-v4-dark-surface) !important;
}

/* Source: src/v4/css/routes/music-on-hold.css */

/* Music On Hold uses the same legacy checkbox/pagination building blocks as
   Time Frames, but combines them with a type selector in a different order. */
body.page-music #g4-v4-shell #content form.form-search {
  display: inline-flex !important;
  align-items: flex-start !important;
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
}

body.page-music #g4-v4-shell form.form-search > .input-append {
  display: inline-flex !important;
  flex: 0 0 216px !important;
  width: 216px !important;
  height: var(--g4-v4-control-height) !important;
}

body.page-music #g4-v4-shell form.form-search #choices {
  width: 216px !important;
  max-width: 216px !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-music #g4-v4-shell
  form.form-search > .input-append > button.btn {
  display: none !important;
}

body.page-music #g4-v4-shell form.form-search > span {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 30.875px !important;
  height: var(--g4-v4-control-height) !important;
  margin-left: 3.3px !important;
  line-height: normal !important;
  white-space: nowrap !important;
}

body.page-music #g4-v4-shell form.form-search #stat_type {
  flex: 0 0 100px !important;
  width: 100px !important;
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  color-scheme: light !important;
}

body.page-music #g4-v4-shell form.form-search #stat_type > option {
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

body.page-music.theme-dark #g4-v4-shell form.form-search #stat_type {
  color-scheme: dark !important;
}

body.page-music #g4-v4-shell
  form.form-search > .action-container-right {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
}

body.page-music #g4-v4-shell
  form.form-search > .action-container-right:not(:has(#pageRefresh)) {
  order: 1 !important;
  width: 274.5px !important;
}

body.page-music #g4-v4-shell
  form.form-search > .action-container-right:has(#pageRefresh) {
  order: 2 !important;
  flex-direction: row-reverse !important;
  width: 200.5px !important;
}

body.page-music #g4-v4-shell
  form.form-search > .action-container-right:not(:has(#pageRefresh)) .pagination {
  width: 254.5px !important;
}

body.page-music #g4-v4-shell
  form.form-search > .action-container-right:has(#pageRefresh) .pagination {
  width: 160.5px !important;
}

body.page-music #g4-v4-shell form.form-search .pagination,
body.page-music #g4-v4-shell form.form-search .pagination ul,
body.page-music #g4-v4-shell form.form-search .pagination li,
body.page-music #g4-v4-shell form.form-search .pagination li > a {
  height: var(--g4-v4-control-height) !important;
}

body.page-music #g4-v4-shell form.form-search .pagination {
  display: flex !important;
  align-items: center !important;
}

body.page-music #g4-v4-shell form.form-search .pagination ul,
body.page-music #g4-v4-shell form.form-search .pagination li,
body.page-music #g4-v4-shell form.form-search .pagination li > a {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
}

body.page-music #g4-v4-shell form.form-search .pagination li > a {
  box-sizing: border-box !important;
  padding: 0 14px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

body.page-music #g4-v4-shell form.form-search label.checkbox {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  color: var(--g4-v4-text) !important;
  line-height: var(--g4-v4-control-height) !important;
  white-space: nowrap !important;
}

body.page-music #g4-v4-shell form.form-search label.checkbox
  > input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin: 0 6px 0 0 !important;
}

body.page-music #g4-v4-shell #music-index-table thead th {
  box-sizing: border-box !important;
  height: 31px !important;
  padding: 5px !important;
  font-size: 11.25px !important;
  line-height: 20px !important;
}

body.page-music #g4-v4-shell #music-index-table tbody td {
  box-sizing: border-box !important;
  height: 29px !important;
  padding: 4px 5px !important;
}

body.page-music #g4-v4-shell #music-index-table thead a {
  color: var(--g4-v4-text) !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

body.page-music #g4-v4-shell #music-index-table thead a.asc {
  padding-right: 0 !important;
  background-image: none !important;
}

body.page-music #g4-v4-shell #music-index-table thead a.asc::after {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px !important;
  border-right: 4px solid transparent !important;
  border-bottom: 5px solid currentColor !important;
  border-left: 4px solid transparent !important;
  vertical-align: 1px !important;
}

body.page-music #g4-v4-shell #music-index-table tbody
  td:first-child > a {
  color: var(--g4-v4-brand-blue) !important;
}

body.page-music #g4-v4-shell #music-index-table tbody
  tr:hover td:first-child > a {
  color: #FFF !important;
}

/* The selected owner view is two equal, fixed-height media panels. The native
   containers are otherwise left white and padded differently from V3. */
body.page-music #g4-v4-shell .active-panel-moh {
  box-sizing: border-box !important;
  height: 432px !important;
  padding: 0 !important;
  margin: 0 5px 1.5px 0 !important;
  border: 1px solid var(--g4-v4-border) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

body.page-music #g4-v4-shell .music-panel-main {
  box-sizing: border-box !important;
  height: 430px !important;
  padding: 0 6px 5px !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

body.page-music #g4-v4-shell .music-panel-main > h3 {
  display: flex !important;
  align-items: center !important;
  color: var(--g4-v4-text) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0.245px !important;
}

body.page-music #g4-v4-shell .music-panel-main > table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
}

body.page-music #g4-v4-shell .music-panel-main > table thead th {
  box-sizing: content-box !important;
  padding: 0.62rem 0.75rem !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  box-shadow: none !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 15px !important;
  vertical-align: middle !important;
}

body.page-music #g4-v4-shell .music-panel-main > table thead
  th:first-child {
  padding-right: 0.5rem !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.page-music #g4-v4-shell .music-panel-main > table thead
  th:last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.page-music #g4-v4-shell.theme-dark .music-panel-main > table
  thead th {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.page-music #g4-v4-shell .music-panel-main > table tbody tr {
  height: 29px !important;
  background: transparent !important;
  color: var(--g4-v4-table-text) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05) !important;
  transform: none !important;
}

body.page-music #g4-v4-shell .music-panel-main > table tbody td {
  box-sizing: border-box !important;
  height: 29px !important;
  padding: 4px 5px !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-table-text) !important;
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 20px !important;
  vertical-align: middle !important;
}

body.page-music #g4-v4-shell .music-panel-main > table tbody
  td:first-child {
  padding-right: 0.5rem !important;
  padding-left: 0.75rem !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.page-music #g4-v4-shell .music-panel-main > table tbody
  td:last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.page-music #g4-v4-shell.theme-dark .music-panel-main > table
  tbody td {
  border-top-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

body.page-music #g4-v4-shell .music-panel-main > table tbody a {
  color: var(--g4-v4-brand-blue) !important;
}

body.page-music #g4-v4-shell .music-panel-main > table.table-hover
  tbody tr:hover,
body.page-music #g4-v4-shell .music-panel-main > table.table-hover
  tbody tr:hover > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  box-shadow: none !important;
  transform: none !important;
}

body.page-music #g4-v4-shell .music-panel-main > table.table-hover
  tbody tr:hover a {
  color: #FFF !important;
}

body.page-music #g4-v4-shell .music-panel-main > table tbody
  td.single-button:first-child {
  width: 15px !important;
}

body.page-music #g4-v4-shell .moh-action-container {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  height: 37.5px !important;
  margin: 10px 0 !important;
}

body.page-music #g4-v4-shell .moh-action-container .pagination {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: 37.5px !important;
}

body.page-music #g4-v4-shell .moh-action-container > li {
  margin: 0 !important;
}

body.page-music #g4-v4-shell #music-panel-main
  .moh-action-container .pagination {
  width: 168.55px !important;
}

body.page-music #g4-v4-shell .moh-action-container .pagination ul,
body.page-music #g4-v4-shell .moh-action-container .pagination li,
body.page-music #g4-v4-shell .moh-action-container .pagination li > a {
  display: block !important;
  width: auto !important;
  height: 37.5px !important;
  margin: 0 !important;
}

body.page-music #g4-v4-shell .moh-action-container .pagination li > a {
  box-sizing: border-box !important;
  padding: 8px 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--g4-v4-text) !important;
}

body.page-music #g4-v4-shell .moh-action-container .pagination label.checkbox {
  display: block !important;
  width: auto !important;
  height: 20px !important;
  padding-left: 20px !important;
  margin: 0 0 1.5px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}

body.page-music #g4-v4-shell .moh-action-container > .btn,
body.page-music #g4-v4-shell .moh-action-container .sim-delay-btn {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.page-music #g4-v4-shell .moh-action-container > .btn {
  display: block !important;
  flex: 0 0 auto !important;
  height: var(--g4-v4-control-height) !important;
}

body.page-music #g4-v4-shell .moh-action-container .sim-delay-btn {
  padding-right: 6px !important;
  padding-left: 6px !important;
}

body.page-music #write-music .modal-body {
  box-sizing: border-box !important;
  height: 357px !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.page-music #write-music input[type="text"],
body.page-music #write-music textarea {
  box-sizing: border-box !important;
  width: 276px !important;
  max-width: 276px !important;
}

body.page-music #write-music textarea {
  height: 205px !important;
  min-height: 205px !important;
  max-height: 205px !important;
}

body.page-music #write-music .modal-footer {
  padding-right: 15px !important;
}

/* Source: src/v4/css/routes/resellers.css */

/* Reseller search is live; V3 omits the vendor's redundant submit control. */
body.g4-v4-active #g4-v4-shell
  .input-append:has(> #resellers) > .btn {
  display: none !important;
}

body.g4-v4-active #g4-v4-shell #resellers {
  border-radius: var(--g4-v4-radius) !important;
}

body.g4-v4-active #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table thead > tr > th {
  text-align: left !important;
}

body.g4-v4-active #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table thead > tr > th:not(:first-child) {
  padding-left: 5px !important;
}

/* Reseller Name and Description are sortable links, while each Domains count
   is a navigation link. Match sortable header text to the active theme, keep
   Domains counts on Grid4 blue, and replace the vendor sort sprite with a CSS
   caret that follows the header text color. */
body.g4-v4-active.theme-light #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table thead > tr > th,
body.g4-v4-active.theme-light #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table thead > tr > th > a {
  color: #000 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table thead > tr > th,
body.g4-v4-active.theme-dark #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table thead > tr > th > a {
  color: #FFF !important;
}

body.g4-v4-active #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table thead > tr > th
  > a:is(.asc, .desc) {
  position: relative !important;
  padding-right: 15px !important;
  background-image: none !important;
  white-space: nowrap !important;
}

body.g4-v4-active #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table thead > tr > th
  > a:is(.asc, .desc)::after {
  position: absolute !important;
  top: 4px !important;
  right: 0 !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  content: "" !important;
}

body.g4-v4-active #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table thead > tr > th > a.asc::after {
  border-bottom: 5px solid currentColor !important;
}

body.g4-v4-active #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table thead > tr > th > a.desc::after {
  border-top: 5px solid currentColor !important;
}

body.g4-v4-active #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table tbody > tr > td:nth-child(3) > a {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active #g4-v4-shell:has(#resellers)
  .domains-panel-main table.table tbody > tr:hover
  > td:nth-child(3) > a {
  color: #FFF !important;
}

/* The Add/Edit Reseller dialog is the accepted wider-field modal variant. */
body.g4-v4-active #g4-v4-shell #write-reseller
  .modal-body > .control-group.group {
  margin: 7.5px 0 13.5px !important;
}

body.g4-v4-active #g4-v4-shell #write-reseller
  :is(#ResellerTerritory, #ResellerDescription, .uneditable-input) {
  box-sizing: border-box !important;
  width: 276px !important;
  min-width: 276px !important;
  max-width: 276px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
  padding: 4px 12px !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.g4-v4-active #g4-v4-shell #write-reseller .help-inline {
  color: #4D5C72 !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #write-reseller .modal-footer {
  gap: var(--g4-v4-control-gap) !important;
  padding-right: 15px !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #write-reseller .help-inline {
  color: #D9E0E8 !important;
}

/* Source: src/v4/css/routes/platform-settings.css */

/* Platform Settings links use the brand color in both themes. */
#g4-v4-shell .uiconfig-td-name > a,
#g4-v4-shell .account-dropdown,
#g4-v4-shell .ui-config-table a.ismore {
  color: var(--g4-v4-brand-blue) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--g4-v4-brand-blue) !important;
}

#g4-v4-shell .account-dropdown > .caret {
  border-top-color: var(--g4-v4-brand-blue) !important;
}

/* The name and description share one outer row surface, not two nested cells. */
#g4-v4-shell .uiconfig-table-name-description table,
#g4-v4-shell .uiconfig-table-name-description tbody,
#g4-v4-shell .uiconfig-table-name-description tr,
#g4-v4-shell .uiconfig-table-name-description td,
#g4-v4-shell .uiconfig-table-name-description td:hover {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#g4-v4-shell .table-container > table.ui-config-table > tbody > tr:hover
  :is(.uiconfig-td-name > a, a.ismore) {
  color: #FFF !important;
  -webkit-text-fill-color: #FFF !important;
}

/* The library search and its action form one compound control. */
#g4-v4-shell #uiconfigs-filter {
  box-sizing: border-box !important;
  width: 345px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 0.38rem 0.72rem !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: none !important;
}

#g4-v4-shell #search-btn,
#g4-v4-shell #LinkFiltersDefs,
#g4-v4-shell #LinkFiltersConfigs {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
  font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}

#g4-v4-shell #search-btn {
  width: 37px !important;
  padding: 0 10.5px !important;
  margin: 0 7.5px 0 0 !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

#g4-v4-shell #search-btn #search-icon,
#g4-v4-shell #search-btn .icon-search {
  filter: brightness(0) invert(1) !important;
}

#g4-v4-shell #LinkFiltersDefs,
#g4-v4-shell #LinkFiltersConfigs {
  padding: 0 12.75px !important;
  border-radius: 0.375rem !important;
}

#g4-v4-shell #LinkFiltersConfigs {
  margin-left: 0.625rem !important;
}

#g4-v4-shell #search-btn:hover,
#g4-v4-shell #LinkFiltersDefs:hover,
#g4-v4-shell #LinkFiltersConfigs:hover {
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
}

#g4-v4-shell.theme-dark #search-btn:hover,
#g4-v4-shell.theme-dark #LinkFiltersDefs:hover,
#g4-v4-shell.theme-dark #LinkFiltersConfigs:hover {
  background: var(--g4-v4-dark-surface) !important;
}

#g4-v4-shell #search-btn:focus,
#g4-v4-shell #LinkFiltersDefs:focus,
#g4-v4-shell #LinkFiltersConfigs:focus {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  outline: none !important;
}

/* Active Configs keeps its controls on one stable toolbar row. */
#g4-v4-shell .action-container-left.uiconfig-configs > div:first-child {
  display: flex !important;
  align-items: center !important;
  padding-bottom: 0 !important;
}

#g4-v4-shell .action-container-left.uiconfig-configs .form-search {
  margin: 0 !important;
}

#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox,
#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox > ul,
#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox li,
#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox a,
#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox label.checkbox {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
}

#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox {
  width: auto !important;
  margin-left: 0.625rem !important;
}

#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox > ul {
  width: auto !important;
  padding: 0 !important;
}

#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox li,
#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox a {
  width: auto !important;
}

#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox a {
  padding: 0 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  line-height: 20px !important;
}

#g4-v4-shell .action-container-left.uiconfig-configs .defaultsbox label.checkbox {
  width: auto !important;
  padding: 0 0.7rem !important;
  color: var(--g4-v4-text-secondary) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}

#g4-v4-shell .action-container-left.uiconfig-configs #showDefaults {
  position: static !important;
  width: 9px !important;
  height: 9px !important;
  margin: 0 0.45rem 0 0 !important;
  accent-color: var(--g4-v4-brand-blue) !important;
}

/* Active Configs wraps Import/Export/Add Config separately from Refresh.
   Re-form the V3 toolbar row so every action shares one vertical center. */
#g4-v4-shell:has(.action-container-left.uiconfig-configs)
  .action-container-right:has(#ButtonImportUiconfig):has(#LinkAdd) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--g4-v4-control-gap) !important;
  height: var(--g4-v4-control-height) !important;
}

#g4-v4-shell:has(.action-container-left.uiconfig-configs)
  .action-container-right:has(#ButtonImportUiconfig):has(#LinkAdd) > div {
  display: flex !important;
  align-items: center !important;
  height: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Config detail pages reuse pagination markup for the default-config toggle.
   Keep it beside Filters instead of allowing shared button sizing to collapse
   the label into a narrow, wrapped control. */
#g4-v4-shell:has(.uiconfig-detail-box)
  .action-container-left:has(#showDefaults) > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: var(--g4-v4-control-gap) !important;
  padding-bottom: 8px !important;
}

#g4-v4-shell:has(.uiconfig-detail-box)
  .action-container-left:has(#showDefaults)
  :is(.defaultsbox, .defaultsbox > ul, .defaultsbox li,
    .defaultsbox a, .defaultsbox label.checkbox) {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
}

#g4-v4-shell:has(.uiconfig-detail-box)
  .action-container-left:has(#showDefaults) .defaultsbox > ul {
  padding: 0 !important;
}

#g4-v4-shell:has(.uiconfig-detail-box)
  .action-container-left:has(#showDefaults) .defaultsbox a {
  padding: 0 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  line-height: 20px !important;
}

#g4-v4-shell:has(.uiconfig-detail-box)
  .action-container-left:has(#showDefaults) .defaultsbox label.checkbox {
  padding: 0 0.7rem !important;
  color: var(--g4-v4-text-secondary) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}

#g4-v4-shell:has(.uiconfig-detail-box)
  .action-container-left:has(#showDefaults) #showDefaults {
  position: static !important;
  width: 9px !important;
  height: 9px !important;
  margin: 0 0.45rem 0 0 !important;
  accent-color: var(--g4-v4-brand-blue) !important;
}

/* Refresh and Add Config are one action group in the detail heading. */
#g4-v4-shell .uiconfig-detail-box
  .action-container-right:has(#pageRefresh) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--g4-v4-control-gap) !important;
  height: var(--g4-v4-control-height) !important;
  margin: 7.5px 8.25px 10px 0 !important;
}

#g4-v4-shell .uiconfig-detail-box
  .action-container-right:has(#pageRefresh) > div {
  display: flex !important;
  align-items: center !important;
  height: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Filter Selectivity shells use the modal surface in both themes. */
body.g4-v4-active #filters .selectivity-multiple-input-container {
  min-height: var(--g4-v4-control-height) !important;
  padding: 5px !important;
  border: 1px solid #CCC !important;
  border-radius: 2px !important;
  background: #FFF !important;
  box-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell.theme-dark #filters .selectivity-multiple-input-container {
  background: var(--g4-v4-app-bg) !important;
}

/* Keep Selectivity's option behavior intact; only replace the vendor white
   menu canvas when Platform Settings filters are open in dark mode. */
body.g4-v4-active #g4-v4-shell.theme-dark
  :is(#filters, #write-uiconfig) .selectivity-dropdown {
  background-color: var(--g4-v4-app-bg) !important;
}

/* An open Selectivity menu is absolutely positioned inside the modal body.
   Release that body's clip only while the menu exists so it can layer above
   the fixed footer instead of creating a scrollbar and disappearing behind it. */
body.g4-v4-active #g4-v4-shell :is(#filters, #write-uiconfig)
  .modal-body:has(.selectivity-dropdown) {
  overflow: visible !important;
}

/* Add/Edit Config exposes a native grip on Notes. Let drag-generated inline
   dimensions control the field while keeping it inside the modal body. */
body.g4-v4-active #g4-v4-shell #write-uiconfig textarea#notes {
  min-width: 250px !important;
  max-width: 388px !important;
  min-height: 78.75px !important;
  max-height: 180px !important;
  resize: both !important;
}

/* Configs Library already renders the Tags input; only that modal drops its redundant shell. */
body.g4-v4-active #filters:has(#uiconfigsMultiReseller-access)
  #tags-autocomplete .selectivity-multiple-input-container {
  min-height: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Add Config selection uses the same opaque Grid4 blue as table-row selection. */
#g4-v4-shell #uiconfigs-modal .uiconfig-detail-box.bg-info,
#g4-v4-shell .modal .uiconfig-detail-box.bg-info {
  border-color: var(--g4-v4-brand-blue) !important;
  background-color: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  opacity: 1 !important;
}

/* Data-asset routes keep one visible outer panel; their inner table surface is structural only. */
#g4-v4-shell:has(:is(#LinkAddFirebase, #LinkAddSsl)) .action-container-right {
  display: flex !important;
  align-items: center !important;
  height: var(--g4-v4-control-height) !important;
  gap: var(--g4-v4-control-gap) !important;
}

#g4-v4-shell:has(:is(#LinkAddFirebase, #LinkAddSsl)) .action-container-right > div {
  display: flex !important;
  align-items: center !important;
  height: var(--g4-v4-control-height) !important;
  padding-bottom: 0 !important;
}

#g4-v4-shell:has(:is(#LinkAddFirebase, #LinkAddSsl))
  :is(#LinkAddFirebase, #LinkAddSsl) {
  margin: 0 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#g4-v4-shell:has(:is(#LinkAddFirebase, #LinkAddSsl)) .uiconfigs-panel-main {
  box-sizing: border-box !important;
  height: 35.1667rem !important;
  min-height: 35.1667rem !important;
  padding: 0.7rem 0.85rem 1rem !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  box-shadow: 0 0.75rem 1.75rem var(--g4-v4-shadow) !important;
}

#g4-v4-shell:has(:is(#LinkAddFirebase, #LinkAddSsl))
  .uiconfigs-panel-main > .table-container {
  height: 440px !important;
  min-height: 440px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--g4-v4-surface) !important;
  box-shadow: none !important;
}

#g4-v4-shell:has(#LinkAddFirebase) .ui-config-table col.col1 {
  width: 8% !important;
}

#g4-v4-shell:has(#LinkAddFirebase) .ui-config-table col.col2 {
  width: 12% !important;
}

#g4-v4-shell:has(#LinkAddFirebase) .ui-config-table col.col3 {
  width: 32% !important;
}

#g4-v4-shell:has(#LinkAddFirebase) .ui-config-table col.col4 {
  width: 44% !important;
}

#g4-v4-shell:has(#LinkAddFirebase) .ui-config-table col.col5 {
  width: 4% !important;
}

/* The certificate form uses V3's wide composition so its guidance and fields do not reflow. */
body.g4-v4-active #g4-v4-shell
  #write-uiconfig.modal:has(#UiconfigCommonName):has(#UiconfigType) {
  left: 50% !important;
  width: min(1040px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

body.g4-v4-active #g4-v4-shell
  #write-uiconfig.modal:has(#UiconfigCommonName):has(#UiconfigType)
  .modal-footer {
  gap: 15px !important;
  padding: 14px 15px 15px !important;
}

body.g4-v4-active #g4-v4-shell
  #write-uiconfig.modal:has(#UiconfigCommonName):has(#UiconfigType)
  .modal-footer > .btn {
  border: 1px solid var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell
  #write-uiconfig.modal:has(#UiconfigCommonName):has(#UiconfigType)
  label.read-only-any {
  color: var(--g4-v4-text) !important;
  font-weight: 500 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell
  #write-uiconfig.modal:has(#UiconfigCommonName):has(#UiconfigType)
  label.read-only-any {
  color: var(--g4-v4-dark-text) !important;
}

/* Source: src/v4/css/routes/domains.css */

/* Domains keeps its fuzzy-search input standalone; the disabled submit is vendor structure only. */
#g4-v4-shell.g4-v4-route-domains .form-search .input-append > button.btn {
  display: none !important;
}

#g4-v4-shell.g4-v4-route-domains
  .form-search .input-append > #domains:focus-visible {
  border-color: var(--g4-v4-border) !important;
  box-shadow: none !important;
}

#g4-v4-shell.g4-v4-route-domains #domains {
  border-radius: var(--g4-v4-radius) !important;
}

#g4-v4-shell.g4-v4-route-domains .action-container-right {
  display: flex !important;
  align-items: center !important;
  height: var(--g4-v4-control-height) !important;
  gap: var(--g4-v4-control-gap) !important;
}

#g4-v4-shell.g4-v4-route-domains .domains-panel-main .table thead a {
  color: var(--g4-v4-table-text) !important;
  font-weight: 700 !important;
}

#g4-v4-shell.g4-v4-route-domains
  .domains-panel-main table.table thead > tr > th {
  text-align: left !important;
}

#g4-v4-shell.g4-v4-route-domains
  .domains-panel-main table.table thead > tr > th:not(:first-child) {
  padding-left: 5px !important;
}

#g4-v4-shell.g4-v4-route-domains
  .domains-panel-main table.table thead > tr
  > th:nth-child(n + 4):nth-child(-n + 6) {
  padding-right: 5px !important;
  text-align: right !important;
}

/* The portal's active-sort sprite is dark. Replace it with a white CSS caret
   only in dark mode so the direction stays visible against the header. */
#g4-v4-shell.g4-v4-route-domains.theme-dark
  .domains-panel-main table thead a:is(.asc, .desc) {
  display: inline-flex !important;
  align-items: center !important;
  padding-right: 0 !important;
  background-image: none !important;
}

#g4-v4-shell.g4-v4-route-domains.theme-dark
  .domains-panel-main table thead a:is(.asc, .desc)::after {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  content: "" !important;
}

#g4-v4-shell.g4-v4-route-domains.theme-dark
  .domains-panel-main table thead a.asc::after {
  border-bottom: 5px solid #FFF !important;
}

#g4-v4-shell.g4-v4-route-domains.theme-dark
  .domains-panel-main table thead a.desc::after {
  border-top: 5px solid #FFF !important;
}

#g4-v4-shell.g4-v4-route-domains .domains-panel-main .table tbody td {
  border-bottom-width: 0 !important;
}

#g4-v4-shell.g4-v4-route-domains .domains-panel-main .table tbody td:first-child > a {
  color: var(--g4-v4-brand-blue) !important;
}

#g4-v4-shell.g4-v4-route-domains
  .domains-panel-main .table tbody
  tr.g4-v4-manage-active td:first-child > a {
  color: #FFF !important;
}

#g4-v4-shell.g4-v4-route-domains .domains-panel-main .table tbody tr:hover td,
#g4-v4-shell.g4-v4-route-domains .domains-panel-main .table tbody tr:hover td a {
  color: #FFF !important;
}

/* Add/Edit Domain: preserve the compact V3 tabbed-modal geometry. */
body.g4-v4-active.theme-dark #write-domain-form
  label[for="voices"] .icon-info-sign {
  filter: invert(1) brightness(2) !important;
  opacity: 1 !important;
}

body.g4-v4-active #write-domain .modal-header.modal-header-tabs {
  padding-bottom: 0 !important;
}

body.g4-v4-active #write-domain .modal-header h4 {
  padding: 0 !important;
}

body.g4-v4-active #write-domain #domain-modal-tabs {
  padding-bottom: 1px !important;
}

body.g4-v4-active #write-domain #domain-modal-tabs > li > a,
body.g4-v4-active #write-domain #domain-modal-tabs > li > a:hover,
body.g4-v4-active #write-domain #domain-modal-tabs > li > a:focus,
body.g4-v4-active #write-domain #domain-modal-tabs > li.active > a,
body.g4-v4-active #write-domain #domain-modal-tabs > li.active > a:hover,
body.g4-v4-active #write-domain #domain-modal-tabs > li.active > a:focus {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active.theme-dark #write-domain
  #domain-modal-tabs > li:not(.active) > a:hover,
body.g4-v4-active.theme-dark #write-domain
  #domain-modal-tabs > li:not(.active) > a:focus {
  border-color: rgba(210, 223, 238, 0.18) !important;
  background: #282E36 !important;
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active.theme-dark #write-domain
  #domain-modal-tabs > li.active > a,
body.g4-v4-active.theme-dark #write-domain
  #domain-modal-tabs > li.active > a:hover,
body.g4-v4-active.theme-dark #write-domain
  #domain-modal-tabs > li.active > a:focus {
  border-color: rgba(var(--g4-v4-brand-blue-rgb), 0.34) !important;
  border-bottom-color: var(--g4-v4-dark-surface) !important;
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active #write-domain .modal-body {
  box-sizing: content-box !important;
  min-height: 0 !important;
}

body.g4-v4-active #write-domain .modal-body > .tab-content {
  box-sizing: border-box !important;
  margin: -1px 0 0 !important;
  padding: 15px !important;
  border: 1px solid var(--g4-v4-light-border) !important;
  border-radius: 12px !important;
  background: var(--g4-v4-light-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.g4-v4-active.theme-dark #write-domain .modal-body > .tab-content {
  border-color: rgba(210, 223, 238, 0.18) !important;
  background: var(--g4-v4-dark-app-background) !important;
}

body.g4-v4-active #write-domain .modal-tab-pane > p.muted {
  color: #4D5C72 !important;
}

body.g4-v4-active.theme-dark #write-domain .modal-tab-pane > p.muted {
  color: var(--g4-v4-dark-secondary-text) !important;
}

body.g4-v4-active:not(.theme-dark) #write-domain .modal-body
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: #F4F7FA !important;
}

body.g4-v4-active #write-domain #domain-modal-basic #DomainDomain,
body.g4-v4-active #write-domain #domain-modal-basic #DomainDescription,
body.g4-v4-active #write-domain #domain-modal-basic #DomainTerritory,
body.g4-v4-active #write-domain #domain-modal-basic #DomainRecord,
body.g4-v4-active #write-domain #domain-modal-basic .input-append.large {
  width: 290px !important;
  max-width: 290px !important;
}

body.g4-v4-active #write-domain #domain-modal-basic #DomainPolicies,
body.g4-v4-active #write-domain #domain-modal-basic #DomainPoliciesStir,
body.g4-v4-active #write-domain #domain-modal-basic #DomainSso {
  width: 100px !important;
  max-width: 100px !important;
}

body.g4-v4-active #write-domain #domain-modal-defaults input[type="text"],
body.g4-v4-active #write-domain #domain-modal-defaults select {
  width: 220px !important;
  max-width: 220px !important;
}

body.g4-v4-active #write-domain #domain-modal-defaults #DomainAreaCode {
  width: 70px !important;
  max-width: 70px !important;
}

body.g4-v4-active #write-domain #domain-modal-limitations select {
  width: 100px !important;
  max-width: 100px !important;
}

body.g4-v4-active #write-domain #domain-modal-recording input[type="text"] {
  width: 211px !important;
  max-width: 211px !important;
}

body.g4-v4-active #write-domain .modal-footer {
  gap: 15px !important;
  padding-right: 22px !important;
}

/* Source: src/v4/css/routes/sip-trunks.css */

/* The SIP Trunks fuzzy search runs from the input; its disabled submit is inert vendor markup. */
#g4-v4-shell #trunk-choices + button.btn:disabled {
  display: none !important;
}

#g4-v4-shell #trunk-choices {
  border-radius: var(--g4-v4-radius) !important;
}

#g4-v4-shell:has(#trunk-choices)
  .siptrunks-panel-main table.table thead > tr > th {
  text-align: left !important;
}

#g4-v4-shell:has(#trunk-choices)
  .siptrunks-panel-main table.table thead > tr > th:not(:first-child) {
  padding-left: 5px !important;
}

#g4-v4-shell:has(#trunk-choices)
  .siptrunks-panel-main table.table thead > tr
  > th:nth-child(n + 5):nth-child(-n + 7) {
  padding-right: 5px !important;
  text-align: right !important;
}

body.g4-v4-active.theme-light #g4-v4-shell:has(#trunk-choices)
  .siptrunks-panel-main table.table thead > tr > th,
body.g4-v4-active.theme-light #g4-v4-shell:has(#trunk-choices)
  .siptrunks-panel-main table.table thead > tr > th > a {
  color: #000 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell:has(#trunk-choices)
  .siptrunks-panel-main table.table thead > tr > th,
body.g4-v4-active.theme-dark #g4-v4-shell:has(#trunk-choices)
  .siptrunks-panel-main table.table thead > tr > th > a {
  color: #FFF !important;
}

#g4-v4-shell:has(#trunk-choices)
  .siptrunks-panel-main table.table tbody > tr > td:first-child > a {
  color: var(--g4-v4-brand-blue) !important;
}

#g4-v4-shell:has(#trunk-choices)
  .siptrunks-panel-main table.table tbody > tr:hover
  > td:first-child > a {
  color: #FFF !important;
}

/* The read-only trunk name aligns with the 250px Basic-tab form controls. */
body.g4-v4-active #write-siptrunk #siptrunk-edit-basic
  .controls:has(> #SiptrunkAor) > .uneditable-input {
  box-sizing: border-box !important;
  width: 250px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  border-color: var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text-secondary) !important;
}

/* Give all three header rows one explicit compound-control geometry. */
body.g4-v4-active #write-siptrunk #siptrunk-edit-header
  .input-prepend.input-append {
  display: flex !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  width: 362px !important;
  max-width: 100% !important;
}

body.g4-v4-active #write-siptrunk #siptrunk-edit-header .split-input-left {
  box-sizing: border-box !important;
  flex: 0 0 166px !important;
  width: 166px !important;
  min-width: 0 !important;
}

body.g4-v4-active #write-siptrunk #siptrunk-edit-header
  .input-prepend.input-append > .add-on {
  box-sizing: border-box !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  border-radius: 0 !important;
}

body.g4-v4-active #write-siptrunk #siptrunk-edit-header .split-input-right {
  box-sizing: border-box !important;
  flex: 1 1 166px !important;
  width: 166px !important;
  min-width: 0 !important;
}

/* Match the read-only From host to the editable Request/To host appearance. */
body.g4-v4-active #write-siptrunk #siptrunk-edit-header
  .uneditable-input.split-input-right {
  display: flex !important;
  align-items: center !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  border-color: var(--g4-v4-border) !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text-secondary) !important;
}

/* Align the three native Failover conditions without replacing or resizing them. */
body.g4-v4-active #write-siptrunk #siptrunk-edit-itrunk
  table.form-table.checkfield {
  table-layout: fixed !important;
  width: 356px !important;
}

body.g4-v4-active #write-siptrunk #siptrunk-edit-itrunk
  table.form-table.checkfield td:first-child {
  width: 130px !important;
}

body.g4-v4-active #write-siptrunk #siptrunk-edit-itrunk
  table.form-table.checkfield td:last-child {
  width: 226px !important;
}

body.g4-v4-active #write-siptrunk #siptrunk-edit-itrunk label.checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.g4-v4-active #write-siptrunk #siptrunk-edit-itrunk
  label.checkbox > input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

body.g4-v4-active #write-siptrunk #siptrunk-edit-itrunk
  label.checkbox > span {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 15px !important;
  min-height: 15px !important;
  line-height: 15px !important;
  margin: 0 !important;
}

/* Keep the unanswered timeout sentence inline while preserving the full label. */
body.g4-v4-active #write-siptrunk #siptrunk-edit-itrunk
  .ringtime-fna-trunks {
  white-space: nowrap !important;
}

body.g4-v4-active #write-siptrunk #SiptrunkNoAnswerTimeout {
  box-sizing: border-box !important;
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

/* Source: src/v4/css/routes/route-profiles.css */

/* Route Profile headers follow the active theme while editable profile names
   retain the Grid4 link color in both light and dark mode. */
body.g4-v4-active
  #g4-v4-shell:has(#ButtonAddRouteProfileWriteRouteprofile)
  .domains-panel-main table.table thead > tr > th {
  text-align: left !important;
}

body.g4-v4-active
  #g4-v4-shell:has(#ButtonAddRouteProfileWriteRouteprofile)
  .domains-panel-main table.table thead > tr > th:not(:first-child) {
  padding-left: 5px !important;
}

body.g4-v4-active.theme-light
  #g4-v4-shell:has(#ButtonAddRouteProfileWriteRouteprofile)
  .domains-panel-main table.table thead > tr > th,
body.g4-v4-active.theme-light
  #g4-v4-shell:has(#ButtonAddRouteProfileWriteRouteprofile)
  .domains-panel-main table.table thead > tr > th > a {
  color: #000 !important;
}

body.g4-v4-active.theme-dark
  #g4-v4-shell:has(#ButtonAddRouteProfileWriteRouteprofile)
  .domains-panel-main table.table thead > tr > th,
body.g4-v4-active.theme-dark
  #g4-v4-shell:has(#ButtonAddRouteProfileWriteRouteprofile)
  .domains-panel-main table.table thead > tr > th > a {
  color: #FFF !important;
}

body.g4-v4-active
  #g4-v4-shell:has(#ButtonAddRouteProfileWriteRouteprofile)
  .domains-panel-main table.table tbody > tr > td:first-child > a {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active
  #g4-v4-shell:has(#ButtonAddRouteProfileWriteRouteprofile)
  .domains-panel-main table.table tbody > tr:hover
  > td:first-child > a {
  color: #FFF !important;
}

/* Keep the no-trunks note inside the Route Profile options panel. */
body.g4-v4-active #write-routeprofile .route-options
  .accordion-inner > .nonecreated {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  box-sizing: border-box !important;
  width: calc(100% - 1.5rem) !important;
  max-width: none !important;
  margin: 0.75rem auto 0 !important;
  padding: 1rem 1.25rem !important;
}

/* Route Profile uses two icon-sized actions that do not carry the primary class. */
body.g4-v4-active #write-routeprofile .route-options
  :is(#add-trunk-btn, #pct-equal-btn) {
  box-sizing: border-box !important;
  width: var(--g4-v4-control-height) !important;
  min-width: var(--g4-v4-control-height) !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

body.g4-v4-active #write-routeprofile .route-options #pct-equal-btn {
  border-radius: 6px !important;
}

body.g4-v4-active #write-routeprofile .route-options #add-trunk-btn {
  border-radius: 0 6px 6px 0 !important;
}

body.g4-v4-active #write-routeprofile .route-options #add-trunk-btn,
body.g4-v4-active #write-routeprofile .route-options
  #pct-equal-btn:not([style*="display: none"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.g4-v4-active #write-routeprofile .route-options
  #pct-equal-btn[style*="display: none"] {
  display: none !important;
}

body.g4-v4-active #write-routeprofile .route-options
  :is(#add-trunk-btn, #pct-equal-btn):hover {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark #write-routeprofile .route-options
  :is(#add-trunk-btn, #pct-equal-btn):hover {
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active #write-routeprofile .route-options
  :is(#add-trunk-btn, #pct-equal-btn):focus-visible {
  outline: 2px solid rgba(var(--g4-v4-brand-blue-rgb), 0.45) !important;
  outline-offset: 2px !important;
}

/* Source: src/v4/css/routes/inventory.css */

/* Align Inventory headers with the vendor table's compact body-cell inset. */
body.g4-v4-active #g4-v4-shell .inventory-panel-main
  .table thead th:not(.checkboxes) {
  padding-left: 5px !important;
}

/* Remove the inline baseline offset without replacing or resizing checkboxes. */
body.g4-v4-active #g4-v4-shell .inventory-panel-main
  .table input.inventoryChkBox[type="checkbox"] {
  display: block !important;
  margin: 0 !important;
}

/* V3 constrains the leading inventory cell whether it contains a bulk-select
   checkbox or a domain-level phone number. This keeps all later columns from
   shifting when the checkbox column is absent. */
body.page-inventory #g4-v4-shell .inventory-panel-main
  .table tbody td:first-child {
  width: 2.35rem !important;
  min-width: 2.35rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.5rem !important;
  text-align: left !important;
}

body.page-inventory #g4-v4-shell .inventory-panel-main
  .table thead a {
  color: var(--g4-v4-text) !important;
}

/* The native sorted-header sprite stays dark in the dark theme. Replace it
   with a theme-safe caret on the sortable Inventory columns that expose it. */
body.g4-v4-active.page-inventory.theme-dark #g4-v4-shell
  th:is(
    [id="TableHeaderLinkPhone Number"],
    [id="TableHeaderLinkMAC address"],
    [id="TableHeaderLinkModel"],
    [id="TableHeaderLinkDomain"]
  ) > a:is(.asc, .desc) {
  position: relative !important;
  background-image: none !important;
}

body.g4-v4-active.page-inventory.theme-dark #g4-v4-shell
  th:is(
    [id="TableHeaderLinkPhone Number"],
    [id="TableHeaderLinkMAC address"],
    [id="TableHeaderLinkModel"],
    [id="TableHeaderLinkDomain"]
  ) > a:is(.asc, .desc)::after {
  content: "" !important;
  position: absolute !important;
  right: 2px !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  transform: translateY(-50%) !important;
}

body.g4-v4-active.page-inventory.theme-dark #g4-v4-shell
  th:is(
    [id="TableHeaderLinkPhone Number"],
    [id="TableHeaderLinkMAC address"],
    [id="TableHeaderLinkModel"],
    [id="TableHeaderLinkDomain"]
  ) > a.asc::after {
  border-bottom: 5px solid #FFF !important;
}

body.g4-v4-active.page-inventory.theme-dark #g4-v4-shell
  th:is(
    [id="TableHeaderLinkPhone Number"],
    [id="TableHeaderLinkMAC address"],
    [id="TableHeaderLinkModel"],
    [id="TableHeaderLinkDomain"]
  ) > a.desc::after {
  border-top: 5px solid #FFF !important;
}

body.page-inventory #g4-v4-shell .inventory-panel-main
  .table tbody a {
  color: var(--g4-v4-brand-blue) !important;
}

body.page-inventory #g4-v4-shell .inventory-panel-main
  .table-hover tbody tr:hover a {
  color: #FFF !important;
}

/* The domain Phone Numbers view omits the bulk-select column and uses six
   semantic columns. Preserve V3's responsive proportions without affecting
   the manager-level inventory tables or the other domain tabs. */
body.page-inventory #g4-v4-shell .inventory-panel-main
  .table:has(thead th[id="TableHeaderLinkPhone Number"])
  :is(th, td):nth-child(1) {
  width: 8.461% !important;
}

body.page-inventory #g4-v4-shell .inventory-panel-main
  .table:has(thead th[id="TableHeaderLinkPhone Number"])
  :is(th, td):nth-child(2) {
  width: 3.52% !important;
}

body.page-inventory #g4-v4-shell .inventory-panel-main
  .table:has(thead th[id="TableHeaderLinkPhone Number"])
  :is(th, td):nth-child(3) {
  width: 25.985% !important;
}

body.page-inventory #g4-v4-shell .inventory-panel-main
  .table:has(thead th[id="TableHeaderLinkPhone Number"])
  :is(th, td):nth-child(4) {
  width: 43.73% !important;
}

body.page-inventory #g4-v4-shell .inventory-panel-main
  .table:has(thead th[id="TableHeaderLinkPhone Number"])
  :is(th, td):nth-child(5) {
  width: 11.153% !important;
}

body.page-inventory #g4-v4-shell .inventory-panel-main
  .table:has(thead th[id="TableHeaderLinkPhone Number"])
  :is(th, td):nth-child(6) {
  width: 7.151% !important;
}

/* V3 keeps the hardware bulk actions in the toolbar before a row is selected;
   selection determines their operation, not their visual availability. */
body.page-inventory #g4-v4-shell .action-container-right
  > .btn-group > a.btn.bulk-action {
  display: inline-flex !important;
  align-items: center !important;
}

/* Treat each standalone Inventory toolbar action (or joined split-button
   group) as one flex item so every gap is the same across all three tabs. */
body.page-inventory #g4-v4-shell .action-container-right {
  display: flex !important;
  align-items: center !important;
  gap: var(--g4-v4-control-gap) !important;
}

/* Replace the legacy Bootstrap hover gradient on the three standard
   SNAPbuilder actions. The destructive final action keeps its red treatment. */
body.page-inventory #g4-v4-shell #builder-actions-dropdown
  > li:not(#builderBulkDeleteConfigs) > a:hover,
body.page-inventory #g4-v4-shell #builder-actions-dropdown
  > li:not(#builderBulkDeleteConfigs) > a:focus {
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
}

/* The SNAPbuilder template and device-profile libraries ship matching late
   embedded list styles. Keep each filter joined to its list, remove the
   decorative search glyph, and preserve readable Grid4-blue row states. */
body.page-inventory #g4-v4-shell
  :is(#builder-templates, #builder-profiles) .left-panel
  :is(#edit-copy-del-template-form, #edit-device-profile-form) .accordion-group {
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-inventory #g4-v4-shell
  :is(#builder-templates, #builder-profiles) .left-panel .accordion-heading {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  overflow: hidden !important;
  border-radius: var(--g4-v4-radius) var(--g4-v4-radius) 0 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
}

body.page-inventory #g4-v4-shell
  :is(#builder-templates, #builder-profiles) .left-panel
  input.compound-select-filter {
  box-sizing: border-box !important;
  display: block !important;
  top: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  border: 0 !important;
  border-radius: var(--g4-v4-radius) var(--g4-v4-radius) 0 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  -webkit-text-fill-color: var(--g4-v4-table-text) !important;
}

body.page-inventory #g4-v4-shell
  :is(#builder-templates, #builder-profiles) .left-panel .search-icon {
  display: none !important;
}

body.page-inventory #g4-v4-shell :is(#builder-templates, #builder-profiles)
  .compound-select-option:is(:hover, .selected, .active, [aria-selected="true"]) {
  background: var(--g4-v4-brand-blue) !important;
  background-color: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  opacity: 1 !important;
}

body.page-inventory #g4-v4-shell :is(#builder-templates, #builder-profiles)
  .compound-select-option:is(:hover, .selected, .active, [aria-selected="true"]) * {
  color: #FFF !important;
  -webkit-text-fill-color: #FFF !important;
}

/* Center the Device Profiles creation controls within the right pane. The
   matching width gives the divider and modal edge equal visual breathing room. */
body.page-inventory #g4-v4-shell #builder-profiles
  .phone-model-add-container,
body.page-inventory #g4-v4-shell #builder-profiles #phone-model-select,
body.page-inventory #g4-v4-shell #builder-profiles #add-profile {
  width: 226px !important;
  min-width: 226px !important;
  max-width: 226px !important;
}

body.page-inventory #g4-v4-shell #builder-profiles #add-profile {
  right: 35px !important;
}

/* Give both SNAPbuilder Launcher columns the same vertical structure. The
   right-side selector aligns with Domain while both Start actions share one
   baseline at the bottom of their columns. */
body.page-inventory #g4-v4-shell #builder-launcher
  :is(.left-panel, .right-panel) > form.panel-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 290px !important;
}

body.page-inventory #g4-v4-shell #builder-launcher
  form.panel-content > input.btn-long {
  margin-top: auto !important;
}

body.page-inventory #g4-v4-shell #builder-launcher
  .right-panel .builder-column > .control-group {
  box-sizing: content-box !important;
  margin-top: 0 !important;
  padding-top: 18px !important;
}

body.page-inventory #g4-v4-shell #builder-launcher
  :is(
    #filter-domain-choices,
    #device,
    #select-profile,
    #edit-config,
    #edit-profile
  ) {
  box-sizing: border-box !important;
  width: 226px !important;
  min-width: 226px !important;
  max-width: 226px !important;
}

/* The bulk SNAPbuilder selector uses accordion headings as table headers.
   Preserve V3's complete joined geometry rather than allowing the shared input
   and button rules to resize its header or split Apply control. The decorative,
   non-interactive search glyph remains omitted; typing still filters the list. */
body.page-inventory #g4-v4-shell #bulkedit-templates
  :is(#template-maclist-div, #editaction-div > .accordion-group) {
  box-sizing: border-box !important;
  height: 252px !important;
  border-radius: var(--g4-v4-radius) !important;
  overflow: hidden !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  #editaction-div > .accordion-group {
  margin-bottom: 0 !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  :is(#template-maclist-div, #editaction-div) .accordion-heading {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-color: var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) var(--g4-v4-radius) 0 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
  background-color: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  #template-maclist-div .accordion-toggle {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  height: 30px !important;
  padding: 0 12px !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  #template-maclist-div .accordion-body,
body.page-inventory #g4-v4-shell #bulkedit-templates
  #editaction-div .compound-select-container {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 221px !important;
  min-height: 221px !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  input.compound-select-filter {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  border-color: var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) var(--g4-v4-radius) 0 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
  background-color: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  -webkit-text-fill-color: var(--g4-v4-table-text) !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates .search-icon {
  display: none !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  #template-compound-select {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 221px !important;
  border: 0 !important;
  border-radius: 0 0 var(--g4-v4-radius) var(--g4-v4-radius) !important;
}

/* The template options are followed by modal-embedded vendor styles. Double
   the modal ID so every interactive row state retains the Grid4 selection
   treatment in both themes. */
body.page-inventory #g4-v4-shell
  #bulkedit-templates#bulkedit-templates
  .compound-select-option:is(:hover, .selected, .active, [aria-selected="true"]) {
  background: var(--g4-v4-brand-blue) !important;
  background-color: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  opacity: 1 !important;
}

body.page-inventory #g4-v4-shell
  #bulkedit-templates#bulkedit-templates
  .compound-select-option:is(:hover, .selected, .active, [aria-selected="true"]) * {
  color: #FFF !important;
  -webkit-text-fill-color: #FFF !important;
}

/* Apply is a 78px + 30px joined drop-up control. Explicit flex centering keeps
   the Bootstrap caret centered while the darker divider identifies the split. */
body.page-inventory #g4-v4-shell #bulkedit-templates
  .modal-footer > .btn-group {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  margin: 0 !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  .modal-footer .btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  line-height: 20px !important;
  transform: none !important;
  box-shadow: none !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  .modal-footer .btn-group.dropup {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  height: 30px !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  #bulkEditTemplatesFormSubmit,
body.page-inventory #g4-v4-shell #bulkedit-templates
  #bulkEditTemplatesFormSubmitCombo {
  box-sizing: border-box !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  background: var(--g4-v4-brand-blue) !important;
  border: 1px solid #339ee5 !important;
  color: #FFF !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  #bulkEditTemplatesFormSubmit {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  #bulkEditTemplatesFormSubmitCombo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  border-left-color: #339ee5 !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
  font-size: 0 !important;
}

body.page-inventory #g4-v4-shell #bulkedit-templates
  #bulkEditTemplatesFormSubmitCombo > .caret {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  border-top-color: #FFF !important;
  border-bottom-color: #FFF !important;
  opacity: 1 !important;
  transform: none !important;
}

/* The Edit Phone Number time-frame table is not wrapped by the portal's
   standard table container. Give it the same V3 table treatment directly and
   keep its controls within the modal's available width. */
body.page-inventory #g4-v4-shell
  #edit-number:has(#SmsnumberApplication) .modal-body {
  min-height: 200px !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules thead th {
  padding: 5px !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  vertical-align: middle !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules thead th:first-child,
body.page-inventory #g4-v4-shell #edit-number #sort-rules tbody td:first-child {
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules thead th:last-child,
body.page-inventory #g4-v4-shell #edit-number #sort-rules tbody td:last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules col.col1 {
  width: 30px !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules col.col2 {
  width: 85px !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules col.col3 {
  width: 165px !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules col.col4 {
  width: auto !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules col.col5 {
  width: 30px !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules tbody td:nth-child(3)
  > .treatment-select,
body.page-inventory #g4-v4-shell #edit-number #sort-rules tbody td:nth-child(4)
  > :is(input:not([type="hidden"]), select) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.page-inventory #g4-v4-shell #edit-number #sort-rules
  tbody > tr:hover > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

/* Bulk Edit date rows pair one native checkbox with one 250px date control. */
body.g4-v4-active #bulkedit-phonenumbers
  .bulk-edit-property:has(.date-field) {
  display: grid !important;
  grid-template-columns: 18px 250px !important;
  align-items: start !important;
  column-gap: 10px !important;
}

body.g4-v4-active #bulkedit-phonenumbers
  .bulk-edit-property:has(.date-field) > .bulk-edit-checkbox-container {
  box-sizing: border-box !important;
  display: flex !important;
  align-self: end !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  top: 0 !important;
  width: 18px !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 0 10px !important;
  vertical-align: top !important;
  transform: none !important;
}

body.g4-v4-active #bulkedit-phonenumbers
  .bulk-edit-property:has(.date-field)
  > .bulk-edit-checkbox-container > input.bulk-edit-checkbox {
  margin: 0 !important;
}

body.g4-v4-active #bulkedit-phonenumbers
  .bulk-edit-property:has(.date-field) > .bulk-edit-input-container {
  box-sizing: border-box !important;
  display: block !important;
  width: 250px !important;
  min-width: 250px !important;
  vertical-align: top !important;
}

/* V3 fits the hardware bulk editor inside its 700px modal by keeping the
   selected-device list and editable controls narrower than their vendor
   defaults. This removes the modal body's unnecessary horizontal scrollbar. */
body.page-inventory #g4-v4-shell #bulkedit-phones #maclist-div {
  box-sizing: border-box !important;
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
}

body.page-inventory #g4-v4-shell #bulkedit-phones
  :is(#PhoneServer, #PhoneTransport, #PhoneDirInc) {
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
}

body.page-inventory #g4-v4-shell #bulkedit-phones textarea#notes {
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  min-height: 78.75px !important;
  max-height: 180px !important;
  resize: vertical !important;
}

/* The Add Phone Number Notes field exposes the browser's native resize grip.
   Keep it inside the modal while allowing the inline dimensions produced by
   pointer dragging to control the rendered box. */
body.page-inventory #g4-v4-shell #add-phonenumber textarea#notes {
  min-width: 250px !important;
  max-width: 400px !important;
  min-height: 78.75px !important;
  max-height: 180px !important;
  resize: both !important;
}

/* The Add and Edit Phone textareas use native resize behavior. Leave their
   inline drag dimensions in control and bound the fields to each modal. */
body.page-inventory #g4-v4-shell :is(#add-phone, #edit-phone)
  textarea:is(#PhoneNotes, #PhoneOverrides) {
  min-width: 250px !important;
  max-width: 400px !important;
  min-height: 78.75px !important;
  max-height: 180px !important;
  resize: both !important;
}

/* Keep the tall Edit MAC workflow inside the viewport. The header and footer
   remain fixed while the form body becomes the only vertical scroll region. */
body.page-inventory #g4-v4-shell
  #edit-phone.g4-v4-modal-viewport-fit.in {
  display: flex !important;
  flex-direction: column !important;
}

body.page-inventory #g4-v4-shell
  #edit-phone.g4-v4-modal-viewport-fit.in > .modal-header {
  flex: 0 0 auto !important;
}

body.page-inventory #g4-v4-shell
  #edit-phone.g4-v4-modal-viewport-fit.in > form {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

body.page-inventory #g4-v4-shell
  #edit-phone.g4-v4-modal-viewport-fit.in > form > .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

body.page-inventory #g4-v4-shell
  #edit-phone.g4-v4-modal-viewport-fit.in > form > .modal-footer {
  flex: 0 0 auto !important;
}

/* Inventory Save split buttons use an ID-specific vendor rule, so preserve
   V3's darker internal divider and support both down- and up-pointing carets. */
body.page-inventory #g4-v4-shell #bulkedit-phones .modal-footer
  #bulkEditPhonesFormSubmitCombo,
body.page-inventory #g4-v4-shell #edit-phone .modal-footer
  #editPhonesFormSubmitCombo {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  border-left-color: #339ee5 !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body.page-inventory #g4-v4-shell #bulkedit-phones .modal-footer
  #bulkEditPhonesFormSubmitCombo > .caret,
body.page-inventory #g4-v4-shell #edit-phone .modal-footer
  #editPhonesFormSubmitCombo > .caret {
  position: static !important;
  inset: auto !important;
  display: block !important;
  margin: 0 !important;
  border-top-color: #FFF !important;
  border-bottom-color: #FFF !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Source: src/v4/css/routes/builder.css */

/* SNAPbuilder's fixed save bar carries vendor offsets that leave a strip of
   page background below it. Keep the action surface flush with the viewport
   while preserving the native fixed/affixed positioning behavior. */
body.page-builder #g4-v4-shell #builder-module
  #config-save-bar#config-save-bar.form-actions.affix-form-actions {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 940px !important;
  height: 61px !important;
  min-height: 61px !important;
  padding: 15px 20px !important;
  margin: 0 !important;
  transition: none !important;
}

body.page-builder.theme-dark #g4-v4-shell #builder-module
  #config-save-bar#config-save-bar.form-actions.affix-form-actions {
  background: #181D24 !important;
  background-color: #181D24 !important;
  border-color: #3A4149 !important;
  color: #F4F4F4 !important;
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.34) !important;
}

/* The configured key is a selection, not a hover state. Use the standard
   Grid4 blue and prevent legacy transitions from tinting its action icons. */
body.page-builder #g4-v4-shell #builder-module
  #config-right-panel#config-right-panel ul.button-list
  > li.btn-config.selected {
  background: var(--g4-v4-brand-blue) !important;
  background-color: var(--g4-v4-brand-blue) !important;
  border-color: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  transition: none !important;
}

body.page-builder #g4-v4-shell #builder-module
  #config-right-panel#config-right-panel ul.button-list > li.btn-config
  :is(.feature-actions > i, .config-kabob > .kabob) {
  color: #BDBDBD !important;
  -webkit-text-fill-color: #BDBDBD !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Save is a joined split control. Remove Bootstrap's gradient, retain the
   darker internal divider, and keep the native drop-up behavior. */
body.page-builder #g4-v4-shell #builder-module
  #config-save-bar#config-save-bar .btn-group.dropup > .btn {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-color: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  text-shadow: none !important;
}

body.page-builder #g4-v4-shell #builder-module
  #config-save-bar#config-save-bar .btn-group.dropup > .btn:is(:hover, :focus, :active) {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-color: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  transform: none !important;
}

body.page-builder #g4-v4-shell #builder-module
  #config-save-bar#config-save-bar .btn-group.dropup > .btn-save {
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.page-builder #g4-v4-shell #builder-module
  #config-save-bar#config-save-bar .btn-group.dropup > .dropdown-toggle {
  border-left-color: #339EE5 !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.page-builder #g4-v4-shell #builder-module
  #config-right-panel#config-right-panel #config-dropdown {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.page-builder #g4-v4-shell #builder-module
  #config-right-panel#config-right-panel #config-dropdown > .kabob {
  margin: 0 !important;
}

/* The legacy preview border is nearly white, so it disappears on the V4
   light surface. Dark mode already has the intended high-contrast outline. */
body.page-builder.theme-light #g4-v4-shell #builder-module
  #image-wrapper#image-wrapper {
  border-color: var(--g4-v4-border) !important;
}

body.page-builder.theme-light #g4-v4-shell #builder-module
  #image-wrapper#image-wrapper > hr {
  border-top-color: var(--g4-v4-border) !important;
  border-bottom-color: var(--g4-v4-border) !important;
}

/* Phone-key labels use a very high vendor z-index. Establish a local stacking
   context so they cannot paint above SNAPbuilder modals. */
body.page-builder #g4-v4-shell #builder-module
  #image-wrapper#image-wrapper .device-image-container {
  isolation: isolate !important;
  z-index: 0 !important;
}

/* Advanced Phone Settings still ships a Bootstrap 2 primary gradient. Match
   the solid Grid4 primary action in both themes and all interaction states. */
body.page-builder #g4-v4-shell
  #advanced-settings-modal#advanced-settings-modal input.btn.btn-primary {
  background: var(--g4-v4-brand-blue) !important;
  background-color: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  text-shadow: none !important;
}

body.page-builder #g4-v4-shell
  #advanced-settings-modal#advanced-settings-modal
  input.btn.btn-primary:is(:hover, :focus, :active) {
  background: var(--g4-v4-brand-blue) !important;
  background-color: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  transform: none !important;
}

/* Source: src/v4/css/routes/users.css */

/* Users filters as text is entered; the disabled vendor submit is inert. */
body.g4-v4-active #g4-v4-shell:has(#user-table-main)
  #form-user-search,
body.g4-v4-active #g4-v4-shell:has(#user-table-main)
  #form-user-search > .input-append {
  box-sizing: border-box !important;
  width: 540px !important;
  max-width: 100% !important;
}

body.g4-v4-active #g4-v4-shell:has(#user-table-main)
  #form-user-search > .input-append > #choices {
  box-sizing: border-box !important;
  width: 100% !important;
  border-radius: var(--g4-v4-radius) !important;
}

body.g4-v4-active #g4-v4-shell:has(#user-table-main)
  #form-user-search > .input-append > button.btn:disabled {
  display: none !important;
}

/* Keep every Users table heading on the Grid4 blue token, including the
   non-sortable Email heading. Replace the vendor's fixed gray sort sprite
   without changing its original 15px footprint or inline position. */
body.g4-v4-active #g4-v4-shell #user-table-main
  > .table-container > table.table > thead > tr > th:not(.checkboxes),
body.g4-v4-active #g4-v4-shell #user-table-main
  > .table-container > table.table > thead > tr > th > a {
  color: var(--g4-v4-brand-blue) !important;
}

/* Match every heading's content edge to the corresponding row content and
   keep the native compact checkboxes centered in variable-height rows. */
body.g4-v4-active #g4-v4-shell #user-table-main
  > .table-container > table.table > thead > tr > th {
  text-align: left !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  > .table-container > table.table > thead > tr > th:not(.checkboxes) {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  > .table-container > table.table > thead > tr > th > a {
  text-align: left !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  > .table-container > table.table > thead > tr > th.checkboxes,
body.g4-v4-active #g4-v4-shell #user-table-main
  > .table-container > table.table > tbody > tr > td:first-child {
  position: relative !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  > .table-container > table.table > thead > tr > th.checkboxes
  > input.userChkBox,
body.g4-v4-active #g4-v4-shell #user-table-main
  > .table-container > table.table > tbody > tr > td:first-child
  > input.userChkBox {
  position: absolute !important;
  top: 50% !important;
  left: 11.25px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  #TableHeaderLinkExtension > a:is(.asc, .desc) {
  position: relative !important;
  padding-right: 15px !important;
  background-image: none !important;
  white-space: nowrap !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  #TableHeaderLinkExtension > a:is(.asc, .desc)::after {
  position: absolute !important;
  top: 4px !important;
  right: 0 !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  content: "" !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  #TableHeaderLinkExtension > a.asc::after {
  border-bottom: 5px solid var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  #TableHeaderLinkExtension > a.desc::after {
  border-top: 5px solid var(--g4-v4-brand-blue) !important;
}

/* The production Users list can render outside #g4-v4-shell while the V4
   theme is active. Anchor these list-only colors to its unique panel so the
   Name links and every sortable heading remain consistent in both layouts. */
body.g4-v4-active #user-table-main#user-table-main
  > .table-container > table.table > tbody > tr:not(:hover):not(.dropdown-active)
  > td:nth-child(2) a[id^="NameLinkEditProfile"] {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active.theme-dark #user-table-main#user-table-main
  > .table-container > table.table > thead > tr > th:not(.checkboxes),
body.g4-v4-active.theme-dark #user-table-main#user-table-main
  > .table-container > table.table > thead > tr > th > a {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active:not(.theme-dark) #user-table-main#user-table-main
  > .table-container > table.table > thead > tr > th:not(.checkboxes),
body.g4-v4-active:not(.theme-dark) #user-table-main#user-table-main
  > .table-container > table.table > thead > tr > th > a {
  color: #000 !important;
}

body.g4-v4-active #user-table-main#user-table-main
  > .table-container > table.table > thead a:is(.asc, .desc) {
  position: relative !important;
  padding-right: 14px !important;
  background-image: none !important;
  white-space: nowrap !important;
}

body.g4-v4-active #user-table-main#user-table-main
  > .table-container > table.table > thead a:is(.asc, .desc)::after {
  position: absolute !important;
  top: 50% !important;
  right: 1px !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  content: "" !important;
  transform: translateY(-50%) !important;
}

body.g4-v4-active.theme-dark #user-table-main#user-table-main
  > .table-container > table.table > thead a.asc::after {
  border-top: 0 !important;
  border-bottom: 6px solid var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active.theme-dark #user-table-main#user-table-main
  > .table-container > table.table > thead a.desc::after {
  border-top: 6px solid var(--g4-v4-brand-blue) !important;
  border-bottom: 0 !important;
}

body.g4-v4-active:not(.theme-dark) #user-table-main#user-table-main
  > .table-container > table.table > thead a.asc::after {
  border-top: 0 !important;
  border-bottom: 6px solid #000 !important;
}

body.g4-v4-active:not(.theme-dark) #user-table-main#user-table-main
  > .table-container > table.table > thead a.desc::after {
  border-top: 6px solid #000 !important;
  border-bottom: 0 !important;
}

/* Sites has one sortable Name heading. Match its text and replacement caret
   to the active theme while keeping the two row actions on Grid4 blue. */
body.g4-v4-active.theme-light #g4-v4-shell .users-panel-main
  > .table-container > table.table > thead #TableHeaderLinkName > a {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell .users-panel-main
  > .table-container > table.table > thead #TableHeaderLinkName > a {
  color: #FFF !important;
  -webkit-text-fill-color: #FFF !important;
}

body.g4-v4-active #g4-v4-shell .users-panel-main
  > .table-container > table.table > thead #TableHeaderLinkName
  > a:is(.asc, .desc) {
  position: relative !important;
  padding-right: 14px !important;
  background-image: none !important;
  white-space: nowrap !important;
}

body.g4-v4-active #g4-v4-shell .users-panel-main
  > .table-container > table.table > thead #TableHeaderLinkName
  > a:is(.asc, .desc)::after {
  position: absolute !important;
  top: 50% !important;
  right: 1px !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  content: "" !important;
  transform: translateY(-50%) !important;
}

body.g4-v4-active #g4-v4-shell .users-panel-main
  > .table-container > table.table > thead #TableHeaderLinkName > a.asc::after {
  border-top: 0 !important;
  border-bottom: 6px solid currentColor !important;
}

body.g4-v4-active #g4-v4-shell .users-panel-main
  > .table-container > table.table > thead #TableHeaderLinkName > a.desc::after {
  border-top: 6px solid currentColor !important;
  border-bottom: 0 !important;
}

body.g4-v4-active #g4-v4-shell .users-panel-main
  > .table-container > table.table > tbody > tr:not(:hover):not(.dropdown-active)
  > td:first-child a[id^="NameLinkEditSite"],
body.g4-v4-active #g4-v4-shell .users-panel-main
  > .table-container > table.table > tbody > tr:not(:hover):not(.dropdown-active)
  > td:nth-child(4) a[id^="LinkUsersIndexFilter"] {
  color: var(--g4-v4-brand-blue) !important;
  -webkit-text-fill-color: var(--g4-v4-brand-blue) !important;
}

/* Keep the Users footer inside the table perimeter and let its text controls
   use their content width instead of the shared 30px page-button width. */
body.g4-v4-active #g4-v4-shell #user-table-main > .pagination-container {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-right: 11px !important;
  padding-left: 11px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--g4-v4-radius) var(--g4-v4-radius) !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  > .pagination-container > .pagination.pull-right {
  gap: 4px !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  > .pagination-container > .pagination.pull-right > ul {
  flex: 0 0 auto !important;
  width: auto !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  > .pagination-container > .pagination.pull-right
  li.disabled > a:has(#hideSystemUsers) {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--g4-v4-text) !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  > .pagination-container #hideSystemUsers + span,
body.g4-v4-active #g4-v4-shell #user-table-main
  > .pagination-container label.checkbox:has(#hideSystemUsers) {
  white-space: nowrap !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  > .pagination-container label.checkbox:has(#hideSystemUsers) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  margin: 0 !important;
}

body.g4-v4-active #g4-v4-shell #user-table-main
  > .pagination-container #hideSystemUsers {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* The vendor renders the user total as a disabled pagination item, which
   otherwise inherits Bootstrap's muted gray instead of the footer text. */
body.g4-v4-active #g4-v4-shell #user-table-main
  > .pagination-container li.disabled > span:has(#users_count) {
  color: var(--g4-v4-text) !important;
}

/* Shared Contacts ships a six-column colgroup for a four-cell table. Collapse
   only the orphan columns so the header and rows reach the table's right edge. */
body.g4-v4-active #g4-v4-shell .contacts-panel-main
  #contacts-table:has(> thead > tr > th:nth-child(4):last-child)
  > colgroup > col:nth-child(n + 5) {
  display: none !important;
}

/* Keep the Add Shared Contact command and caret as one 30px split control. */
body.g4-v4-active #g4-v4-shell #write-contact
  #submitGroup > .dropdown-toggle {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  margin-left: -1px !important;
  border-left-color: #339ee5 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body.g4-v4-active #g4-v4-shell #write-contact
  #submitGroup > .dropdown-toggle > .caret {
  position: static !important;
  inset: auto !important;
  display: block !important;
  margin: 0 !important;
  border-top-color: #FFF !important;
  border-bottom-color: #FFF !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Bulk User Edit is the native span5 + span3 two-column modal. The shared
   600px width makes those columns wrap; 780px is the accepted V3 geometry. */
body.g4-v4-active #g4-v4-shell #bulkedit-users {
  width: min(780px, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
}

body.g4-v4-active #g4-v4-shell #bulkedit-users .modal-body {
  height: 630px !important;
  min-height: 0 !important;
  max-height: calc(100vh - 10.5rem) !important;
}

body.g4-v4-active #g4-v4-shell
  #bulkedit-users #editaction-div > fieldset {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* This vendor footer carries a 30px height intended for content-box sizing.
   Preserve the shared border-box model while restoring V3's 60px footprint. */
body.g4-v4-active #g4-v4-shell #bulkaction-users .modal-footer {
  height: 60px !important;
  min-height: 60px !important;
}

/* Ring Group delay controls carry both a clock and a numeric value. Keep the
   compound field on the same 250px right edge as the adjacent form controls. */
body.g4-v4-active #g4-v4-shell #ringgroup-users .sim-delay {
  width: 250px !important;
}

body.g4-v4-active #g4-v4-shell #ringgroup-users .sim-delay > input {
  flex: 0 0 189px !important;
  width: 189px !important;
  min-width: 189px !important;
  max-width: 189px !important;
}

body.g4-v4-active #g4-v4-shell #ringgroup-users .sim-delay > .sim-delay-btn {
  display: inline-flex !important;
  flex: 0 0 62px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  padding: 4px 6px !important;
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #ringgroup-users
  .sim-delay > .sim-delay-btn:hover,
body.g4-v4-active #g4-v4-shell #ringgroup-users
  .sim-delay > .sim-delay-btn.active {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #ringgroup-users
  .sim-delay > .sim-delay-btn:hover,
body.g4-v4-active.theme-dark #g4-v4-shell #ringgroup-users
  .sim-delay > .sim-delay-btn.active {
  background: var(--g4-v4-dark-surface) !important;
}

/* Vendor add/delete controls are 20px icons alongside a 30px compound
   field. Their baseline alignment sits four pixels high, so offset only
   these Ring Group row actions to align their visual centers. */
body.g4-v4-active #g4-v4-shell #ringgroup-users #simring-list > li
  > .add,
body.g4-v4-active #g4-v4-shell #ringgroup-users #simring-list > li
  > .del {
  position: relative !important;
  top: 4px !important;
}

/* The native first email row includes inter-element whitespace; generated
   rows do not. Give their delete action the same six-pixel visual gap. */
body.g4-v4-active #g4-v4-shell #add-user #email-list > li > .rem-email {
  margin-left: 6px !important;
}

/* The first profile email input carries the vendor's wider `large` class.
   Match its rendered geometry to every dynamically added email row. */
body.g4-v4-active #g4-v4-shell #UserEmailAddress0 {
  box-sizing: content-box !important;
  width: 206px !important;
  min-width: 206px !important;
  max-width: 206px !important;
}

/* Add User uses different padding from the full-page Profile form. Normalize
   only its first email field to the 250x30 geometry used by generated rows. */
body.g4-v4-active #g4-v4-shell #add-user #UserEmailAddress0 {
  box-sizing: border-box !important;
  width: 250px !important;
  min-width: 0 !important;
  max-width: 250px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
}

/* Sites renders both Caller ID values as read-only spans instead of native
   inputs. Align their outer widths with the adjacent 250px form controls. */
body.g4-v4-active #g4-v4-shell .modal:has(#UserSiteDefaults)
  :is(#UserCallidNmbr, #UserCallidEmgr) + .uneditable-input {
  box-sizing: border-box !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
}

/* Office Manager Profile and Advanced tabs are full-page legacy forms, so
   modal control theming does not reach their fields or sticky action bars. */
body.g4-v4-active.theme-dark #g4-v4-shell #content
  :is(.profile-panel-main, .admin-panel-main)
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
    select,
    textarea,
    .uneditable-input
  ) {
  border-color: var(--g4-v4-dark-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #content
  :is(.profile-panel-main, .admin-panel-main) legend {
  color: #FFF !important;
  border-bottom-color: var(--g4-v4-dark-border) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #content
  :is(.profile-panel-main, .admin-panel-main)
  .form-actions.affix-form-actions {
  border-color: var(--g4-v4-dark-border) !important;
  background: rgba(24, 29, 36, 0.8) !important;
  color: var(--g4-v4-dark-text) !important;
}

/* User Settings > Call Center renders its queue and department tables without
   the shared .table-container wrapper, so the vendor's white header cells and
   dividers win in both themes. Apply the standard V4 table palette to these
   two stable tables and theme the sibling sticky action bar with the matching
   surface. */
body.g4-v4-active #g4-v4-shell .users-call-center-row
  :is(#cc-super-settings-queues, #cc-super-settings-departments),
body.g4-v4-active #g4-v4-shell .users-call-center-row
  :is(#cc-super-settings-queues, #cc-super-settings-departments)
  > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border-color: var(--g4-v4-border) !important;
}

body.g4-v4-active #g4-v4-shell .users-call-center-row .span6 > hr {
  height: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--g4-v4-border) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell .users-call-center-row
  :is(#cc-super-settings-queues, #cc-super-settings-departments),
body.g4-v4-active.theme-dark #g4-v4-shell .users-call-center-row
  :is(#cc-super-settings-queues, #cc-super-settings-departments)
  > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border-color: #FFF !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell
  .users-call-center-row .span6 > hr {
  border-top-color: #FFF !important;
}

body.g4-v4-active #g4-v4-shell .users-call-center-row
  :is(#cc-super-settings-queues, #cc-super-settings-departments).table-hover
  > tbody > tr:hover > :is(th, td) {
  background: transparent !important;
}

body.g4-v4-active #g4-v4-shell .users-call-center-row
  :is(#cc-super-settings-queues, #cc-super-settings-departments)
  > thead > tr > th {
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  text-shadow: none !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell .users-call-center-row
  :is(#cc-super-settings-queues, #cc-super-settings-departments)
  > thead > tr > th {
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-table-text) !important;
}

body.g4-v4-active #g4-v4-shell .users-call-center-row
  ~ .form-actions.affix-form-actions {
  border-top-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

/* Source: src/v4/css/routes/conferences.css */

/* Conference direct phone numbers are rendered as read-only spans inside a
   30px placeholder. Restore the control line height so the value is centered. */
body.g4-v4-active #g4-v4-shell #write-conference
  #phonenumbers-div .input-placeholder > .uneditable-input {
  line-height: 20px !important;
}

/* Conference list links use the Grid4 action color, while heading labels and
   sort indicators follow the active theme. Keep row-hover text unchanged. */
body.g4-v4-active .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > tbody > tr:not(:hover):not(.dropdown-active)
  > td:is(:nth-child(1), :nth-child(3)) a {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active.theme-dark .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > thead > tr > th,
body.g4-v4-active.theme-dark .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > thead > tr > th > a {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active:not(.theme-dark) .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > thead > tr > th,
body.g4-v4-active:not(.theme-dark) .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > thead > tr > th > a {
  color: #000 !important;
}

body.g4-v4-active .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > thead a:is(.asc, .desc) {
  position: relative !important;
  padding-right: 14px !important;
  background-image: none !important;
  white-space: nowrap !important;
}

body.g4-v4-active .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > thead a:is(.asc, .desc)::after {
  position: absolute !important;
  top: 50% !important;
  right: 1px !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  content: "" !important;
  transform: translateY(-50%) !important;
}

body.g4-v4-active.theme-dark .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > thead a.asc::after {
  border-top: 0 !important;
  border-bottom: 6px solid var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active.theme-dark .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > thead a.desc::after {
  border-top: 6px solid var(--g4-v4-brand-blue) !important;
  border-bottom: 0 !important;
}

body.g4-v4-active:not(.theme-dark) .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > thead a.asc::after {
  border-top: 0 !important;
  border-bottom: 6px solid #000 !important;
}

body.g4-v4-active:not(.theme-dark) .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > thead a.desc::after {
  border-top: 6px solid #000 !important;
  border-bottom: 0 !important;
}

/* The vendor body cells use 5px while the headings use 11.25px. Matching
   those in the data columns keeps every heading directly over its values. */
body.g4-v4-active .conferences-panel-main.conferences-panel-main
  > .table-container > table.table > tbody > tr > td:nth-child(-n + 6) {
  padding-right: 11.25px !important;
  padding-left: 11.25px !important;
}

/* Source: src/v4/css/routes/attendants.css */

/* Auto Attendant list links use the Grid4 action color. Its heading labels
   follow the active theme, and the data cells share the header inset. */
body.g4-v4-active .attendants-panel-main.attendants-panel-main
  > .table-container > table.table > tbody > tr:not(:hover):not(.dropdown-active)
  > td:nth-child(2) a {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active.theme-dark .attendants-panel-main.attendants-panel-main
  > .table-container > table.table > thead > tr > th,
body.g4-v4-active.theme-dark .attendants-panel-main.attendants-panel-main
  > .table-container > table.table > thead > tr > th > a {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active:not(.theme-dark) .attendants-panel-main.attendants-panel-main
  > .table-container > table.table > thead > tr > th,
body.g4-v4-active:not(.theme-dark) .attendants-panel-main.attendants-panel-main
  > .table-container > table.table > thead > tr > th > a {
  color: #000 !important;
}

body.g4-v4-active .attendants-panel-main.attendants-panel-main
  > .table-container > table.table > tbody > tr
  > td:is(:nth-child(2), :nth-child(3), :nth-child(4)) {
  padding-right: 11.25px !important;
  padding-left: 11.25px !important;
}

/* Auto Attendant edit is the portal's tiered prompt-and-dial-pad editor. */
body.g4-v4-active #g4-v4-shell:has(#attendant_form) #content {
  padding-top: 0.92rem !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  :is(input[type="text"], input[type="number"], input[type="tel"], select, textarea) {
  border: 1px solid var(--g4-v4-border) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active:not(.theme-dark) #g4-v4-shell #attendant_form
  :is(input[type="text"], input[type="number"], input[type="tel"], select, textarea) {
  background: #F4F7FA !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  :is(.uneditable-input, .input-prepend > .add-on) {
  border-color: var(--g4-v4-border) !important;
  background: #F4F7FA !important;
  color: var(--g4-v4-text-secondary) !important;
  box-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .input-prepend > .add-on {
  color: var(--g4-v4-text) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  :is(.uneditable-input, .input-prepend > .add-on) {
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-basics .uneditable-input,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .input-prepend > :is(.uneditable-input, .add-on) {
  border: 1px solid var(--g4-v4-border) !important;
}

/* The intro row's native label is content-width in V3; retaining the generic
   160px label box adds four unnecessary pixels before the tier header. */
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-basics .control-group:last-child > .control-label {
  width: auto !important;
  margin-bottom: 0.1rem !important;
}

/* The vendor reuses .form-actions for this label row. Restore the accepted
   transparent two-column heading instead of a generic action-bar surface. */
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .attendant-header.form-actions {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 4px 0 0.5rem !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Submenu headers are delivered inside a persistently .hide-marked tier data
   container. Honor the portal's inline visibility state so a submenu header
   appears only while that submenu is active. */
body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="aatierdata"]:not([style*="display: block"]):not([style*="display:block"])
  .attendant-header.hide,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .attendant-header.form-actions[style*="display: none"],
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .attendant-header.form-actions[style*="display:none"] {
  display: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="aatierdata"][style*="display: block"] .attendant-header:not([style*="display: none"]),
body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="aatierdata"][style*="display:block"] .attendant-header:not([style*="display:none"]) {
  display: flex !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .attendant-header.form-actions > .pull-left,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .attendant-header.form-actions > .pull-right {
  float: none !important;
  padding-bottom: 0.5rem !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .attendant-header.form-actions > .pull-left {
  transform: translateX(-42px) !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .attendant-header.form-actions > .pull-right {
  transform: translateX(80px) !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="attendant_tier_"].attendant-tier-options {
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 90% !important;
  padding: 0.2rem !important;
  gap: 8px !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="attendant_tier_"].attendant-tier-options.hide,
body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="attendant_tier_"][style*="display: none"].attendant-tier-options,
body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="attendant_tier_"][style*="display:none"].attendant-tier-options {
  display: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="attendant_tier_"].attendant-tier-options[style*="display: block"],
body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="attendant_tier_"].attendant-tier-options[style*="display:block"],
body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="attendant_tier_"].attendant-tier-options[style*="display: flex"],
body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="attendant_tier_"].attendant-tier-options[style*="display:flex"] {
  display: flex !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-details.form-actions {
  display: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-details.form-actions[style*="display: block"],
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-details.form-actions[style*="display:block"],
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-details.form-actions[style*="display: flex"],
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-details.form-actions[style*="display:flex"] {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  padding: 14px !important;
  overflow: visible !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-select.form-actions[style*="display: block"],
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-select.form-actions[style*="display:block"],
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-select.form-actions[style*="display: flex"],
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-select.form-actions[style*="display:flex"] {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 0 !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-select :is(.application-text, .application-choices) {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-select .application-choices ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-select .application-choices li {
  display: block !important;
  float: none !important;
  width: 88px !important;
  margin: 0 !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-select .application-choices a {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 88px !important;
  min-height: 72px !important;
  padding: 4px !important;
  border-radius: var(--g4-v4-radius) !important;
  color: var(--g4-v4-brand-blue) !important;
  line-height: 14px !important;
  text-align: center !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-select .application-choices a:hover,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .application-select .application-choices a:focus {
  background: rgba(82, 180, 250, 0.14) !important;
  text-decoration: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="attendant_tier_"].attendant-tier-options > .pull-left {
  float: none !important;
  flex: 1 1 420px !important;
  min-width: 260px !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  [id^="attendant_tier_"].attendant-tier-options > .dialpad.pull-right {
  display: inline-block !important;
  float: none !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .dialpad .aa-action-button:not([id$="_0"]):not([id$="_star"]) {
  width: 33px !important;
}

/* The language control is a button wrapped around a smaller anchor. Extend
   the anchor through the padding so the whole visible button remains live. */
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown::before,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown::after {
  display: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown .dropdown-toggle {
  display: block !important;
  padding: 4px 12px !important;
  margin: -4px -12px !important;
  color: #FFF !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown .caret {
  border-top-color: #FFF !important;
  border-bottom-color: #FFF !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown:hover,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown:focus-within,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown.open {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown:hover,
body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown:focus-within,
body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown.open {
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown .dropdown-menu {
  position: absolute !important;
  z-index: 1050 !important;
  top: 100% !important;
  left: 0 !important;
  display: none !important;
  min-width: max-content !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  box-shadow: 0 0.75rem 1.5rem var(--g4-v4-shadow) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown.open .dropdown-menu {
  display: block !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown .dropdown-menu > li > a {
  color: var(--g4-v4-text) !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown .dropdown-menu > li > a:hover,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown .dropdown-menu > li > a:focus,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .language-dropdown .dropdown-menu > li.selected > a {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .tier-options-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .tier-options-btn:hover,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .tier-options-btn:focus {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-creation .tier-options-btn:hover,
body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-creation .tier-options-btn:focus {
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-creation .tier-options-btn .glyphicon-small-cogwheel {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-actions.form-actions {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 15px 20px !important;
  margin: 0 !important;
  gap: 10px !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  background: rgba(210, 220, 231, 0.8) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-actions.form-actions {
  background: rgba(24, 29, 36, 0.8) !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-actions.form-actions > .btn {
  margin: 0 !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-actions.form-actions > .cancel {
  box-sizing: border-box !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 12px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-actions.form-actions > .cancel:hover,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-actions.form-actions > .cancel:focus {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-actions.form-actions > .cancel {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-actions.form-actions > .cancel:hover,
body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-actions.form-actions > .cancel:focus {
  background: var(--g4-v4-dark-surface) !important;
}

/* Legacy AA sprites need contrast correction; no replacement assets or DOM
   rewrites are necessary. */
body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-creation .dialpad .app-icon {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

body.g4-v4-active:not(.theme-dark) #g4-v4-shell #attendant_form
  .attendant-creation .dialpad .app-icon {
  filter: brightness(0) invert(25%) !important;
  opacity: 1 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  :is(a.audio.helpsy.greeting-manage, a.edit.helpsy, .play, .download-audio) {
  filter: none !important;
  opacity: 1 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .dialpad div[class*="key-"] {
  opacity: 0.88 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .dialpad div[class*="key-"]:hover,
body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .dialpad div[class*="key-"].selected {
  opacity: 1 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-creation .tier-options-btn:hover .glyphicon-small-cogwheel,
body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-creation .tier-options-btn:focus .glyphicon-small-cogwheel {
  filter: brightness(0) saturate(100%) invert(68%) sepia(42%)
    saturate(1463%) hue-rotate(183deg) brightness(101%) contrast(96%) !important;
}

/* Edge paints the selected native radio outside its circular glyph when this
   legacy audio form leaves the control at its 13px intrinsic width. Match the
   accepted V3 constraint without replacing the native control. */
body.g4-v4-active #audio-modal input[type="radio"] {
  width: 0.6rem !important;
  height: 0.6rem !important;
  min-height: 1rem !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body.g4-v4-active #audio-modal input[type="radio"]:focus-visible {
  outline: 2px solid var(--g4-v4-brand-blue) !important;
  outline-offset: 2px !important;
}

body.g4-v4-active #audio-modal
  label.radio:has(> input[name="data[Attendant][select]"]) {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  line-height: 20px !important;
}

body.g4-v4-active #audio-modal
  label.radio > input[name="data[Attendant][select]"] {
  position: static !important;
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  transform: translateY(-1px) !important;
  vertical-align: middle !important;
}

/* Manage Greetings is content-sized for short lists and gains one bounded
   list scrollbar only when the greeting count exceeds the viewport. */
body.g4-v4-active #introgreeting-modal {
  --g4-v4-border: var(--g4-v4-light-border);
  --g4-v4-table-header-bg: #B3C3D4;
  --g4-v4-table-row-bg: #DFEAF5;
  --g4-v4-table-text: var(--g4-v4-brand-navy);
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 126px) !important;
}

body.g4-v4-active.theme-dark #introgreeting-modal {
  --g4-v4-border: var(--g4-v4-dark-border);
  --g4-v4-table-header-bg: #282E36;
  --g4-v4-table-row-bg: #383E45;
  --g4-v4-table-text: var(--g4-v4-dark-text);
}

body.g4-v4-active #introgreeting-modal .modal-body {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 260px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.g4-v4-active #introgreeting-modal .greetings-table.scrollable {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 290px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.g4-v4-active #introgreeting-modal #greetings-table {
  width: 100% !important;
  margin: 0 !important;
}

body.g4-v4-active #introgreeting-modal #greetings-table :is(th, td) {
  box-sizing: border-box !important;
  height: 30px !important;
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-table-text) !important;
  vertical-align: middle !important;
}

body.g4-v4-active #introgreeting-modal #greetings-table thead th {
  background: var(--g4-v4-table-header-bg) !important;
  font-weight: 600 !important;
}

body.g4-v4-active #introgreeting-modal #greetings-table :is(th, td):first-child {
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.g4-v4-active #introgreeting-modal #greetings-table :is(th, td):last-child {
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.g4-v4-active #introgreeting-modal .modal-footer {
  gap: var(--g4-v4-control-gap) !important;
}

body.g4-v4-active #introgreeting-modal .modal-footer > .btn {
  width: auto !important;
  min-width: 75px !important;
  margin: 0 !important;
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.g4-v4-active #introgreeting-modal .modal-footer > .btn:hover,
body.g4-v4-active #introgreeting-modal .modal-footer > .btn:focus {
  background: var(--g4-v4-brand-navy) !important;
}

body.g4-v4-active.theme-dark #introgreeting-modal .modal-footer > .btn:hover,
body.g4-v4-active.theme-dark #introgreeting-modal .modal-footer > .btn:focus {
  background: var(--g4-v4-dark-surface) !important;
}

/* Bootstrap's generic .close style makes the submenu Remove action black and
   nearly transparent. Keep this destructive label visible without changing
   modal close buttons or the dial-pad application's other action controls. */
body.g4-v4-active #g4-v4-shell #attendant_form
  :is(.attendant-header.attendant-tier-options-submenu, .application-details)
  .remove-app .close {
  color: #DC3545 !important;
  opacity: 0.85 !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  :is(.attendant-header.attendant-tier-options-submenu, .application-details)
  .remove-app .close:hover,
body.g4-v4-active #g4-v4-shell #attendant_form
  :is(.attendant-header.attendant-tier-options-submenu, .application-details)
  .remove-app .close:focus {
  color: #B02A37 !important;
  opacity: 1 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  :is(.attendant-header.attendant-tier-options-submenu, .application-details)
  .remove-app .close {
  color: #FF6B6B !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  :is(.attendant-header.attendant-tier-options-submenu, .application-details)
  .remove-app .close:hover,
body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  :is(.attendant-header.attendant-tier-options-submenu, .application-details)
  .remove-app .close:focus {
  color: #FF4444 !important;
}

/* Keep every selected dial-pad application legible in both themes. The
   vendor's large glyph is a dark sprite, while its active caret inherits a
   white border in the light theme. */
body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .application-details .app-icon-lg {
  filter: brightness(0) invert(1) !important;
}

body.g4-v4-active:not(.theme-dark) #g4-v4-shell #attendant_form
  .aa-action-button .arrow {
  border-bottom-color: #000 !important;
}

/* Speech Keywords is a Bootstrap accordion whose portal handlers write
   white row backgrounds inline on hover and expansion. Preserve the V3 card
   surfaces and geometry without altering the accordion behavior. */
body.g4-v4-active:not(.theme-dark) #g4-v4-shell #options
  #options-keywords-content .accordion-group,
body.g4-v4-active:not(.theme-dark) #g4-v4-shell #options
  #options-keywords-content .accordion-group:hover {
  border-radius: 5px !important;
  background-color: #FFF !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #options
  #options-keywords-content .accordion-group,
body.g4-v4-active.theme-dark #g4-v4-shell #options
  #options-keywords-content .accordion-group:hover,
body.g4-v4-active.theme-dark #g4-v4-shell #options
  #options-keywords-content .accordion-body {
  border-radius: 5px !important;
  background-color: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active #g4-v4-shell #options
  #options-keywords-content .keyword-row,
body.g4-v4-active #g4-v4-shell #options
  #options-keywords-content .keyword-row:hover {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  background: transparent !important;
}

body.g4-v4-active #g4-v4-shell #options
  #options-keywords-content .padTop {
  padding-top: 0 !important;
}

body.g4-v4-active #g4-v4-shell #options
  #options-keywords-content .keypadBtn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  line-height: 32px !important;
}

body.g4-v4-active #g4-v4-shell #options
  #options-keywords-content .accordion-body .row > .span6 {
  clear: both !important;
}

body.g4-v4-active #g4-v4-shell #options
  #options-keywords-content .accordion-body .input-append {
  display: flex !important;
  align-items: center !important;
  width: 460px !important;
}

body.g4-v4-active #g4-v4-shell #options
  #options-keywords-content .accordion-body .input-append > input {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

body.g4-v4-active #g4-v4-shell #options
  #options-keywords-content .accordion-body .input-append > button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 52px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #options
  #options-keywords-content .btnType {
  color: #D9E0E8 !important;
}

@media (max-width: 1024px) {
  body.g4-v4-active #g4-v4-shell #attendant_form
    [id^="attendant_tier_"].attendant-tier-options {
    flex-wrap: wrap !important;
    row-gap: 2rem !important;
  }

  body.g4-v4-active #g4-v4-shell #attendant_form
    [id^="attendant_tier_"].attendant-tier-options > .dialpad.pull-right {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Source: src/v4/css/routes/call-history.css */

/* Call History sortable and static headers share the same theme-aware text. */
body.g4-v4-active.theme-light #g4-v4-shell
  #call-history-table > thead > tr > th,
body.g4-v4-active.theme-light #g4-v4-shell
  #call-history-table > thead > tr > th > a,
body.g4-v4-active.theme-light #g4-v4-shell
  #call-history-table > thead > tr > th > .dropdown > .dropdown-toggle,
body.g4-v4-active.theme-light #g4-v4-shell
  #call-history-table > thead > tr > th > .dropdown > .dropdown-toggle > i,
body.g4-v4-active.theme-light #g4-v4-shell
  #recording-config-table > thead > tr > th,
body.g4-v4-active.theme-light #g4-v4-shell
  #recording-config-table > thead > tr > th > a {
  color: #000 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell
  #call-history-table > thead > tr > th,
body.g4-v4-active.theme-dark #g4-v4-shell
  #call-history-table > thead > tr > th > a,
body.g4-v4-active.theme-dark #g4-v4-shell
  #call-history-table > thead > tr > th > .dropdown > .dropdown-toggle,
body.g4-v4-active.theme-dark #g4-v4-shell
  #call-history-table > thead > tr > th > .dropdown > .dropdown-toggle > i,
body.g4-v4-active.theme-dark #g4-v4-shell
  #recording-config-table > thead > tr > th,
body.g4-v4-active.theme-dark #g4-v4-shell
  #recording-config-table > thead > tr > th > a {
  color: #FFF !important;
}

/* Only Date, Sentiment, and Closing Sentiment are sortable on Call History.
   Replace the active legacy sprite with a high-contrast dark-theme caret. */
body.g4-v4-active.theme-dark #g4-v4-shell #call-history-table > thead > tr
  > th > a:is(.asc, .desc) {
  position: relative !important;
  display: inline-block !important;
  padding-right: 15px !important;
  background-image: none !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #call-history-table > thead > tr
  > th > a:is(.asc, .desc)::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 2px !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  transform: translateY(-50%) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #call-history-table > thead > tr
  > th > a.asc::after {
  border-top: 0 !important;
  border-bottom: 5px solid #FFF !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #call-history-table > thead > tr
  > th > a.desc::after {
  border-top: 5px solid #FFF !important;
  border-bottom: 0 !important;
}

/* Use the Grid4 link color for every click-to-call number in the From,
   Dialed, and To columns in both themes. */
body.g4-v4-active #g4-v4-shell #call-history-table > tbody > tr
  > td:is(.from-field, .dialed-field, .to-field) > a.make-call-options {
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active #g4-v4-shell #call-history-table > tbody > tr:hover
  > td:is(.from-field, .dialed-field, .to-field) > a.make-call-options {
  color: #FFF !important;
}

/* The active date range is a compact Grid4 status badge in both themes. */
body.g4-v4-active #g4-v4-shell #filter-date {
  padding: 3px !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
}

body.g4-v4-active #g4-v4-shell
  #table-column-selector-title > .caret {
  border-top-color: #FFF !important;
}

/* Preserve V3's compact gap between Filters and the active date badge. */
body.g4-v4-active #g4-v4-shell #LinkFilters {
  margin-right: 7.5px !important;
}

/* Keep the complete action column inside the table surface when every optional
   Call History column is enabled. The shared table header padding makes this
   one especially wide table exceed its scrollport by a few pixels. */
body.g4-v4-active #g4-v4-shell
  #call-history-table > thead > tr > th {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

/* V3 gives the empty Call History workspace a light surface while leaving the
   same panel transparent in dark mode. */
body.g4-v4-active.theme-light #g4-v4-shell .callhistory-panel-main {
  background: var(--g4-v4-surface) !important;
}

/* Call Transcript uses portal-native pill tabs. Normalize both themes to the
   Grid4 tab colors without affecting pills elsewhere in Call History. */
body.g4-v4-active #g4-v4-shell #transcriptions
  .nav-pills > li > a {
  background: transparent !important;
  color: var(--g4-v4-brand-blue) !important;
}

body.g4-v4-active #g4-v4-shell #transcriptions
  .nav-pills > li.active > a,
body.g4-v4-active #g4-v4-shell #transcriptions
  .nav-pills > li > a:hover,
body.g4-v4-active #g4-v4-shell #transcriptions
  .nav-pills > li > a:focus {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

/* Recording Storage combines a wrapped Back action, live search, and Filters
   action in one toolbar. Normalize that vendor row as one control. */
body.g4-v4-active #g4-v4-shell:has(#storage-filter)
  .action-container-left > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: var(--g4-v4-control-gap) !important;
}

body.g4-v4-active #g4-v4-shell:has(#storage-filter)
  .action-container-left a:has(> button.btn) {
  display: block !important;
  line-height: 0 !important;
  text-decoration: none !important;
}

body.g4-v4-active #g4-v4-shell:has(#storage-filter)
  .action-container-left a > button.btn,
body.g4-v4-active #g4-v4-shell:has(#storage-filter) #LinkStoragefilters {
  box-sizing: border-box !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell:has(#storage-filter)
  form.form-search,
body.g4-v4-active #g4-v4-shell:has(#storage-filter)
  form.form-search > .input-append {
  display: inline-flex !important;
  align-items: stretch !important;
  height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
}

body.g4-v4-active #g4-v4-shell:has(#storage-filter)
  form.form-search #storage-filter {
  border-radius: var(--g4-v4-radius) !important;
}

body.g4-v4-active #g4-v4-shell:has(#storage-filter)
  form.form-search #search-btn {
  display: none !important;
}

/* Match the accepted compact switch geometry while leaving Bootstrap Switch
   responsible for its horizontal on/off movement. */
body.g4-v4-active #g4-v4-shell #recording-storage
  .bootstrap-switch-id-service-enabled {
  width: 102px !important;
  min-width: 102px !important;
  max-width: 102px !important;
}

/* Scheduled Exports uses primary footer actions for each wizard step. */
body.g4-v4-active #g4-v4-shell:has(#cdr-scheduling) .back-btn {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell:has(#cdr-scheduling) .back-btn:hover,
body.g4-v4-active #g4-v4-shell:has(#cdr-scheduling) .back-btn:focus {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark
  #g4-v4-shell:has(#cdr-scheduling) .back-btn:hover,
body.g4-v4-active.theme-dark
  #g4-v4-shell:has(#cdr-scheduling) .back-btn:focus {
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling .modal-header {
  padding-bottom: 0 !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling .modal-header .nav-tabs {
  margin-bottom: 0 !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling .modal-body {
  height: 480px !important;
  min-height: 0 !important;
  max-height: calc(100vh - 9rem) !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling
  .modal-body > .control-group.group {
  margin: 7.5px 0 13.5px !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling .help-block {
  color: #4D5C72 !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling hr {
  height: 0 !important;
  margin: 5px 0 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--g4-v4-light-border) !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling .modal-footer > .btn {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling .modal-footer {
  gap: 15px !important;
  padding-right: 22.5px !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling .modal-footer > .btn:first-child {
  min-width: 75px !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling
  .modal-footer > .modal-tabs-btn-back-cdr {
  min-width: 75px !important;
}

body.g4-v4-active #g4-v4-shell #cdr-scheduling .modal-footer > .btn:hover,
body.g4-v4-active #g4-v4-shell #cdr-scheduling .modal-footer > .btn:focus {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-navy) !important;
  color: #FFF !important;
  outline: none !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #cdr-scheduling .modal-body,
body.g4-v4-active.theme-dark #g4-v4-shell #cdr-scheduling .tab-content {
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #cdr-scheduling .help-block {
  color: #D9E0E8 !important;
  font-weight: 500 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #cdr-scheduling hr {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #cdr-scheduling
  .modal-footer > .btn:hover,
body.g4-v4-active.theme-dark #g4-v4-shell #cdr-scheduling
  .modal-footer > .btn:focus {
  background: var(--g4-v4-dark-surface) !important;
}

/* Keep the Call History header surface continuous around the action column. */
body.g4-v4-active #g4-v4-shell #call-history-table > thead,
body.g4-v4-active #g4-v4-shell #call-history-table > thead > tr {
  background: var(--g4-v4-table-header-bg) !important;
}

/* Cradle To Grave is the portal's accepted wide-modal variant. Its fixed
   timeline needs this width to include the timestamp and event without a
   horizontal scrollbar. */
body.g4-v4-active #g4-v4-shell #cradle-modal {
  width: min(800px, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
}

body.g4-v4-active #g4-v4-shell #cradle-modal .modal-body {
  overflow-x: hidden !important;
}

body.g4-v4-active #g4-v4-shell #cradle-modal .cradle-timeline {
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

body.g4-v4-active #g4-v4-shell #cradle-modal
  .cradle-timeline .event p {
  color: var(--g4-v4-text) !important;
  font-weight: 500 !important;
}

body.g4-v4-active #g4-v4-shell #cradle-modal
  .cradle-timeline .event::before {
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-surface-secondary) !important;
  color: var(--g4-v4-brand-navy) !important;
}

body.g4-v4-active #g4-v4-shell #cradle-modal
  .modal-footer button[data-target="#trace-inline"] {
  border: 1px solid var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #cradle-modal .modal-header,
body.g4-v4-active.theme-dark #g4-v4-shell #cradle-modal .modal-body,
body.g4-v4-active.theme-dark #g4-v4-shell #cradle-modal .modal-footer,
body.g4-v4-active.theme-dark #g4-v4-shell #cradle-modal .cradle-timeline {
  border-color: var(--g4-v4-dark-border) !important;
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #cradle-modal
  .cradle-timeline .event::before {
  background: var(--g4-v4-dark-surface) !important;
  color: var(--g4-v4-brand-blue) !important;
}

/* Both Call History portal levels open the same legacy Blocked Numbers dialog
   as Answering Rules. Keep its nested Bootstrap well and add row on the active
   theme instead of inheriting their light defaults. */
body.g4-v4-active.page-callhistory #allowblock-lists.blocknumbers-modal
  :is(.allowblock-input, #block-div > .well, #rej-list) {
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: none !important;
}

body.g4-user-portal.page-callhistory #allowblock-lists.blocknumbers-modal
  #rej-list > .rej-row {
  background: var(--g4-v4-surface-secondary) !important;
  color: var(--g4-v4-text) !important;
}

body.g4-user-portal.page-callhistory #allowblock-lists.blocknumbers-modal
  #rej-list > .rej-row:hover {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

/* Recolor the native 14px Bootstrap remove sprite without changing its
   footprint, asset URL, or row alignment. */
body.g4-user-portal.page-callhistory #g4-v4-shell
  #allowblock-lists .rej-row-remove a.helpsy i.icon-remove {
  filter: brightness(0) saturate(100%) invert(22.774%) sepia(41.805%)
    saturate(3511.192%) hue-rotate(338.806deg) brightness(97.683%)
    contrast(79.572%) !important;
}

body.g4-user-portal.page-callhistory #allowblock-lists.blocknumbers-modal
  .add-rej.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

/* Source: src/v4/css/integrations/faxedge.css */

/* FaxEdge is injected by an external bundle. Keep its route-specific geometry
   here while reusing V4's shared buttons, tabs, tables, forms, and modal shell. */

/* Domain Fax Settings. */
body.g4-v4-active #g4-v4-shell #fax_settings input[name="account_name"] {
  box-sizing: border-box !important;
  width: var(--g4-v4-control-width) !important;
  min-width: var(--g4-v4-control-width) !important;
  max-width: var(--g4-v4-control-width) !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 8px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #fax_settings #tab2 .info-alert-custom {
  box-sizing: border-box !important;
  border-color: rgba(var(--g4-v4-brand-blue-rgb), 0.55) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
}

body.g4-v4-active #g4-v4-shell
  #fax_settings :is(#ButtonEnable, #ButtonDisable, #ButtonBulkResync),
body.g4-v4-active #g4-v4-shell
  #fax_settings :is(#ButtonEnable, #ButtonDisable, #ButtonBulkResync) > span {
  color: #FFF !important;
}

/* Domain Inventory > Fax Numbers. Each of the two vendor sections owns its
   refresh/search row, so normalize those rows without inserting a page action. */
body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--g4-v4-control-gap) !important;
  margin-bottom: var(--g4-v4-control-gap) !important;
}

body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right > * {
  margin: 0 !important;
}

body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right > input.search-query {
  box-sizing: border-box !important;
  width: var(--g4-v4-control-width) !important;
  min-width: var(--g4-v4-control-width) !important;
  max-width: var(--g4-v4-control-width) !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 4px 8px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right button.refresh-icon {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--g4-v4-control-height) !important;
  min-width: var(--g4-v4-control-height) !important;
  max-width: var(--g4-v4-control-height) !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
  box-shadow: none !important;
  transform: none !important;
}

body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right button.refresh-icon,
body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper button.refresh-icon {
  position: relative !important;
}

body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right button.refresh-icon::before,
body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper button.refresh-icon::before {
  box-sizing: border-box !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  border: 2px solid #FFF !important;
  border-left-color: transparent !important;
  border-radius: 50% !important;
  content: "" !important;
}

body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right button.refresh-icon::after,
body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper button.refresh-icon::after {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border: 3px solid transparent !important;
  border-top-color: #FFF !important;
  border-right-color: #FFF !important;
  content: "" !important;
}

body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right button.refresh-icon > i,
body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper button.refresh-icon > i {
  display: none !important;
}

/* Inventory Fax Numbers and Fax Devices use the portal's native refresh
   sprite. It matches V3 more closely than the generic drawn ring above. */
body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right button.refresh-icon::before,
body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper button.refresh-icon::before {
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: url("https://portal.smartcomm.io/portal/img/glyphicons-halflings.png") !important;
  background-position: -240px -24px !important;
  background-repeat: no-repeat !important;
  filter: brightness(0) invert(1) !important;
}

body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right button.refresh-icon::after,
body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper button.refresh-icon::after {
  display: none !important;
  content: none !important;
}

body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right button.refresh-icon:is(:hover, :focus) {
  background: var(--g4-v4-brand-navy) !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right button.refresh-icon:is(:hover, :focus) {
  background: var(--g4-v4-dark-surface) !important;
}

body.g4-v4-active #g4-v4-shell #fax_number
  > div > div > .row > .action-container-right button.refresh-icon > i {
  color: #FFF !important;
  filter: brightness(0) invert(1) !important;
}

/* User Fax. */
body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper > div:first-child > .control-group {
  display: block !important;
  margin: 20px 0 15px !important;
}

body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper > div:first-child > .control-group > label.control-label {
  display: block !important;
  margin: 0 0 2px !important;
  color: var(--g4-v4-text) !important;
}

body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper > div:first-child > .control-group .controls .ui-widget {
  display: flex !important;
  align-items: center !important;
  gap: var(--g4-v4-control-gap) !important;
}

body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper > div:first-child > .control-group
  .controls .ui-widget > .btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
  text-shadow: none !important;
  transform: none !important;
}

body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper button.refresh-icon {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--g4-v4-control-height) !important;
  min-width: var(--g4-v4-control-height) !important;
  max-width: var(--g4-v4-control-height) !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  padding: 0 !important;
  border: 1px solid var(--g4-v4-brand-blue) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
  transform: none !important;
}

body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper button.refresh-icon > i {
  color: #FFF !important;
  filter: brightness(0) invert(1) !important;
}

body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper > div:first-child > .control-group select.form-select,
body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper .tab-pane
  :is(input[type="text"], input[type="password"], select) {
  box-sizing: border-box !important;
  width: var(--g4-v4-control-width) !important;
  min-width: var(--g4-v4-control-width) !important;
  max-width: var(--g4-v4-control-width) !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
  color: var(--g4-v4-text) !important;
  box-shadow: none !important;
}

body.g4-v4-active.page-fax #g4-v4-shell
  #FaxEdgeWrapper .btn.btn-primary {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell
  :is(#fax_settings, #fax_number) .btn.btn-primary {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
  text-shadow: none !important;
}

/* User profile > Faxing is mounted at a separate integration root. */
body.g4-v4-active #g4-v4-shell
  #faxing button.btn.btn-primary.saveBtn {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
  text-shadow: none !important;
}

/* FaxEdge's embedded styles win late in the cascade, so reinforce the shared
   V4 table palette only at its three integration roots. */
body.g4-v4-active #g4-v4-shell
  :is(#fax_settings #tab2, #fax_number, #FaxEdgeWrapper #tab1, #FaxEdgeWrapper #tab2)
  .table-container {
  box-sizing: border-box !important;
  padding: var(--g4-v4-surface-inset) !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
}

body.g4-v4-active #g4-v4-shell
  :is(#fax_settings #tab2, #fax_number, #FaxEdgeWrapper #tab1, #FaxEdgeWrapper #tab2)
  .table-container > table.table {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
  background: transparent !important;
}

body.g4-v4-active #g4-v4-shell
  :is(#fax_settings #tab2, #fax_number, #FaxEdgeWrapper #tab1, #FaxEdgeWrapper #tab2)
  .table-container > table.table > thead > tr > th {
  box-sizing: border-box !important;
  height: 30px !important;
  padding: 4px 8px !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-table-text) !important;
  vertical-align: middle !important;
}

body.g4-v4-active #g4-v4-shell
  :is(#fax_settings #tab2, #fax_number, #FaxEdgeWrapper #tab1, #FaxEdgeWrapper #tab2)
  .table-container > table.table > tbody > tr > td {
  box-sizing: border-box !important;
  height: 29px !important;
  padding: 4px 8px !important;
  border-top: 1px solid var(--g4-v4-border) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-left: 0 !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-table-text) !important;
  vertical-align: middle !important;
}

body.g4-v4-active #g4-v4-shell
  :is(#fax_settings #tab2, #fax_number, #FaxEdgeWrapper #tab1, #FaxEdgeWrapper #tab2)
  .table-container > table.table > :is(thead, tbody) > tr > :first-child {
  border-left: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) 0 0 var(--g4-v4-radius) !important;
}

body.g4-v4-active #g4-v4-shell
  :is(#fax_settings #tab2, #fax_number, #FaxEdgeWrapper #tab1, #FaxEdgeWrapper #tab2)
  .table-container > table.table > :is(thead, tbody) > tr > :last-child {
  border-right: 1px solid var(--g4-v4-border) !important;
  border-radius: 0 var(--g4-v4-radius) var(--g4-v4-radius) 0 !important;
}

body.g4-v4-active #g4-v4-shell
  :is(#fax_settings #tab2, #fax_number, #FaxEdgeWrapper #tab1, #FaxEdgeWrapper #tab2)
  .table-container > table.table.table-hover > tbody > tr:hover > td {
  background: var(--g4-v4-brand-blue) !important;
  color: #FFF !important;
}

/* Shared FaxEdge modal refinements. */
body.g4-v4-active .modal.g4-v4-fax-modal {
  width: min(600px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  overflow: hidden !important;
}

body.g4-v4-active .modal.g4-v4-number-permissions {
  width: min(1400px, calc(100vw - 32px)) !important;
}

body.g4-v4-active .modal.g4-v4-number-permissions .modal-body {
  height: auto !important;
  max-height: calc(100vh - 220px) !important;
  overflow-y: auto !important;
}

body.g4-v4-active .modal.g4-v4-number-permissions .modal-body > div,
body.g4-v4-active .modal.g4-v4-number-permissions .table-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal .modal-footer {
  gap: var(--g4-v4-control-gap) !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal .modal-footer > .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  margin: 0 !important;
  transform: none !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal .modal-footer > .btn.btn-primary {
  border-color: var(--g4-v4-brand-blue) !important;
  background: var(--g4-v4-brand-blue) !important;
  background-image: none !important;
  color: #FFF !important;
}

body.g4-v4-active.theme-dark .modal.g4-v4-fax-modal
  .modal-footer > .btn:not(.btn-primary) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  color: var(--g4-v4-dark-text) !important;
}

body.g4-v4-active .modal.g4-v4-fax-device-modal textarea[name="notes"] {
  width: 250px !important;
  max-width: 250px !important;
  min-height: 8.25rem !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal input[type="file"] {
  height: var(--g4-v4-control-height) !important;
  padding: 0 8px 0 0 !important;
  overflow: hidden !important;
  line-height: 28px !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal input[type="file"]::file-selector-button {
  box-sizing: border-box !important;
  height: 28px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-right: 1px solid var(--g4-v4-border) !important;
  border-radius: 4px 0 0 4px !important;
  background: var(--g4-v4-light-secondary-surface) !important;
  color: var(--g4-v4-brand-navy) !important;
  font: inherit !important;
  cursor: pointer !important;
}

body.g4-v4-active.theme-dark
  .modal.g4-v4-fax-modal input[type="file"]::file-selector-button {
  background: #383E45 !important;
  color: var(--g4-v4-dark-text) !important;
}

/* User Portal Fax add controls are 20px sprite cells. The shared User Portal
   button minimum otherwise exposes the next sprite beneath the plus icon. */
body.g4-v4-active.g4-user-portal #g4-v4-shell
  .modal.g4-v4-fax-modal .modal-body
  .ui-widget > button.add.helpsy {
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background-position: -80px -20px !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

/* Compose Fax needs an exact inner button height so the native file picker
   remains fully visible inside the shared 30px control. */
body.g4-v4-active.g4-user-portal #g4-v4-shell
  #composeFaxModal.g4-v4-fax-modal #fax-file {
  box-sizing: border-box !important;
  height: var(--g4-v4-control-height) !important;
  min-height: var(--g4-v4-control-height) !important;
  max-height: var(--g4-v4-control-height) !important;
  padding: 0 8px 0 0 !important;
  overflow: hidden !important;
  line-height: 28px !important;
}

body.g4-v4-active.g4-user-portal #g4-v4-shell
  #composeFaxModal.g4-v4-fax-modal #fax-file::file-selector-button {
  box-sizing: border-box !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 10px !important;
  line-height: 28px !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal .modal-body
  div:has(> table.table-striped) {
  box-sizing: border-box !important;
  padding: var(--g4-v4-surface-inset) !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal table.table-striped {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
  background: transparent !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal
  table.table-striped > tbody > tr > td {
  height: 29px !important;
  padding: 4px 8px !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-table-text) !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal#viewPDF:is(.in, .show) {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal#viewPDF > .modal-body {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: var(--g4-v4-surface-inset) !important;
  overflow: hidden !important;
}

body.g4-v4-active .modal.g4-v4-fax-modal#viewPDF > .modal-body > iframe {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}