/*
 * 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 {
  z-index: 1050;
}

body.g4-v4-active .fixed-container > #domain-message,
body.g4-v4-active .fixed-container > .mask-bar {
  box-sizing: border-box;
  width: min(47.2rem, calc(100vw - 2rem)) !important;
  height: auto;
  max-width: calc(100vw - 2rem);
  margin: 0.125rem auto 0;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(28, 33, 67, 0.1);
  border-radius: var(--g4-v4-radius);
  background: rgba(210, 220, 231, 0.96);
  color: var(--g4-v4-brand-navy);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12);
}

body.g4-v4-active.theme-dark .fixed-container > #domain-message,
body.g4-v4-active.theme-dark .fixed-container > .mask-bar {
  border-color: var(--g4-v4-dark-border);
  background: rgba(24, 29, 36, 0.97);
  color: var(--g4-v4-dark-text);
}

body.g4-v4-active .fixed-container > #domain-message .domain-message-container,
body.g4-v4-active .fixed-container > .mask-bar .domain-message-container {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  gap: 0.75rem;
}

body.g4-v4-active .fixed-container > #domain-message .domain-message-buttons,
body.g4-v4-active .fixed-container > .mask-bar .domain-message-buttons {
  display: flex;
  align-items: center;
  gap: var(--g4-v4-control-gap);
  margin: 0 !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;
  align-items: center;
  min-width: 0;
  color: inherit;
  white-space: nowrap;
  text-align: center;
}

body.g4-v4-active .fixed-container > #domain-message h5,
body.g4-v4-active .fixed-container > .mask-bar h5 {
  margin: 0;
  color: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25rem;
}

body.g4-v4-active .fixed-container > #domain-message .btn,
body.g4-v4-active .fixed-container > .mask-bar .btn {
  box-sizing: border-box;
  /* V3's active banner uses a measured 35.25px control row at the 15px root scale. */
  min-height: 2.35rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--g4-v4-brand-blue);
  border-radius: var(--g4-v4-radius);
  background: var(--g4-v4-brand-blue);
  color: #FFF;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
}

body.g4-v4-active .fixed-container > #domain-message .btn:hover,
body.g4-v4-active .fixed-container > #domain-message .btn:focus,
body.g4-v4-active .fixed-container > .mask-bar .btn:hover,
body.g4-v4-active .fixed-container > .mask-bar .btn:focus {
  border-color: var(--g4-v4-brand-blue);
  background: var(--g4-v4-brand-navy);
  color: #FFF;
}

@media (max-width: 760px) {
  body.g4-v4-active .fixed-container > #domain-message .domain-message-container,
  body.g4-v4-active .fixed-container > .mask-bar .domain-message-container {
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
  }

  body.g4-v4-active .fixed-container > #domain-message .domain-message-text,
  body.g4-v4-active .fixed-container > .mask-bar .domain-message-text,
  body.g4-v4-active .fixed-container > #domain-message .btn,
  body.g4-v4-active .fixed-container > .mask-bar .btn {
    white-space: normal;
  }
}

/* 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;
}

/* 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;
  width: 250px !important;
  max-width: 250px !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: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 {
  height: 78.75px !important;
  min-height: 78.75px !important;
  padding: 8px 12px !important;
  resize: both !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;
}

#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;
}

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 .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 > .caret {
  border-top-color: var(--g4-v4-brand-blue) !important;
  border-bottom-color: var(--g4-v4-brand-blue) !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. The native table has a stable seven-column schema. */
body.page-agents #g4-v4-shell #manager_queues > thead:first-of-type th:nth-child(1) {
  width: 4.2581% !important;
}

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

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

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

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

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

body.page-agents #g4-v4-shell #manager_queues > thead:first-of-type th:nth-child(7) {
  width: 9.7096% !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 .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;
}

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;
}

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;
}

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-settings-btn, .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-settings-btn, .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;
}

/* 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;
}

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;
}

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;
}

/* Keep the compact import dialog by placing format help below the filename. */
body.g4-user-portal.page-contacts #g4-v4-shell #import-modal .modal-body
  .control-group:has(.fileupload input[type="file"]) {
  align-items: flex-start !important;
}

body.g4-user-portal.page-contacts #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-user-portal.page-contacts #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;
}

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;
}

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;
}

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;
}

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;
}

body.page-callqueues #write-agents #add-agents-table {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 6px !important;
  border: 1px solid var(--g4-v4-border) !important;
  border-radius: var(--g4-v4-radius) !important;
  background: var(--g4-v4-surface) !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;
  width: 257px !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 {
  width: 237px !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;
}

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;
}

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;
}

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 {
  padding: 4px 5px !important;
  border-bottom: 1px solid var(--g4-v4-border) !important;
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-table-header-bg) !important;
  color: var(--g4-v4-text) !important;
  font-size: 11.25px !important;
  line-height: 20px !important;
}

body.page-music #g4-v4-shell .music-panel-main > table tbody td {
  padding: 4px 5px !important;
  border-color: var(--g4-v4-border) !important;
  background: var(--g4-v4-table-row-bg) !important;
  color: var(--g4-v4-text) !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 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: 340.5px !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: 189px !important;
  min-height: 189px !important;
  max-height: 189px !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;
}

/* 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 {
  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
  .uiconfig-td-name > a {
  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;
}

/* 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;
}

/* 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 .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 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: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 #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 .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;
}

/* 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 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;
}

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;
}

/* 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;
}

/* 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;
}

/* 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 #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;
  resize: vertical !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/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;
}

/* 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),
body.g4-v4-active #g4-v4-shell #user-table-main
  > .pagination-container > .pagination.pull-right
  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;
}

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;
}

/* 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;
}

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

/* 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
  .attendant-header.attendant-tier-options-submenu .remove-app .close {
  color: #DC3545 !important;
  opacity: 0.85 !important;
  text-shadow: none !important;
}

body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-header.attendant-tier-options-submenu .remove-app .close:hover,
body.g4-v4-active #g4-v4-shell #attendant_form
  .attendant-header.attendant-tier-options-submenu .remove-app .close:focus {
  color: #B02A37 !important;
  opacity: 1 !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-header.attendant-tier-options-submenu .remove-app .close {
  color: #FF6B6B !important;
}

body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-header.attendant-tier-options-submenu .remove-app .close:hover,
body.g4-v4-active.theme-dark #g4-v4-shell #attendant_form
  .attendant-header.attendant-tier-options-submenu .remove-app .close:focus {
  color: #FF4444 !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 */

/* 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;
}

/* 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;
}

/* The user Call History route opens the same legacy Blocked Numbers dialog as
   Answering Rules, but under page-callhistory. Keep its nested Bootstrap well
   and add row on the active theme instead of inheriting their light defaults. */
body.g4-user-portal.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;
}

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;
}

/* 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;
}

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;
}