/* ===================================================================
   GRID4 NETSAPIENS PORTAL SKIN v5.0.11
   ARCHITECTURE: SCOPED APP SHELL
   - All styles are scoped to #grid4-app-shell to prevent global conflicts.
   - Table header fixes with sortable link colors (#23A455)
   - Color-primary button overrides to match theme
   - Enhanced modal form element theming
   - Smooth theme transition support
   - Domain banner spacing handled by JS measuring actual position.
   - Icon sprites use CDN paths for NetSapiens server access.
   - Fixed nav tabs visibility, dropdown hover behavior, removed tooltips.
   =================================================================== */

/* ===================================
   REM BASELINE: Establish root font size for scalable units
   =================================== */
html {
  font-size: 16px; /* 1rem = 16px - Standard browser default */
}

/* Scale based on viewport for better responsiveness */
@media (max-width: 2160px) {
  html { font-size: 18px; }
}
@media (max-width: 1366px) {
  html { font-size: 15px; }
}
@media (max-width: 1024px) {
  html { font-size: 14px; }
}

/* ===================================
   1. FOUNDATION: THEME-AGNOSTIC CONSTANTS
   =================================== */
:root {
  /* Layout Constants */
  --g4-sidebar-width: 12.825rem; /* 250px converted to REM */
  --g4-header-height: 2.25rem; /* 60px converted to REM */
  --g4-content-padding: .80rem; /* 22px converted to REM */
  --g4-radius-sm: 0.20rem; /* 4px converted to REM */
  --g4-radius-md: 0.325rem; /* 6px converted to REM */
  --g4-radius-lg: 0.5rem; /* 8px converted to REM */
  --g4-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --g4-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --g4-font-family: 'Aptos', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --g4-font-size-xs: 0.5625rem; /* 9px converted to REM */
  --g4-font-size-sm: 0.6875rem; /* 11px converted to REM */
  --g4-font-size-base: 0.70rem; /* 12px converted to REM */
  --g4-font-size-md: 0.9275rem; /* 15px converted to REM */
  --g4-font-size-lg: 1.0rem; /* 18px converted to REM */
}

/* ===================================
   2. THEME DEFINITIONS (SCOPED TO APP SHELL)
   =================================== */

/* --- LIGHT THEME --- */
#grid4-app-shell.theme-light {
  --app-bg: #f5f5f5;
  --surface-primary-bg: #ffffff;
  --surface-secondary-bg: #f8f9fa;
  --border-color: #dee2e638;
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-muted: #6c757d;
  --accent-primary: #52B4FA;
  --accent-secondary: #52B4FA;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --sortable-header-text: #23A455;
  --sortable-header-text-hover: #2fbf67;
  --table-hover-bg: #e3e6f0;
  --table-hover-text: #212529;

  /* RGB values for effects */
  --surface-primary-rgb: 255, 255, 255;
  --surface-secondary-rgb: 248, 249, 250;
  --accent-primary-rgb: 0, 102, 204;
}

/* --- DARK THEME --- */
#grid4-app-shell.theme-dark {
  --app-bg: #030507;
  --surface-primary-bg: #333;
  --surface-secondary-bg: #181818ed;
  --border-color: rgba(255, 255, 255, 0.1);
  --text-primary: #e9ecef;
  --text-secondary: #e9ecef;
  --text-muted: #78909c;
  --accent-primary: #52B4FA;
  --accent-secondary: #52B4FA;
  --shadow-color: rgba(0, 0, 0, 0.25);
  --sortable-header-text: #23A455;
  --sortable-header-text-hover: #2fbf67;
  /* --table-hover-bg: #48db2b6b; */
  --table-hover-text: #ffffff;

  /* RGB values for effects */
  --surface-primary-rgb: 30, 30, 35;
  --surface-secondary-rgb: 30, 39, 34;
  --accent-primary-rgb: 0, 102, 204;
}

/* ===================================
   3. APP SHELL & CORE LAYOUT
   =================================== */

/* Apply font family globally within shell */
#grid4-app-shell {
  font-family: var(--g4-font-family) !important;
  font-size: var(--g4-font-size-base);
  min-height: 100vh;
  background-color: var(--app-bg) !important;
}

/* Fix wrapper to prevent white background bleed */
#grid4-app-shell .wrapper,
.wrapper {
  display: flex;
  flex: 1;
  min-height: 100vh;
  padding-top: var(--g4-header-height);
  background-color: var(--app-bg) !important;
  width: 100%;
}

/* The has-domain-banner class is added by JS but spacing is handled dynamically */

/* Ensure body and html don't interfere */
body {
  margin: 0;
  padding: 0;
  background-color: var(--app-bg, #030507) !important;
}

#grid4-app-shell #header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--g4-header-height);
  background-color: var(--surface-secondary-bg) !important;
  border-bottom: 5px solid var(--border-color) !important;
  z-index: 1030; /* Lower than modals (1050) but higher than sidebar (1000) */
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
  transition: background-color var(--g4-transition-normal), border-color var(--g4-transition-normal);
}

#grid4-app-shell #content {
  flex: 1;
  padding: var(--g4-content-padding) !important;
  margin-left: var(--g4-sidebar-width) !important;
  background-color: var(--app-bg) !important;
  color: var(--text-primary) !important;
  min-width: 0; /* Prevent flex item from overflowing */
  width: calc(100% - var(--g4-sidebar-width));
}

/* Fix content area backgrounds
#grid4-app-shell #content > *,
#grid4-app-shell .container-fluid,
#grid4-app-shell .row-fluid {
  background-color: transparent !important;
} */

/* Hide original header logo */
#grid4-app-shell #header-logo {
  display: none !important;
}

/* Move user toolbar to the right side */
#grid4-app-shell #header-user {
  position: absolute !important;
  right: 1.25rem !important;
  top: 75% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  color: var(--text-primary) !important;
}
/*
#grid4-app-shell #header-user a {
/*  color: var(--text-primary) !important;
}
*/
/* Position app dropdown relative to its container */
#grid4-app-shell #header-user .dropdown {
  position: relative !important;
}

/* Fix app menu dropdown visibility and position */
#grid4-app-shell #app-menu-list {
  position: absolute !important;
  z-index: 9999 !important;
  left: auto !important;
  right: 0 !important;
  top: 100% !important;
  margin-top: 0.3125rem !important;
  background: var(--surface-primary-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--g4-radius-md) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15) !important;
  min-width: 12.5rem !important;
}

/* Ensure dropdown menu items are visible */
#grid4-app-shell #app-menu-list .dropdown-menu {
  display: block !important;
  position: static !important;
  float: none !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#grid4-app-shell #app-menu-list li a {
  color: var(--text-primary) !important;
  padding: 0.5rem 1rem !important;
  display: block !important;
  white-space: nowrap !important;
}

#grid4-app-shell #app-menu-list li a:hover {
  background: var(--surface-secondary-bg) !important;
  color: var(--accent-primary) !important;
}

/* ===================================
   4. SIDEBAR NAVIGATION & LOGO
   =================================== */

#grid4-app-shell #navigation {
  position: fixed;
  top: var(--g4-header-height);
  left: 0;
  width: var(--g4-sidebar-width);
  height: calc(100vh - var(--g4-header-height));
  background-color: var(--surface-secondary-bg) !important;
  border-right: 5px solid var(--border-color) !important;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: background-color var(--g4-transition-normal), border-color var(--g4-transition-normal);
  box-shadow: 0.125rem 0 0.5rem rgba(0, 0, 0, 0.1);
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Custom Logo Injection */
#grid4-app-shell #navigation::before {
  content: '';
  display: block;
  width: 85%;
  height: 6.5rem;
  margin: 2.3125rem auto;
  background-image: url('https://ambitious-coast-0a8b2110f.1.azurestaticapps.net/SmartComm Test Logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

#grid4-app-shell #nav-buttons {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Navigation Links */
#grid4-app-shell #nav-buttons li {
  margin: 0;
  padding: 0;
}

#grid4-app-shell #nav-buttons .nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px gap between icon and text */
  padding: 0.5rem .4rem; /* 10px 16px */
  margin: 0.125rem 0.4rem; /* 2px 8px */
  border-radius: var(--g4-radius-sm);
  color: var(--text-secondary) !important;
  font-size: var(--g4-font-size-sm);
  font-weight: 500;
  text-decoration: none !important;
  transition: all var(--g4-transition-fast);
  position: relative;
  height: auto;
  min-height: 1.5rem; /* 40px */
  white-space: nowrap !important;
}

#grid4-app-shell #nav-buttons .nav-link .fa {
  font-size: 1.25rem; /* 18px - larger icons */
  width: 1.50rem; /* 20px fixed width */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#grid4-app-shell #nav-buttons .nav-link .nav-text {
  display: flex;
  align-items: center;
  line-height: 1.2;
  font-size: 0.75rem; /* 0.9375rem; 15px - larger text */
  height: 100%;
  white-space: nowrap !important; /* Prevent text wrapping */
  text-overflow: ellipsis;
  flex: 1;
  text-align: left; /* Ensure left alignment */
  color: var(--text-primary) !important;
  font-weight: 600 !important;

}

#grid4-app-shell #nav-buttons .nav-link:hover {
  background-color: var(--accent-primary);
  color: #ffffff !important;
  transform: translateX(0.25rem);
}

#grid4-app-shell #nav-buttons .nav-link:hover .fa,
#grid4-app-shell #nav-buttons .nav-link:hover .nav-text {
  color: #ffffff !important;
}

#grid4-app-shell #nav-buttons .nav-link-current > a {
  background-color: var(--accent-primary) !important;
  color: #ffffff !important;
  font-weight: 600;
}

#grid4-app-shell #nav-buttons .nav-link-current > a .fa,
#grid4-app-shell #nav-buttons .nav-link-current > a .nav-text {
  color: #ffffff !important;
}

/* Clean up default nav elements */
#grid4-app-shell .nav-button,
#grid4-app-shell .nav-bg-image,
#grid4-app-shell .nav-arrow {
  display: none !important;
}

/* Theme Toggle Button */
#grid4-theme-toggle {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0.625rem 5rem;
  flex-shrink: 0;
  transition: all var(--g4-transition-normal);
}

/* Ensure FontAwesome icons display properly */
#grid4-theme-toggle .fa:before,
#grid4-app-shell .fa:before {
  font-family: 'FontAwesome' !important;
  font-style: normal !important;
  font-weight: normal !important;
  text-decoration: inherit !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
#grid4-theme-toggle:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: scale(1.1) rotate(15deg);
}

/* Dev Tools Styling */
/* #grid4-dev-tools {
  background: #0099ff !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3) !important;
  margin: 0.625rem !important;
  overflow: hidden;
}

#grid4-dev-tools-header {
  background: #0099ff !important;
  color: white !important;
  cursor: pointer;
  padding: 0.75rem !important;
  font-weight: 600 !important;
  user-select: none;
}

#grid4-dev-tools-header:hover {
  background: #0088ee !important;
}

#grid4-dev-tools-content {
  background: white !important;
  color: #333 !important;
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

#grid4-dev-tools-content::-webkit-scrollbar {
  width: 0.5rem;
}

#grid4-dev-tools-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#grid4-dev-tools-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0.25rem;
}

#grid4-dev-tools-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Ensure inputs and selects in dev tools are always visible */
#grid4-dev-tools input,
#grid4-dev-tools select {
  background: #f5f5f5 !important;
  color: #333 !important;
  border: 1px solid #ddd !important;
}

#grid4-dev-tools button:hover {
  opacity: 0.9;
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
} */

/* ===================================
   5. HEADER & TOOLBAR ADJUSTMENTS
   =================================== */

/* Shift user toolbar left to prevent dropdown cutoff */
#grid4-app-shell .user-toolbar {
  margin-right: 3.75rem !important;
}

/* Ensure dropdown has space */
#grid4-app-shell #grid4-admin-dropdown .dropdown-menu {
  right: 0 !important;
  left: auto !important;
}

/* ===================================
   5. SCOPED COMPONENT STYLES
   =================================== */

/* Sub-bar - Hide completely as it provides no utility */
#grid4-app-shell #navigation-subbar {
  display: none !important;
}

/* Panels */
#grid4-app-shell .panel {
  background-color: var(--surface-primary-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--g4-radius-md);
  color: var(--text-primary) !important;
  box-shadow: 0 0.0625rem 0.1875rem var(--shadow-color);
}
#grid4-app-shell .panel-heading {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  font-weight: 600;
}

/* Enhanced Tables with Modern Styling */
#grid4-app-shell .table {
  color: var(--text-primary) !important;
  border-collapse: separate !important;
/*  border-spacing: 0 0.3125rem !important; */
}

#grid4-app-shell .table th {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
  background-color: var(--surface-secondary-bg) !important;
  /* position: sticky; */
  top: 0;
  z-index: 10;
}

#grid4-app-shell .table td {
  border-color: var(--border-color) !important;
  background-color: var(--surface-primary-bg);
  transition: all var(--g4-transition-fast);
  vertical-align: middle;
}

/* Modern row hover with purple accent */
#grid4-app-shell .table-hover tbody tr:hover td {
background-color: var(--accent-primary) !important;
color: white !important;
transform: translateY(-0.105rem);
 /* box-shadow: 0 0.25rem 0.75rem var(--shadow-color); */
}

/* Selected/Active rows */
#grid4-app-shell .table tbody tr.selected td,
#grid4-app-shell .table tbody tr.active td {
  background-color: var(--accent-primary) !important;
  color: #ffffff !important;
}

/* First and last cell rounded corners for modern look */
#grid4-app-shell .table tbody tr td:first-child {
  border-radius: var(--g4-radius-md) 0 0 var(--g4-radius-md);
}

#grid4-app-shell .table tbody tr td:last-child {
  border-radius: 0 var(--g4-radius-md) var(--g4-radius-md) 0;
}

/* Fix table container to prevent cutoff */
#grid4-app-shell .table-responsive {
  overflow-x: auto;
  overflow-y: visible;
  margin-bottom: 1.25rem;
  padding-right: 0.625rem;
}

/* Forms - Critical fix for visibility */
#grid4-app-shell .form-control,
#grid4-app-shell input[type="text"],
#grid4-app-shell input[type="password"],
#grid4-app-shell input[type="email"],
#grid4-app-shell input[type="number"],
#grid4-app-shell input[type="tel"],
#grid4-app-shell input[type="url"],
#grid4-app-shell input[type="search"],
#grid4-app-shell select,
#grid4-app-shell textarea {
/*  background-color: var(--surface-primary-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--g4-radius-sm) !important;
  /* padding: 0.375rem 0.625rem !important; */
  font-size: var(--g4-font-size-base) !important;
  font-family: var(--g4-font-family) !important;
  line-height: 1.4 !important; /* Slightly reduced line-height */
  transition: all var(--g4-transition-fast) !important;
  /*height: auto !important; */
  min-width: auto !important;
  min-height: 1.05rem !important;
}

/* Fix icon overlap in input groups
#grid4-app-shell .input-append .add-on,
#grid4-app-shell .input-prepend .add-on {
  padding: 0.25rem 0.5rem !important;
  height: auto !important;
  min-height: 1.75rem !important;
  display: flex !important;
  align-items: center !important;
}
*/

#grid4-app-shell .input-append .add-on, #grid4-app-shell .input-prepend .add-on {
    padding: 0.25rem 0.25rem !important;
    height: auto !important;
    min-height: 1.25rem !important;
    display: inline-block !important;
    /* align-items: center !important; */
}
/* Remove duplicate icons in form fields */
#grid4-app-shell .control-group .fa:not(:first-of-type),
#grid4-app-shell .controls .fa:not(:first-of-type) {
  display: none !important;
}

#grid4-app-shell .form-control:focus,
#grid4-app-shell input:focus,
#grid4-app-shell select:focus,
#grid4-app-shell textarea:focus {
  border-color: var(--accent-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 0.1875rem rgba(0, 123, 255, 0.15) !important;
}

/* Specific fix for light theme inputs */
#grid4-app-shell.theme-light .form-control,
#grid4-app-shell.theme-light input,
#grid4-app-shell.theme-light select,
#grid4-app-shell.theme-light textarea {
  background-color: #ffffff !important;
  color: #212529 !important;
}

/* Dropdown/select options */
#grid4-app-shell select option {
  background-color: var(--surface-primary-bg) !important;
  color: var(--text-primary) !important;
}

/* Labels */
#grid4-app-shell label,
#grid4-app-shell .control-label {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  font-size: var(--g4-font-size-base) !important;
  margin-bottom: 0.1rem !important;
  align-content: flex-start !important;
}
div#options-basic-content {
    margin: 1rem !important;
}
/* Buttons */
#grid4-app-shell .btn {
  border-radius: var(--g4-radius-md) !important;
  font-weight: 600 !important;
  transition: all 150ms ease !important;
  text-shadow: none !important;
}

#grid4-app-shell .btn-primary {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
  background-image: none !important;
}
#grid4-app-shell .btn-primary:hover {
  background-color: var(--accent-secondary) !important;
  border-color: var(--accent-secondary) !important;
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.125rem 0.25rem var(--shadow-color);
}

#grid4-app-shell .btn-default,
#grid4-app-shell .btn-secondary {
  background-color: var(--surface-secondary-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  background-image: none !important;
}
#grid4-app-shell .btn-default:hover,
#grid4-app-shell .btn-secondary:hover {
  background-color: var(--border-color) !important;
  border-color: var(--text-secondary) !important;
}

/* Links */
#grid4-app-shell a {
  color: var(--accent-primary);
}
#grid4-app-shell a:hover {
  color: var(--accent-secondary);
}

/* Headings */
#grid4-app-shell h1,
#grid4-app-shell h2,
#grid4-app-shell h3,
#grid4-app-shell h4,
#grid4-app-shell h5,
#grid4-app-shell h6 {
  color: var(--text-primary) !important;
      padding: .25rem;
}

/* Alerts */
#grid4-app-shell .alert {
    border-radius: var(--g4-radius-md);
    color: #ab3630;
    background-color: var(--accent-secondary);
    font-size: .825rem;
    font-weight: 600;
    border: 1px solid var(--border-color) !important;
}

/* Blue Banner Buttons - Special case for masquerade mode */
#grid4-app-shell .ns-masquerade-banner .btn,
#grid4-app-shell .notification-banner .btn,
#grid4-app-shell div[style*="background-color: rgb(91, 192, 222)"] .btn,
#grid4-app-shell .alert-info .btn {
  background-color: #6f42c1 !important;
  border-color: #5a32a3 !important;
  color: #ffffff !important;
  padding: 5px 5px !important;
}

/* Page Refresh Button (recreated in action-container-right) */
#grid4-app-shell .action-container-right #pageRefresh,
#grid4-app-shell #pageRefresh {
  /* Base button styling consistent with theme */
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 0.015rem !important;
  background: var(--accent-primary) !important;
  color: #fff !important;
  border: .9px solid var(--accent-primary) !important;
  border-radius: var(--g4-radius-md) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  padding: 4.5px 4.5px !important;
  font-weight: 600 !important;
  transition: all 150ms ease !important;
}

/* Hover state for refresh button */
#grid4-app-shell .action-container-right #pageRefresh:hover,
#grid4-app-shell #pageRefresh:hover {
  background: var(--accent-secondary) !important;
  border-color: var(--accent-secondary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 153, 255, 0.3) !important;
}

/* Active/pressed state */
#grid4-app-shell .action-container-right #pageRefresh:active,
#grid4-app-shell #pageRefresh:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Ensure refresh icon displays correctly */
#grid4-app-shell #pageRefresh .icon-refresh {
  /* Prevent global icon filters from affecting this specific icon */

  position: relative !important;
  top: 1px !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* Dark theme specific adjustments for refresh button */
#grid4-app-shell #pageRefresh .icon-refresh {
  /* Allow icon to inherit button's white text color in dark mode */
  color: white !important;
 filter: invert(1) brightness(2) !important;
}

/* Refresh button positioning - let it inherit container's layout */
#grid4-app-shell .action-container-right > #pageRefresh {
  /* Use inline-block for consistent alignment without forcing float behavior */
  display: inline-block !important;
}

/* Masquerade Button (recreated in user-edit form-actions) */
#grid4-app-shell #g4-masquerade-action-btn {
  /* Use secondary button styling to not compete with "Save" */
  background-color: var(--surface-secondary-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  padding: 6px 10px !important;
  margin-left: 0.5rem !important; /* Space from Save/Cancel */
  transition: all 150ms ease !important;
  position: relative !important;
  display: inline-block !important;
}

/* Style the nsicon inside the button */
#grid4-app-shell #g4-masquerade-action-btn .nsicon {
  margin-right: 5px !important;
  font-size: 14px !important;
}

/* Ensure nsicon font is loaded and displays correctly */
#grid4-app-shell #g4-masquerade-action-btn .nsicon-masquerade:before {
  content: "\e91f" !important; /* Unicode for masquerade icon */
}

/* Dark theme: Adjust icon color for visibility */
#grid4-app-shell.theme-dark #g4-masquerade-action-btn {
  color: #e9ecef !important;
}

#grid4-app-shell #g4-masquerade-action-btn:hover {
  background-color: var(--border-color) !important;
  border-color: var(--text-secondary) !important;
}

/* Dark theme hover state adjustment */
#grid4-app-shell.theme-dark #g4-masquerade-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ===================================
   7. DOMAIN/MASQUERADE BANNER POSITIONING
   =================================== */

/* DO NOT reposition the domain banner - let NetSapiens handle it */
/* Just style it nicely */
#domain-message .domain-message-container,
.fixed-container .alert,
.fixed-container .mask-bar {
  background: var(--surface-secondary-bg) !important;
  border: 1px !important;
  border-style: solid var(--border-color) !important;
  padding: 0px 5px !important;
  max-width: min-content !important;
  margin: -5px 0 !important;
  /* Keep domain message in background without explicit z-index */
  position: relative;
}

/* Style the domain message container */
#domain-message .domain-message-container {
  display: inline-flex !important;
/* align-items: flex-start !important; */
  flex-wrap: wrap !important;
  gap: 5px !important;
  max-width: min-content !important;

}

/* Ensure buttons and text are properly styled */
#domain-message .domain-message-buttons {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
}

#domain-message .domain-message-text {
  flex: 1 !important;
  text-align: center !important;
}

#domain-message h5 {
  /*margin: 0 !important;  */
  font-size: var(--g4-font-size-xs) !important;
  line-height: 1.5 !important;
}

/* Apply same styling to masquerade bar - match domain-message constraints */
/* Style the mask-container to match domain-message-container */
.mask-bar .mask-container {
  display: inline-flex !important;
  /*align-items: flex-start !important;  Match domain-message */
  flex-wrap: wrap !important; /* Match domain-message */
  gap: 5px !important; /* Match domain-message gap */
  max-width: min-content !important;
}

#grid4-app-shell .mask-bar .domain-message-text {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: var(--g4-font-size-xs) !important;
  white-space: nowrap !important;
}

#grid4-app-shell .mask-bar .btn {
  margin: 0 !important;
  padding: 5px 10px !important;
  font-size: var(--g4-font-size-sm) !important;
  white-space: nowrap !important;
  position: relative !important;
  top: -5px !important;
}

#grid4-app-shell .mask-bar .mask-container .domain-message-text .nsicon,
#grid4-app-shell .mask-bar .mask-container .domain-message-text .banner-text {
  position: relative !important;
  top: -5px !important;
}

/* Content will get dynamic padding via JavaScript */
#grid4-app-shell #content {
  transition: padding-top 0.3s ease; /* Smooth transition */
}

/* Modals (Themed via JS class injection) */
.modal.g4-themed,
.modal.theme-dark,
.modal.theme-light {
  --modal-bg: var(--surface-primary-bg);
  --modal-header-bg: var(--surface-secondary-bg);
  --modal-text: var(--text-primary);
  --modal-border: var(--border-color);
}

/* Dark theme modal adjustments */
.modal.g4-themed.theme-dark,
.modal.theme-dark,
body.theme-dark .modal {
  --modal-bg: #222;
  --modal-header-bg: #222;
  --modal-text: #e9ecef;
  --modal-border: rgba(255, 255, 255, 0.1);
  background: #222 !important;
}

/* Light theme modal adjustments */
.modal.g4-themed.theme-light,
.modal.theme-light,
body.theme-light .modal {
  --modal-bg: #ffffff;
  --modal-header-bg: #f8f9fa;
  --modal-text: #212529;
  --modal-border: #dee2e6;
}

/* Apply theme styles to all modals based on body theme class */
/* Override basicCSS.php white background on .modal */
body.theme-dark .modal {
  background: #222 !important; /* Dark background for dark theme */
  background-color: #333 !important;
  color: var(--modal-text) !important;
}

/* Override with more specific selectors to beat basicCSS.php */
body.theme-dark .modal.fade,
body.theme-dark .modal.in,
body.theme-dark .modal.fade.in {
  background: #222 !important;
  background-color: #222 !important;
}

/* Ensure light theme modals stay white */
body.theme-light .modal {
  background: white !important;
  background-color: white !important;
}

/* Override NetSapiens basic.css with maximum specificity */
body.theme-dark .modal .modal-content,
body.theme-dark .modal.in .modal-content,
body.theme-dark .modal.fade.in .modal-content,
body.theme-dark div.modal.in .modal-content,
body.theme-dark .modal-dialog .modal-content,
body.theme-dark .modal.in .modal-dialog .modal-content {
  background: #242b3a !important;
  background-color: #242b3a !important;
  color: #e9ecef !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  opacity: 1 !important;
}

body.theme-dark .modal .modal-header,
body.theme-dark .modal .modal-footer {
  background-color: var(--modal-header-bg) !important;
  border-color: var(--modal-border) !important;
  color: var(--modal-text) !important;
}

/* Light theme modals should have solid white background */
body.theme-light .modal .modal-content {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #dee2e6 !important;
  opacity: 1 !important;
}

/* Theme-specific g4-themed modal content */
body.theme-dark .modal.g4-themed .modal-content {
  background-color: var(--modal-bg) !important;
  color: var(--modal-text) !important;
  border: 1px solid var(--modal-border) !important;
}

body.theme-light .modal.g4-themed .modal-content {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #dee2e6 !important;
}
/* Theme-specific g4-themed modal header/footer */
body.theme-dark .modal.g4-themed .modal-header,
body.theme-dark .modal.g4-themed .modal-footer {
  background-color: var(--modal-header-bg) !important;
  border-color: var(--modal-border) !important;
}

body.theme-light .modal.g4-themed .modal-header,
body.theme-light .modal.g4-themed .modal-footer {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
}
/* Theme-specific text colors */
body.theme-dark .modal.g4-themed .modal-header h3,
body.theme-dark .modal.g4-themed .modal-header h4,
body.theme-dark .modal.g4-themed .modal-header .modal-title {
  color: var(--modal-text) !important;
}

body.theme-light .modal.g4-themed .modal-header h3,
body.theme-light .modal.g4-themed .modal-header h4,
body.theme-light .modal.g4-themed .modal-header .modal-title {
  color: #212529 !important;
}

body.theme-dark .modal.g4-themed .close {
  color: var(--modal-text) !important;
  opacity: 0.6;
}

body.theme-light .modal.g4-themed .close {
  color: #212529 !important;
  opacity: 0.6;
}

.modal.g4-themed .close:hover {
  opacity: 1;
}
/* Enhanced form elements in modals - Dark theme */
body.theme-dark .modal.g4-themed .form-control,
body.theme-dark .modal.g4-themed input[type="text"],
body.theme-dark .modal.g4-themed input[type="password"],
body.theme-dark .modal.g4-themed input[type="email"],
body.theme-dark .modal.g4-themed input[type="number"],
body.theme-dark .modal.g4-themed input[type="tel"],
body.theme-dark .modal.g4-themed input[type="search"],
body.theme-dark .modal.g4-themed input[type="url"],
body.theme-dark .modal.g4-themed input[type="date"],
body.theme-dark .modal.g4-themed input[type="time"],
body.theme-dark .modal.g4-themed input[type="datetime-local"],
body.theme-dark .modal.g4-themed select,
body.theme-dark .modal.g4-themed textarea {
  background-color: var(--surface-secondary-bg) !important;
  color: var(--modal-text) !important;
  border: 1px solid var(--modal-border) !important;
  padding: 8px 12px !important;
  line-height: 1.5 !important;
  height: auto !important;
/*  min-height: 34px !important; */
}

/* Enhanced form elements in modals - Light theme */
body.theme-light .modal.g4-themed .form-control,
body.theme-light .modal.g4-themed input[type="text"],
body.theme-light .modal.g4-themed input[type="password"],
body.theme-light .modal.g4-themed input[type="email"],
body.theme-light .modal.g4-themed input[type="number"],
body.theme-light .modal.g4-themed input[type="tel"],
body.theme-light .modal.g4-themed input[type="search"],
body.theme-light .modal.g4-themed input[type="url"],
body.theme-light .modal.g4-themed input[type="date"],
body.theme-light .modal.g4-themed input[type="time"],
body.theme-light .modal.g4-themed input[type="datetime-local"],
body.theme-light .modal.g4-themed select,
body.theme-light .modal.g4-themed textarea {
  background-color: #ffffff !important;
  color: #212529 !important;
  border: 1px solid #ced4da !important;
  padding: 8px 12px !important;
  line-height: 1.5 !important;
  height: auto !important;
/*  min-height: 34px !important; */
}

/* Fix select dropdown text cutoff */
/* body.theme-dark .modal.g4-themed select,
body.theme-light .modal.g4-themed select {
  padding-right: 30px !important;
} */

/* Fix input text overflow */
body.theme-dark .modal.g4-themed input,
body.theme-dark .modal.g4-themed textarea,
body.theme-light .modal.g4-themed input,
body.theme-light .modal.g4-themed textarea {
  overflow: visible !important;
  text-overflow: ellipsis !important;
}

/* Focus states - Dark theme */
body.theme-dark .modal.g4-themed input:focus,
body.theme-dark .modal.g4-themed textarea:focus,
body.theme-dark .modal.g4-themed select:focus {
  background-color: var(--surface-primary-bg) !important;
  border-color: var(--accent-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 0.125rem rgba(var(--accent-primary-rgb), 0.25) !important;
}

/* Focus states - Light theme */
body.theme-light .modal.g4-themed input:focus,
body.theme-light .modal.g4-themed textarea:focus,
body.theme-light .modal.g4-themed select:focus {
  background-color: #ffffff !important;
  border-color: #0099ff !important;
  outline: none !important;
  box-shadow: 0 0 0 0.125rem rgba(0, 153, 255, 0.25) !important;
}

/* Keep specific-date datepair controls aligned and themed */
#grid4-app-shell .modal.g4-themed .date-picker-pair {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  width: 96%;
  padding:unset !important;
}

#grid4-app-shell .modal.g4-themed .date-picker-pair .time-input-row-sd {
  /* display: flex; */
  flex-wrap: wrap;
  align-items: center;

}
#grid4-app-shell .modal.g4-themed .date-of-day {
    width: 88px !important;
}
.form-horizontal .controls {
    margin-left: 180px;
    width: auto;
}

body.theme-dark .modal.g4-themed .date-picker-pair {
  background-color: var(--modal-bg) !important;

}
/* Modal labels and help text */
.modal.g4-themed label {
  color: var(--modal-text) !important;
  font-weight: 500;
  background: none !important;
  background-color: transparent !important;
}
/* Removed - see Section 28 for theme-specific help text colors */

/* Fix form group backgrounds in modals */
.modal.g4-themed .form-group,
.modal.g4-themed .form-horizontal .control-group {
  background: none !important;
  background-color: transparent !important;
}

/* Modal form field fixes */
.modal.g4-themed input,
.modal.g4-themed select,
.modal.g4-themed textarea {
/*  padding: 1px 2px !important; */
  /* line-height: 1.4 !important; */
  /*height: auto !important; */
  min-height: 1rem !important;
}

/* Ensure modal buttons are clickable */
.modal.g4-themed .btn {
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
}

/* Fix modal form labels */
.modal.g4-themed .control-label {
  color: var(--modal-text) !important;
  background: none !important;
  background-color: transparent !important;
}

/* Fix all form labels in modals for dark theme */
.modal.g4-themed.theme-dark .control-label,
.modal.theme-dark .control-label,
body.theme-dark .modal .control-label,
.modal.g4-themed .form-group label,
.modal.g4-themed label.control-label {
  background: none !important;
  background-color: transparent !important;
  color: var(--modal-text) !important;
}

/* Ensure all modal content is interactive */
.modal.g4-themed * {
  pointer-events: auto !important;
}

/* ===================================
   6. HOME PAGE SPECIFIC FIXES
   =================================== */

/* Fix home page panels and widgets */
#grid4-app-shell .home-panel-main,
#grid4-app-shell .omp-home,
#grid4-app-shell .home-content,
#grid4-app-shell .active-panel-home,
#grid4-app-shell .graphs-panel-home,
#grid4-app-shell .stats-panel-home {
  background-color: var(--app-bg) !important;
  color: var(--text-primary) !important;
}

/* Fix widget backgrounds */
#grid4-app-shell .rounded,
#grid4-app-shell .active-panel-home-meetings,
#grid4-app-shell .chart-container {
  background-color: var(--surface-primary-bg) !important;
  /*border: 2px solid  var(--border-color) !important; */
  border-radius: var(--g4-radius-lg) !important;
  padding: .1rem !important;
  margin-bottom: .1rem !important;
  /* margin-right: .15rem !important; */
}
#grid4-app-shell .second-chart {
    float: left;
    width: 49%;
}
/* Fix stats tables */
#grid4-app-shell .stats-table,
#grid4-app-shell .usage-stats-table {
  color: var(--text-primary) !important;
}

#grid4-app-shell .stats-table td,
#grid4-app-shell .usage-stats-table td {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

#agent-callgraphs-body
 {
    min-height: 475px !important;

 }

/* Fix any remaining text contrast issues */
#grid4-app-shell span,
#grid4-app-shell p,
#grid4-app-shell div {
  /* color: inherit; */
}

/* Ensure all text in light theme is dark */
#grid4-app-shell.theme-light * {
  color: var(--text-primary);
}

/* Light theme specific enhancements */
#grid4-app-shell.theme-light #navigation {
  box-shadow: 0.125rem 0 0.75rem rgba(0, 0, 0, 0.08);
}

#grid4-app-shell.theme-light #header {
  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.08);
}

#grid4-app-shell.theme-light .nav-link:hover {
  background-color: var(--accent-primary);
  color: #ffffff !important;
}

#grid4-app-shell.theme-light .nav-link:hover .fa,
#grid4-app-shell.theme-light .nav-link:hover .nav-text {
  color: #ffffff !important;
}

#grid4-app-shell.theme-light #grid4-theme-toggle {
  border-color: #dee2e6;
  color: #495057;
}

#grid4-app-shell.theme-light #grid4-theme-toggle:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* But preserve specific colors for certain elements */
/* Old (too specific) */
/* #grid4-app-shell a:not(.nav-link):not(.btn):not(.label):not(#LinkPager50):not(#LinkPager25):not(#LinkPager100):not(li.active a) {
  color: var(--accent-primary) !important;
} */

/* New: same behavior, but only 1 ID specificity */
#grid4-app-shell a:not(.nav-link, .btn, .label, [id^="LinkPager"], li.active a) {
  color: var(--accent-primary) !important;
}
/* Fix nav tabs visibility */
#grid4-app-shell .nav-tabs {
  background-color: transparent !important;
  border-bottom: 2px solid var(--border-color) !important;
  margin-bottom: 1px !important;
}

#grid4-app-shell .nav-tabs > li {
  margin-bottom: -2px !important;
}

#grid4-app-shell .nav-tabs > li > a {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  border: 2px solid #868585 !important;
  border-radius: var(--g4-radius-sm) var(--g4-radius-sm) 0 0 !important;
  padding: 10px 20px !important;
  margin-right: 4px !important;
  transition: all var(--g4-transition-fast) !important;
  border-color: var(--border-color)  !important;
}

#grid4-app-shell .nav-tabs > li > a:hover {
  background-color: var(--surface-secondary-bg) !important;
  border-color: var(--border-color) var(--border-color) transparent !important;
  color: var(--text-primary) !important;
}

#grid4-app-shell .nav-tabs > li  {
    background-color: var(--surface-secondary-bg) !important;
    border-color: var(--border-color) var(--border-color) transparent !important;
    color: var(--text-primary) !important;
}

#grid4-app-shell .nav-tabs > li.active > a,
#grid4-app-shell .nav-tabs > li.active > a:hover,
#grid4-app-shell .nav-tabs > li.active > a:focus {
  color: var(--text-primary) !important;
  background-color: var(--surface-primary-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-bottom-color: var(--surface-primary-bg) !important;
  font-weight: 600 !important;
}

/* Fix pagination */
#grid4-app-shell .pagination li a,
#grid4-app-shell .pagination li span {
  background-color: var(--surface-primary-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

#grid4-app-shell .pagination li.active a,
#grid4-app-shell .pagination li.active span {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #ffffff !important;
}

#grid4-app-shell .pagination li a:hover {
  background-color: var(--surface-secondary-bg) !important;
  color: var(--accent-primary) !important;
}

/* ===================================
   8. TABLE HEADER FIXES
   =================================== */

/* Fix table headers - remove background per user preference */
#grid4-app-shell .table > thead > tr > th,
#grid4-app-shell table.table > thead > tr > th {
  /*background-color: transparent !important; */
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  font-weight: 600 !important;
 padding: 5px 5px !important;
  white-space: nowrap;
}

/* Ensure header text and links are visible */
#grid4-app-shell .table > thead > tr > th,
#grid4-app-shell .table > thead > tr > th *,
#grid4-app-shell .table > thead > tr > th a {
  color: var(--text-primary) !important;
}

/* Sortable headers with proper styling */
#grid4-app-shell .table > thead > tr > th > a,
#grid4-app-shell .table > thead > tr > th.sortable > a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600 !important;
}

#grid4-app-shell .table > thead > tr > th > a:hover {
  color: var(--accent-primary) !important;
  text-decoration: underline !important;
}

/* Hide duplicate icons - NetSapiens adds their own */
#grid4-app-shell .table > thead > tr > th > a > i.fa,
#grid4-app-shell .table > thead > tr > th > a > .fa {
  display: none !important;
}

/* Sort indicators */
#grid4-app-shell .table > thead > tr > th > a.asc::after,
#grid4-app-shell .table > thead > tr > th > a.desc::after {
  font-family: 'FontAwesome';
  font-size: 12px;
  vertical-align: middle;
}

a.asc {
    background: unset;
}
a.desc {
    background: unset;
}

#grid4-app-shell .table > thead > tr > th > a.asc::after {
  content: "\f0d8"; /* fa-caret-up */
}

#grid4-app-shell .table > thead > tr > th > a.desc::after {
  content: "\f0d7"; /* fa-caret-down */
}

/* ===================================
   9. COLOR-PRIMARY BUTTON FIX
   =================================== */

/* Override .color-primary buttons to use theme colors */
#grid4-app-shell .btn.color-primary,
#grid4-app-shell a.btn.color-primary,
#grid4-app-shell input.btn.color-primary,
#grid4-app-shell button.btn.color-primary,
#grid4-app-shell .btn.helpsy.color-primary,
#grid4-app-shell input[type="submit"].btn.color-primary {
  background: var(--accent-primary) !important;
  background-image: none !important;
  background-color: var(--accent-primary) !important;
  color: #ffffff !important;
  font-weight: bold !important;
  border: 1px solid var(--accent-primary) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: all var(--g4-transition-fast) !important;
}

#grid4-app-shell .btn.color-primary:hover,
#grid4-app-shell a.btn.color-primary:hover,
#grid4-app-shell input.btn.color-primary:hover,
#grid4-app-shell button.btn.color-primary:hover {
  background: var(--accent-secondary) !important;
  background-image: none !important;
  border-color: var(--accent-secondary) !important;
  color: #ffffff !important;
  box-shadow: 0 0.125rem 0.25rem var(--shadow-color) !important;
}

#grid4-app-shell .btn.color-primary:active,
#grid4-app-shell .btn.color-primary:focus {
  background: var(--accent-secondary) !important;
  box-shadow: 0 0 0 0.1875rem rgba(var(--accent-primary-rgb), 0.25) !important;
}

/* ===================================
   10. MODERN ENHANCEMENTS
   =================================== */

/* Smooth focus transitions for better UX */
#grid4-app-shell *:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--g4-radius-sm);
}

/* Better table responsiveness */
#grid4-app-shell .table-responsive {
  border-radius: var(--g4-radius-md);
  border: 2px solid var(--border-color);
  overflow: hidden;
}

/* Modern card-like panels with subtle depth */
#grid4-app-shell .panel {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#grid4-app-shell .panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.75rem var(--shadow-color);
}

/* Animated hover states for interactive elements */
#grid4-app-shell .btn,
#grid4-app-shell .nav-link,
#grid4-app-shell .clickable {
  position: relative;
  overflow: hidden;
}

#grid4-app-shell .btn::after,
#grid4-app-shell .nav-link::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 20%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

#grid4-app-shell .btn:active::after,
#grid4-app-shell .nav-link:active::after {
  width: 300px;
  height: 300px;
}

/* Improved scrollbar design */
#grid4-app-shell *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#grid4-app-shell *::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px;
}

#grid4-app-shell *::-webkit-scrollbar-thumb {
  background-color: var(--text-muted);
  border-radius: 3px;
  opacity: 0.5;
}

#grid4-app-shell *:hover::-webkit-scrollbar-thumb {
  opacity: 0.8;
}

/* Modern skeleton loading states */
@keyframes skeleton-loading {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

#grid4-app-shell .skeleton-loading {
  background: linear-gradient(90deg,
    var(--surface-secondary-bg) 25%,
    var(--border-color) 50%,
    var(--surface-secondary-bg) 75%
  );
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* ===================================
   10. RESPONSIVE DESIGN
   =================================== */

/* Responsive adjustments */
@media (max-width: 768px) {
  #grid4-app-shell #navigation {
    transform: translateX(-100%);
    transition: transform var(--g4-transition-normal);
  }
  #grid4-app-shell #navigation.mobile-open {
    transform: translateX(0);
  }
  #grid4-app-shell #content {
    margin-left: 0 !important;
  }
}

/* Print styles */
@media print {
  #grid4-app-shell #navigation,
  #grid4-app-shell #header {
    display: none !important;
  }
  #grid4-app-shell #content {
    margin-left: 0 !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  #grid4-app-shell {
    --border-color: currentColor !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #grid4-app-shell * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ===================================
   11. ENHANCED UI ELEMENTS
   =================================== */

/* Glass-morphism effects for panels and modals */
#grid4-app-shell .panel,
#grid4-app-shell .modal-content,
#grid4-app-shell .rounded {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Dark theme glass effect */
#grid4-app-shell.theme-dark .panel,
#grid4-app-shell.theme-dark .modal-content,
#grid4-app-shell.theme-dark .rounded {
  background: rgba(var(--surface-primary-rgb), 0.85) !important;
  border: 4px solid rgba(255, 255, 255, 0.1);
}

/* Light theme glass effect - higher opacity for better readability */
#grid4-app-shell.theme-light .panel,
#grid4-app-shell.theme-light .modal-content,
#grid4-app-shell.theme-light .rounded {
  background: rgba(var(--surface-primary-rgb), 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Glass effect for dropdown menus */
#grid4-app-shell .dropdown-menu {
  background: rgba(var(--surface-secondary-rgb), 0.95) !important;
  /* backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fix dropdown styling - removed hover activation to match portal default */
/* #grid4-app-shell .dropdown-menu {
  margin-top: -1px !important; /* Remove gap between trigger and menu
} */

#grid4-app-shell .btn-group.open .dropdown-menu,
#grid4-app-shell .dropdown.open .dropdown-menu {
  display: block !important;
}

/* Enhanced table styling with spacing */
#grid4-app-shell table.table {
  border-collapse: separate !important;
  border-spacing: unset !important;
  background-color: var(--app-bg) !important;


}

#grid4-app-shell .table tbody tr {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

#grid4-app-shell .table tbody tr:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Icon sprite integration */
#grid4-app-shell [class^="icon-"]
/* #grid4-app-shell [class*=" icon-"] {
  background-image: url('https://ambitious-coast-0a8b2110f.1.azurestaticapps.net/reference/css/icons/light-glyphicons-halflings.png') !important;
} */

/* Extension number badges */
.extension-badge {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('https://ambitious-coast-0a8b2110f.1.azurestaticapps.net/reference/css/icons/light-aa-icons.png');
  background-size: 480px 120px;
  vertical-align: middle;
}

.extension-badge-1 { background-position: 0 0; }
.extension-badge-2 { background-position: -24px 0; }
.extension-badge-3 { background-position: -48px 0; }
.extension-badge-4 { background-position: -72px 0; }
.extension-badge-5 { background-position: -96px 0; }
.extension-badge-6 { background-position: -120px 0; }
.extension-badge-7 { background-position: -144px 0; }
.extension-badge-8 { background-position: -168px 0; }
.extension-badge-9 { background-position: -192px 0; }
.extension-badge-0 { background-position: -216px 0; }

/* Smooth rounded corners */
#grid4-app-shell .panel,
#grid4-app-shell .modal-content,
#grid4-app-shell .dropdown-menu,
#grid4-app-shell .btn,
#grid4-app-shell .form-control,
#grid4-app-shell .table tbody tr {
  border-radius: 12px !important;
}

#grid4-app-shell .table tbody tr td:first-child {
  border-radius: 12px 0 0 12px !important;
}

#grid4-app-shell .table tbody tr td:last-child {
  border-radius: 0 12px 12px 0 !important;
}

/* Enhanced form elements */
#grid4-app-shell input[type="checkbox"],
#grid4-app-shell input[type="radio"] {
  accent-color: var(--accent-primary);
  width: .6rem;
  height: .6rem;
  cursor: pointer;
  margin-right: 8px;
}

/* Enhanced select dropdowns */
/* #grid4-app-shell select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px !important;
} */
/*
#grid4-app-shell.theme-dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
} */

/* Animated loading states */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

#grid4-app-shell .loading {
  position: relative;
  overflow: hidden;
}

#grid4-app-shell .loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--accent-primary-rgb), 0.2) 50%,
    transparent 100%
  );
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Enhanced pagination */
#grid4-app-shell .pagination {
  gap: 4px;
  display: flex;
}

#grid4-app-shell .pagination li {
  margin: 0;
}

#grid4-app-shell .pagination li a,
#grid4-app-shell .pagination li span {
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-weight: 500;
  transition: all 0.2s ease;
}

#grid4-app-shell .pagination li:hover a {
  transform: translateY(-2px);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Status indicators */
.status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}

.status-indicator.online {
  background: #28a745;
  box-shadow: 0 0 0 0.1875rem rgba(40, 167, 69, 0.2);
}

.status-indicator.busy {
  background: #dc3545;
  box-shadow: 0 0 0 0.1875rem rgba(220, 53, 69, 0.2);
}

.status-indicator.away {
  background: #ffc107;
  box-shadow: 0 0 0 0.1875rem rgba(255, 193, 7, 0.2);
}

/* Pulse animation for online status */
.status-indicator.online::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: #28a745;
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Enhanced scrollbar */
#grid4-app-shell *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#grid4-app-shell *::-webkit-scrollbar-corner {
  background: transparent;
}

/* Remove custom tooltip - let browser handle native tooltips */

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===================================
   12. FORM ACTIONS FIX
   =================================== */

/* Fix form-actions/affix-form-actions styling */
#grid4-app-shell .form-actions,
#grid4-app-shell .affix-form-actions {
  background-color: var(--surface-secondary-bg) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 15px 20px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Ensure consistent width when affixed */
#grid4-app-shell .affix-form-actions[style*="position: fixed"],
#grid4-app-shell .affix-form-actions[style*="position: absolute"] {
  left: 20% !important;
  right: 0 !important;
  width: 65% !important;
}

/* Fix button styling within form-actions */
#grid4-app-shell .form-actions .btn,
#grid4-app-shell .affix-form-actions .btn {
  margin: 0 !important;
}

#grid4-app-shell .form-actions .back-btn,
#grid4-app-shell .affix-form-actions .back-btn {
  margin-left: auto !important;
}

/* ===================================
   13. ADDITIONAL BUTTON FIXES
   =================================== */

/* Catch all buttons that might not have color-primary class */
#grid4-app-shell .btn:not(.btn-default):not(.btn-secondary):not(.btn-link):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-info):not(.cancel):not(.back-btn) {
  background: var(--accent-primary) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--accent-primary) !important;
  text-shadow: none !important;
}

#grid4-app-shell .btn:not(.btn-default):not(.btn-secondary):not(.btn-link):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-info):not(.cancel):not(.back-btn):hover {
  background: var(--accent-secondary) !important;
  border-color: var(--accent-secondary) !important;
}

/* Specific fixes for Columns and Import buttons */
#grid4-app-shell .btn[value="Columns"],
#grid4-app-shell .btn[value="Import"],
#grid4-app-shell .btn.helpsy,
#grid4-app-shell button.btn:contains("Columns"),
#grid4-app-shell button.btn:contains("Import") {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent-primary) !important;
}

/* Make the destructive Reset User action stand out */
#grid4-app-shell button#ButtonResetUser.btn.helpsy {
  background: #c43c3c !important;
  border-color: #c43c3c !important;
}

#grid4-app-shell button#ButtonResetUser.btn.helpsy:hover,
#grid4-app-shell button#ButtonResetUser.btn.helpsy:focus {
  background: #a92f2f !important;
  border-color: #a92f2f !important;
}

/* ===================================
   14. THEME SWITCHING SMOOTH TRANSITIONS
   =================================== */

/* Ensure full viewport theme switching */
body,
html {
  background-color: var(--app-bg) !important;
  transition: background-color var(--g4-transition-normal);
}

/* Fix any elements that might extend beyond the shell */
#grid4-app-shell {
  position: relative;
  z-index: auto; /* Changed from 1 to auto to not interfere with modals */
  /*overflow-x: hidden;*/
}

/* Smooth theme transitions */
body[data-theme-transitioning="true"] * {
  transition: background-color 300ms ease, color 300ms ease !important;
}

/* ===================================
   15. GLASSMORPHISM ENHANCEMENTS
   =================================== */

/* Glass effect for dropdowns and modals */
#grid4-app-shell .dropdown-menu {
  /* backdrop-filter: blur(12px); */
  /* -webkit-backdrop-filter: blur(12px); */
  background: rgba(var(--surface-primary-rgb), 1) !important;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
}

#grid4-app-shell.theme-light .dropdown-menu {
  background: rgba(0, 0, 0, 0.95) !important;
  border: 2px solid rgba(55, 55, 55, 0.683);
}

/* Modal fixes - use Bootstrap's default positioning */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1040 !important;
  background-color: #000 !important;
}

.modal-backdrop.fade {
  opacity: 0 !important;
}

.modal-backdrop.in {
  opacity: 0.5 !important;
}

/* Let Bootstrap handle ALL modal positioning and animations */

.modal-content {
  position: relative !important;
  /* Let theme-specific rules handle background color */
  border: 2px solid rgba(0,0,0,.2) !important;
  border-radius: 6px !important;
  outline: 0 !important;
  pointer-events: auto !important;
  box-shadow: 0 0.1875rem 0.5625rem rgba(0,0,0,.5) !important;
  opacity: 1 !important; /* Ensure not transparent */
}

/* Dark theme modal content - High priority override */
body.theme-dark .modal-content,
.theme-dark .modal-content,
.modal.theme-dark .modal-content,
#grid4-app-shell.theme-dark ~ .modal .modal-content {
  background-color: var(--modal-bg) !important;
  border: 2px solid rgba(255,255,255,.2) !important;
  color: #e9ecef !important;
}

/* Light theme modal content - Explicit white background */
body.theme-light .modal-content {
  background-color: #ffffff !important;
  border: 2px solid rgba(0,0,0,.2) !important;
  color: #212529 !important;
}

/* Ensure modal content is not affected by shell styles */
.modal.g4-themed .modal-content,
.modal .modal-content {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  /* Remove forced white background - let theme rules handle it */
}

/* Override any transparent backgrounds on modals - respect theme */
body.theme-light .modal-content[style*="transparent"] {
  background-color: #ffffff !important;
}

body.theme-dark .modal-content[style*="transparent"] {
  background-color: #242b3a !important;
}
/* Force opaque backgrounds on all modal elements */
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.dash-modal .modal-content,
#grid4-app-shell .modal-content,
body .modal .modal-content {
  opacity: 1 !important;
  background-color: var(--modal-bg) !important;
}

/* Fix modal display - let Bootstrap handle display states */
/* Removed .modal { display: none; } - this was breaking Bootstrap's show/hide mechanism */

/* Ensure modals are visible when shown */
.modal.in {
  display: block !important;
}

/* Removed conflicting fade and positioning rules - handled in Section 23 */

/* Backdrop handled by earlier rules at line 1644 */

/* Ensure modal elements are interactive */
.modal {
  pointer-events: auto !important;
}
.modal .modal-dialog,
.modal .modal-content,
.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
  pointer-events: auto !important;
}




/* Override any transform issues */
.modal-open .modal {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Ensure modal scrolling works */
.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Override any app shell styles that might interfere */
body.modal-open {
  overflow: hidden !important;
}

/* Remove pointer-events manipulation - it breaks modal interaction */
/* Let Bootstrap handle modal stacking naturally */

/* Modal Fix - Remove ALL positioning overrides, let Bootstrap handle it */
/* Only apply theming, no positioning changes */

/* Ensure proper z-index stacking for modals - Bootstrap default*/
/*
.modal-backdrop {
  z-index: 1040 !important;  Bootstrap default
} */

.modal {
  z-index: 1050 !important; /* Bootstrap default */
}

/* Don't modify domain message z-index - let NetSapiens handle it */

/* Let Bootstrap handle modal z-index stacking */

/* Enhanced form-actions with glass effect */
#grid4-app-shell .form-actions,
#grid4-app-shell .affix-form-actions {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(var(--surface-secondary-rgb), 0.8) !important;
}

/* ===================================
   16. CONTEXT-AWARE STYLING
   =================================== */

/* Page-specific enhancements */
body.page-users #grid4-app-shell .table-container {
  max-width: 100%;
  padding-right: 20px;
}

body.page-domains #grid4-app-shell .panel {
  border-color: var(--accent-primary);
}

body.page-agents #grid4-app-shell .status-indicator {
  animation: pulse 2s infinite;
}

/* ===================================
   17. ENHANCED ANIMATIONS
   =================================== */

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Smooth height transitions for collapsibles */
.collapsing {
  transition: height 0.35s ease;
}

/* Button ripple effect */
#grid4-app-shell .btn {
  position: relative;
  overflow: hidden;
}

#grid4-app-shell .btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 20%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

#grid4-app-shell .btn:active::before {
  width: 300px;
  height: 300px;
}

/* ===================================================================
   16. COMPREHENSIVE MODAL THEMING FIX (v5.0.11 - 2025-01-02)
   =================================================================== */

/* CRITICAL: Precise selectors for NetSapiens modal theming
   - Handles both Bootstrap 3 modals and jQuery UI dialogs
   - Respects positioning (let Bootstrap/jQuery UI handle it)
   - Focus on theming only
   - High specificity to override NetSapiens defaults */

/* --- DARK THEME MODAL BACKGROUNDS --- */
/* Bootstrap Modals - Ultra High Specificity */
/* Standard selectors */
body.theme-dark .modal .modal-content,
body.theme-dark .modal-dialog .modal-content,
body.theme-dark .modal.fade .modal-content,
body.theme-dark .modal.fade.in .modal-content,
body.theme-dark .modal.in .modal-content,
/* Modals outside app shell */
#grid4-app-shell.theme-dark ~ .modal .modal-content,
#grid4-app-shell.theme-dark ~ .modal-backdrop ~ .modal .modal-content,
/* Direct child modals */
body.theme-dark > .modal .modal-content,
body.theme-dark > .modal-backdrop ~ .modal .modal-content,
/* Any modal anywhere when body has theme-dark */
body.theme-dark .modal-content {
  background-color: #242b3a !important;
  color: #e9ecef !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.8) !important;
}

/* jQuery UI Dialogs */
body.theme-dark .ui-dialog,
body.theme-dark .ui-dialog-content,
body.theme-dark .ui-widget-content {

  color: #e9ecef !important;
  border-color: rgba(255, 255, 255, 0.1) !important;

  background-color: #222 !important;
  background: unset !important;
  background: #222 !important;
}

/* Modal Headers */
body.theme-dark .modal-header,
body.theme-dark .ui-dialog-titlebar {
  background-color: #1e2736 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  color: #e9ecef !important;
}

/* Modal Footers */
body.theme-dark .modal-footer,
body.theme-dark .ui-dialog-buttonpane {
  background-color: #1e2736 !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- FORM ELEMENTS IN DARK THEME MODALS --- */
/* All input types */
body.theme-dark .modal input[type="text"],
body.theme-dark .modal input[type="email"],
body.theme-dark .modal input[type="password"],
body.theme-dark .modal input[type="number"],
body.theme-dark .modal input[type="tel"],
body.theme-dark .modal input[type="url"],
body.theme-dark .modal input[type="search"],
body.theme-dark .modal input[type="date"],
body.theme-dark .modal input[type="time"],
body.theme-dark .modal input[type="datetime-local"],
body.theme-dark .modal textarea,
body.theme-dark .modal select,
body.theme-dark .ui-dialog input[type="text"],
body.theme-dark .ui-dialog input[type="email"],
body.theme-dark .ui-dialog input[type="password"],
body.theme-dark .ui-dialog input[type="number"],
body.theme-dark .ui-dialog input[type="tel"],
body.theme-dark .ui-dialog textarea,
body.theme-dark .ui-dialog select {
  background-color: #1a2332 !important;
  color: #e9ecef !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Focus states */
body.theme-dark .modal input:focus,
body.theme-dark .modal textarea:focus,
body.theme-dark .modal select:focus,
body.theme-dark .ui-dialog input:focus,
body.theme-dark .ui-dialog textarea:focus,
body.theme-dark .ui-dialog select:focus {
  background-color: #1e2736 !important;
  border-color: #00d4ff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2) !important;
}

/* --- LABELS AND TEXT IN DARK THEME --- */
/* Force transparent backgrounds on ALL labels */
body.theme-dark .modal label,
body.theme-dark .modal .control-label,
body.theme-dark .modal .form-label,
body.theme-dark .ui-dialog label,
body.theme-dark .ui-dialog .control-label {
  background-color: transparent !important;
  background: transparent !important;
  color: #b0bec5 !important;
}

/* Radio and checkbox labels */
body.theme-dark .modal .radio label,
body.theme-dark .modal .checkbox label,
body.theme-dark .ui-dialog .radio label,
body.theme-dark .ui-dialog .checkbox label {
  background-color: transparent !important;
  color: #b0bec5 !important;
}

/* Help text and descriptions */
body.theme-dark .modal .help-block,
body.theme-dark .modal .help-inline,
body.theme-dark .modal .form-text,
body.theme-dark .modal small,
body.theme-dark .ui-dialog .help-block,
body.theme-dark .ui-dialog .help-inline {
  color: #78909c !important;
  background-color: transparent !important;
}

/* --- LIGHT THEME MODAL CONSISTENCY --- */
/* Ensure light theme has proper white backgrounds */
body.theme-light .modal .modal-content {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

body.theme-light .modal-header {
  background-color: #f8f9fa !important;
  border-bottom-color: #dee2e6 !important;
}

body.theme-light .modal-footer {
  background-color: #f8f9fa !important;
  border-top-color: #dee2e6 !important;
}

/* --- BUTTON THEMING IN MODALS --- */
/* Dark theme buttons */
/* body.theme-dark .modal .btn-default,
body.theme-dark .modal .btn,
body.theme-dark .ui-dialog .btn {
  background-color: #374151 !important;
  color: #e9ecef !important;
  border-color: #4b5563 !important;
} */

/* body.theme-dark .modal .btn-default:hover,
body.theme-dark .modal .btn:hover {
  background-color: #4b5563 !important;
  border-color: #6b7280 !important;
} */

/* Primary action buttons stay accent color */
body.theme-dark .modal .btn-primary,
body.theme-dark .modal .color-primary {
  background-color: #00d4ff !important;
  color: #1a2332 !important;
  border-color: #00d4ff !important;
}

/* --- SPECIAL CASES --- */
/* File upload inputs */
body.theme-dark .modal input[type="file"],
body.theme-dark .ui-dialog input[type="file"] {
  color: #e9ecef !important;
}

/* Disabled form elements */
body.theme-dark .modal input:disabled,
body.theme-dark .modal select:disabled,
body.theme-dark .modal textarea:disabled {
  background-color: #0f1419 !important;
  color: #4b5563 !important;
  opacity: 0.6 !important;
}

/* Tables in modals */
body.theme-dark .modal table,
body.theme-dark .ui-dialog table {
  color: #e9ecef !important;
}

body.theme-dark .modal table th,
body.theme-dark .ui-dialog table th {
  background-color: #1e2736 !important;
  color: #e9ecef !important;
  border-color: rgba(255, 255, 255, 0.81) !important;
}

body.theme-dark .modal table td,
body.theme-dark .ui-dialog table td {
  border-color: rgba(255, 255, 255, 0.81) !important;
}

/* --- OVERRIDE ANY TRANSPARENT BACKGROUNDS --- */
/* Force opaque backgrounds on modal content */
.modal-content,
.ui-dialog {
  opacity: 1 !important;
}

/* Prevent any transparent modal backgrounds */
body.theme-dark .modal-content[style*="transparent"],
body.theme-dark .ui-dialog[style*="transparent"] {
  background-color: #242b3a !important;
}

body.theme-light .modal-content[style*="transparent"] {
  background-color: #ffffff !important;
}

/* --- HIGH SPECIFICITY OVERRIDES FOR PROBLEMATIC ELEMENTS --- */
/* NetSapiens specific modal classes */
body.theme-dark #user-add .modal-content,
body.theme-dark #call-queue-add .modal-content,
body.theme-dark #domain-timeframe-add .modal-content,
body.theme-dark #phone-add .modal-content {
  background-color: #242b3a !important;
}

/* Form groups and fieldsets */
body.theme-dark .modal .form-group,
body.theme-dark .modal fieldset,
body.theme-dark .ui-dialog .form-group {
  background-color: transparent !important;
}

/* Close button in modal header */
body.theme-dark .modal-header .close,
body.theme-dark .ui-dialog-titlebar .ui-dialog-titlebar-close {
  color: #e9ecef !important;
  opacity: 0.7 !important;
  text-shadow: none !important;
}

body.theme-dark .modal-header .close:hover {
  opacity: 1 !important;
}

/* --- FINAL DARK THEME MODAL OVERRIDE (CATCH-ALL) --- */
/* This ensures dark theme applies even if modals are added dynamically */
body.theme-dark .modal .modal-dialog .modal-content,
body.theme-dark .modal.in .modal-dialog .modal-content,
body.theme-dark .modal.fade.in .modal-dialog .modal-content {
  background-color: #242b3a !important;
  color: #e9ecef !important;
}

/* Ensure modal body also gets dark background */
body.theme-dark .modal-body {
  background-color: #242b3a !important;
  color: #e9ecef !important;
}

/* Force dark theme on dynamically added modals */
body.theme-dark .modal {
  color: #e9ecef !important;
}

/* --- ENSURE DARK BACKGROUNDS ACTUALLY APPLY --- */
/* Maximum specificity override for stubborn modals */
html body.theme-dark div.modal div.modal-dialog div.modal-content {
  background-color: #222 !important;
}

/* Target NetSapiens specific modal IDs if they exist */
body.theme-dark #modalContainer .modal-content,
body.theme-dark #modal-container .modal-content,
body.theme-dark [id*="modal"] .modal-content {
  background-color: #222 !important;
}

/* End Modal Theming Fix */

/* ===================================================================
   17. NUCLEAR DARK MODE MODAL OVERRIDE (v5.0.11 - 2025-01-02)
   =================================================================== */

/* CRITICAL: Ultra-aggressive overrides to force dark backgrounds */

/* Override ALL modal backgrounds when body has theme-dark class */
body.theme-dark .modal-content {
  background-color: #222 !important;
  color: #e9ecef !important;
}

/* Target every possible modal structure */
body.theme-dark .modal .modal-dialog .modal-content,
body.theme-dark .modal.fade .modal-dialog .modal-content,
body.theme-dark .modal.fade.in .modal-dialog .modal-content,
body.theme-dark .modal.in .modal-dialog .modal-content,
body.theme-dark > .modal .modal-content,
body.theme-dark > .modal .modal-dialog .modal-content {
  background-color: #222 !important;
  color: #e9ecef !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Override modal body and sections */
body.theme-dark .modal-header,
body.theme-dark .modal-body,
body.theme-dark .modal-footer {
  background-color: var(--modal-bg) !important;
  color: #e9ecef !important;
}

/* Nuclear specificity option */
html body.theme-dark .modal.fade.in .modal-dialog .modal-content {
  background-color: var(--modal-bg) !important;
  color: #e9ecef !important;
}

/* Override any inline styles */
body.theme-dark .modal-content[style] {
  background-color: var(--modal-bg) !important;
  color: #e9ecef !important;
}

/* Target ALL elements inside modal to ensure text is visible */
body.theme-dark .modal-content,
body.theme-dark .modal-content * {
  color: #e9ecef !important;
}

/* Specific overrides for form elements */
body.theme-dark .modal-content label,
body.theme-dark .modal-content .control-label {
  color: #b0bec5 !important;
  background: transparent !important;
}

/* Headers with proper contrast */
body.theme-dark .modal-header {
  background-color: #222 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark .modal-header .modal-title {
  color: #ffffff !important;
}

/* Footers with proper styling */
body.theme-dark .modal-footer {
  background-color: #222 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* LIGHT THEME PROTECTION - Ensure light theme stays white */
body.theme-light .modal-content {
  background-color: #ffffff !important;
  color: #212529 !important;
}

/* Only apply white background if body explicitly doesn't have theme-dark AND has theme-light */
body:not(.theme-dark).theme-light .modal-content {
  background-color: #ffffff !important;
  color: #212529 !important;
}

/* End Nuclear Modal Override */

/* ============================================
   SECTION 21: OVERRIDE basicCSS.php .modal white background
   ============================================ */

/* Target .modal element specifically to override basicCSS.php */
html body.theme-dark .modal {
  background: var(--modal-bg) !important;
  background-color: var(--modal-bg) !important;
}

html body.theme-dark div.modal {
  background: var(--modal-bg) !important;
  background-color: var(--modal-bg) !important;
}

/* Use ID selector for higher specificity if needed */
#grid4-app-shell.theme-dark ~ .modal,
body.theme-dark #grid4-app-shell ~ .modal {
  background: var(--modal-bg) !important;
  background-color: var(--modal-bg) !important;
}

/* Attribute selector as last resort */
body.theme-dark [class="modal fade in"],
body.theme-dark [class*="modal"][role="dialog"] {
  background: var(--modal-bg) !important;
  background-color: var(--modal-bg) !important;
}

/* Ensure the modal itself (not content) is properly themed */
body.theme-dark .modal:not(.modal-content) {
  background: var(--modal-bg) !important;
  background-color: var(--modal-bg) !important;
}

/* End basicCSS.php Override */

/* ============================================
   SECTION 22: Fix modal form text colors in dark theme
   ============================================ */

/* Ensure all text in dark theme modals is light */
body.theme-dark .modal,
body.theme-dark .modal-content,
body.theme-dark .modal-header,
body.theme-dark .modal-body,
body.theme-dark .modal-footer {
  color: #e9ecef !important;
}

/* Form labels and text */
body.theme-dark .modal label,
body.theme-dark .modal .control-label,
body.theme-dark .modal .help-block,
body.theme-dark .modal .help-inline,
body.theme-dark .modal p,
body.theme-dark .modal span,
body.theme-dark .modal div {
  color: #e9ecef !important;
}

body.theme-dark .modal span.mini.uneditable-input {
  color: #e9ecef !important;
  background-color: var(--modal-bg) !important;
}

/* Headings in modals */
body.theme-dark .modal h1,
body.theme-dark .modal h2,
body.theme-dark .modal h3,
body.theme-dark .modal h4,
body.theme-dark .modal h5,
body.theme-dark .modal h6 {
  color: #e9ecef !important;
}

/* Bootstrap 2 doesn't use modal-dialog - content goes directly in modal */

/* End modal text fix */

/* ============================================
   SECTION 23: NetSapiens Modal Compatibility Fix
   Based on investigation findings - NetSapiens uses Bootstrap 2 HTML with custom positioning
   ============================================ */

/* Work with NetSapiens' expected modal positioning */
.modal {
  position: fixed !important; /* Override portal.css absolute positioning */
  top: 40% !important; /* Lower from center to accommodate taller modals */
  left: 50% !important;
  z-index: 1050 !important;
  /*width: 600px !important;  NetSapiens expects 600px */
  margin: -200px 0 0 -300px !important; /* Reduced top margin for better centering */
  /* max-height: 60vh !important; /* Reduced to 60% viewport height */
  overflow: visible !important; /* Allow content to be scrollable */
}

/* Ensure modal body is scrollable for long content */
.modal .modal-body {
  max-height: calc(80vh - 9rem) !important; /* Account for header/footer with 60vh - converted from 150px */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Adjust positioning for different screen sizes */
@media (max-height: 768px) {
  .modal {
    top: 30% !important; /* Higher on smaller screens */
    margin-top: -100px !important;
    max-height: 80vh !important;
  }

  .modal .modal-body {
    max-height: calc(80vh - 9rem) !important; /* Converted from 150px for consistent REM scaling */
  }
}

/* Handle Bootstrap 2's hide class that NetSapiens uses */
.modal.hide {
  display: none;
}

/* Ensure proper display when shown */
.modal.in {
  display: block !important;
}

/* Bootstrap 2 fade states - NetSapiens expects these */
.modal.fade {
  top: -25%;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
  -o-transition: opacity 0.3s linear, top 0.3s ease-out;
  transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 35% !important; /* Match our fixed positioning */
  opacity: 1;
}

#cdr-scheduling {
  top: 25% !important; /* Deal with the CDR Scheduling modal being too tall */
  opacity: 1;
}

/* Ensure our theme colors still apply */
body.theme-dark .modal {
  background-color: var(--modal-bg) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body.theme-light .modal {
  background-color: #ffffff !important;
}

/* End NetSapiens Modal Fix */

/* ============================================
   SECTION 24: Modal Dark Mode Footer/Header Fix
   Fixes light backgrounds in dark mode without breaking existing functionality
   ============================================ */

/* Fix modal footer showing light background in dark mode - target correct theme selector */
#grid4-app-shell.theme-dark ~ .modal .modal-footer,
#grid4-app-shell.theme-dark ~ .modal-backdrop ~ .modal .modal-footer,
.theme-dark .modal .modal-footer,
.theme-dark .modal.fade .modal-footer,
.theme-dark .modal.fade.in .modal-footer,
.theme-dark .modal.in .modal-footer {
  background-color: #222 !important;
  background: #222!important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Also target when modal is inside the shell */
#grid4-app-shell.theme-dark .modal .modal-footer {
  background-color: var(--modal-bg) !important;
  background: var(--modal-bg) !important;

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Fix modal header text contrast in dark mode */
#grid4-app-shell.theme-dark ~ .modal .modal-header,
#grid4-app-shell.theme-dark ~ .modal-backdrop ~ .modal .modal-header,
#grid4-app-shell.theme-dark .modal .modal-header,
.theme-dark .modal .modal-header {
  background-color: var(--modal-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e9ecef !important;
}

/* Ensure close button is visible in dark mode */
#grid4-app-shell.theme-dark ~ .modal .modal-header .close,
#grid4-app-shell.theme-dark .modal .modal-header .close,
.theme-dark .modal .modal-header .close {
  color: #e9ecef !important;
  opacity: 0.8;
}

#grid4-app-shell.theme-dark ~ .modal .modal-header .close:hover,
#grid4-app-shell.theme-dark .modal .modal-header .close:hover,
.theme-dark .modal .modal-header .close:hover {
  opacity: 1;
}

/* End Modal Dark Mode Fix */

/* Section 25: Modal Transparency Fix - Fix rendering issues in various browsers */
/*
// * Issue: backdrop-filter with rgba backgrounds causes transparency in some browsers
// * Solution: Remove backdrop-filter and use solid backgrounds for reliable rendering
 */

/* Disable problematic backdrop-filter on all modals */
.modal-content,
.modal .modal-content,
#grid4-app-shell ~ .modal .modal-content {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Ensure fully opaque */
  opacity: 1 !important;
}

/* Dark theme - solid backgrounds for modals */
body.theme-dark .modal-content,
#grid4-app-shell.theme-dark ~ .modal .modal-content,
#grid4-app-shell.theme-dark .modal .modal-content,
.theme-dark .modal-content {
  background: var(--modal-bg) !important;
  background-color: var(--modal-bg) !important;
  /* Remove any transparency */
  opacity: 1 !important;
}

/* Light theme - solid backgrounds for modals */
body.theme-light .modal-content,
#grid4-app-shell.theme-light ~ .modal .modal-content,
#grid4-app-shell.theme-light .modal .modal-content,
.theme-light .modal-content,
.modal-content {
  background: #ffffff !important;
  background-color: #ffffff !important;
  /* Remove any transparency */
  opacity: 1 !important;
}

/* Webkit/Safari specific fixes */
@supports (-webkit-backdrop-filter: blur(10px)) {
  .modal-content {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Firefox specific fixes for older versions */
@-moz-document url-prefix() {
  .modal-content {
    backdrop-filter: none !important;
    opacity: 1 !important;
  }
}

/* Ensure modal body also has solid background */
.modal-body {
  background: transparent !important; /* Inherit from modal-content */
  opacity: 1 !important;
}

#grid4-app-shell.theme-dark ~ .modal .modal-body,
#grid4-app-shell.theme-dark .modal .modal-body {
  background: transparent !important;
}

/* End Modal Transparency Fix */

/* Ensure modal elements are interactive */
.modal {
  pointer-events: auto !important;
}
.modal .modal-dialog,
.modal .modal-content,
.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
  pointer-events: auto !important;
}

/* Section 26: Dropdown Animation Improvements */
/* Smoother dropdown animations with better timing */
.dropdown-menu {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.33s ease-out;
  transition-timing-function: ease-out;
  pointer-events: none;
}

.dropdown.open .dropdown-menu,
.btn-group.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: all 0.35s ease;

  transition-timing-function: ease;



}

/* Ensure dropdown stays within viewport */
.dropdown-menu {
  max-height: 80vh;
  overflow-y: auto;
}



/* End Dropdown Improvements */

/* ===================================
   8. PAGE-SPECIFIC FIXES
   =================================== */

/* Auto Attendant Editor Page Fixes */
.page-autoattendants #grid4-app-shell #content {
  /* Fix content alignment specific to Auto Attendant editor */
  padding-top: var(--g4-content-padding) !important;
  margin-top: 0 !important;
}

.page-autoattendants #grid4-app-shell .container-fluid {
  max-width: 100% !important;
  padding: 0 !important;
}

.page-autoattendants #grid4-app-shell .attendant-tier {
  background: var(--surface-primary-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--g4-radius-md) !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}

.page-autoattendants #grid4-app-shell .aa-editor-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.page-autoattendants #grid4-app-shell .aa-menu-buttons {
  display: flex;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: flex-start !important;
}

body.page-autoattendants #grid4-app-shell .aa-menu-buttons.grid4-aa-visible {
  display: flex !important;
}

body.page-autoattendants #grid4-app-shell .aa-menu-buttons.grid4-aa-hidden {
  display: none !important;
}

/* Auto Attendant specific form elements */
.page-autoattendants #grid4-app-shell input[type="text"],
.page-autoattendants #grid4-app-shell select,
.page-autoattendants #grid4-app-shell textarea {
  background: var(--surface-primary-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

/* CRITICAL FIX: Auto Attendant .form-actions conflict
  PROBLEM: A global rule for .form-actions forces all hidden AA configuration
  panels to be visible, breaking the layout.
  SOLUTION: Use page-specific class to restore default hidden behavior
  for the .application-details panels within .attendant-creation container.
 */
.page-autoattendants .attendant-creation .application-details.form-actions {
  display: none !important;
}

/* When JavaScript makes a panel visible by changing its inline style,
 * ensure it displays correctly as a flex container as intended by our skin.
 */
.page-autoattendants .attendant-creation .application-details.form-actions[style*="display: block"],
.page-autoattendants .attendant-creation .application-details.form-actions[style*="display: flex"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  overflow: visible !important;
}

/* Section 27: Button Spacing and Shape Improvements */
/* Standardize button spacing - increased from 5px to 8px */
.btn + .btn,
.btn-group > .btn + .btn,
.btn-toolbar > .btn + .btn,
.btn-toolbar .btn,
.btn-toolbar .btn-group {
margin-left: 4px !important;
}

/* Attendant Console — Numpad spacing fix
   Block global button adjacency margins inside the off-net dialer keypad. */
#numberPad .btn + .btn,
#numberPad .btn-group > .btn + .btn,
.numpad-btn,
.numpad-btn[id^="numPad"],
#grid4-app-shell #numberPad .btn + .btn,
#grid4-app-shell #numberPad .btn-group > .btn + .btn,
#grid4-app-shell #numberPad .numpad-btn,
#grid4-app-shell .numpad-btn[id^="numPad"] {
  margin-left: 0 !important;
}


/* Make buttons more rectangular - reduced to 2px for subtle rounding */
.btn,
.btn-sm,
.btn-lg,
.btn-primary,
.btn-default,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-link,
input[type="button"],
input[type="submit"],
button {
  border-radius: 2px !important;
  margin-right: .5rem !important;
}

/* Button groups need special handling */
.btn-group > .btn {
  border-radius: 0 !important; /* No rounding for buttons inside groups */
  margin-left: 0 !important; /* Reset margin for grouped buttons */
  margin-right: 0 !important;
}

/* First and last buttons in group get slight rounding */
.btn-group > .btn:first-child {
  border-top-left-radius: 2px !important;
  border-bottom-left-radius: 2px !important;
}

.btn-group > .btn:last-child {
  border-top-right-radius: 2px !important;
  border-bottom-right-radius: 2px !important;
}

/* Spacing between button groups */
.btn-group + .btn-group,
.btn-group + .btn,
.btn + .btn-group {
  margin-left: 0px !important;
}

/* Toolbar spacing */
.btn-toolbar {
  gap: 4px !important; /* Modern browsers */
}

/* Legacy browser fallback for toolbar spacing */
.btn-toolbar > * {
  margin-right: 8px !important;
}

.btn-toolbar > *:last-child {
  margin-right: 0 !important;
}

/* Ensure consistent vertical alignment */
.btn,
.btn-group {
  vertical-align: middle !important;
}


#grid4-app-shell a.dropdown-toggle.btn {
   padding-left: .25rem;
   padding-right: .5rem;

}

.caret
{
    border-top:4px solid white !important;
}

#builder-dropdown
{
  margin-left: -2px !important;
}


button.agent-queues-btn.btn.btn-mini.nsicon.nsicon-queue {
    filter: brightness(4.5);
    vertical-align: middle;

}
#grid4-app-shell.theme-light i.icon-volume-up {
    filter: brightness(10) !important;
    /* color: unset !important;*/
    vertical-align: middle;

}

#grid4-app-shell.theme-light i.icon-volume-down {
    filter: brightness(10) !important;
    /* color: unset !important;*/
    vertical-align: middle;

}
#grid4-app-shell.theme-light i.icon-graph {
    filter: brightness(10) !important;
    /* color: unset !important;*/
    vertical-align: middle;

}
/* End Button Improvements */

/* Section 28: Modal Text Color Fixes for Dark Theme */
/* Fix h4 headers in modals - maximum specificity */
#grid4-app-shell.theme-dark ~ .modal .modal-header h4,
#grid4-app-shell.theme-dark ~ .modal .modal-body h4,
#grid4-app-shell.theme-dark ~ .modal .modal-content h4,
#grid4-app-shell.theme-dark .modal .modal-header h4,
#grid4-app-shell.theme-dark .modal .modal-body h4,
#grid4-app-shell.theme-dark .modal .modal-content h4,
body.theme-dark .modal h4,
.theme-dark .modal h4,
/* Target all possible modal h4 variations */
.theme-dark .modal-header h4,
.theme-dark .modal-body h4,
.theme-dark .modal-content h4,
#grid4-app-shell.theme-dark ~ .modal h4[class],
#grid4-app-shell.theme-dark .modal h4[class],
/* Override any inline styles or other rules */
#grid4-app-shell.theme-dark ~ .modal h4[style],
#grid4-app-shell.theme-dark .modal h4[style] {
  color: #e9ecef !important;
}

/* Light theme h4 headers */
#grid4-app-shell.theme-light ~ .modal .modal-header h4,
#grid4-app-shell.theme-light ~ .modal .modal-body h4,
#grid4-app-shell.theme-light ~ .modal .modal-content h4,
#grid4-app-shell.theme-light .modal .modal-header h4,
#grid4-app-shell.theme-light .modal .modal-body h4,
#grid4-app-shell.theme-light .modal .modal-content h4,
body.theme-light .modal h4,
.theme-light .modal h4,
.modal h4 {
  color: #333333 !important;
}

/* Fix legend elements in modals - maximum specificity */
#grid4-app-shell.theme-dark ~ .modal .modal-body legend,
#grid4-app-shell.theme-dark ~ .modal .modal-content legend,
#grid4-app-shell.theme-dark ~ .modal fieldset legend,
#grid4-app-shell.theme-dark .modal .modal-body legend,
#grid4-app-shell.theme-dark .modal .modal-content legend,
#grid4-app-shell.theme-dark .modal fieldset legend,
body.theme-dark .modal legend,
.theme-dark .modal legend,
/* Target all possible legend variations */
.theme-dark .modal-body legend,
.theme-dark .modal-content legend,
.theme-dark fieldset legend,
#grid4-app-shell.theme-dark ~ .modal legend[class],
#grid4-app-shell.theme-dark .modal legend[class],
/* Override any inline styles */
#grid4-app-shell.theme-dark ~ .modal legend[style],
#grid4-app-shell.theme-dark .modal legend[style] {
  color: #e9ecef !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
/* Fix legend elements  */
#grid4-app-shell.theme-dark legend,
#grid4-app-shell.theme-dark legend,
#grid4-app-shell.theme-dark fieldset legend,
#grid4-app-shell.theme-dark legend,
#grid4-app-shell.theme-dark legend,
#grid4-app-shell.theme-dark fieldset legend,
body.theme-dark legend,
.theme-dark  legend,
/* Target all possible legend variations */
.theme-dark  legend,
.theme-dark  legend,
.theme-dark legend,
#grid4-app-shell.theme-dark legend[class],
#grid4-app-shell.theme-dark legend[class],
/* Override any inline styles */
#grid4-app-shell.theme-dark legend[style],
#grid4-app-shell.theme-dark legend[style] {
  color: #e9ecef !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
/* Light theme legends */
#grid4-app-shell.theme-light ~ .modal .modal-body legend,
#grid4-app-shell.theme-light ~ .modal .modal-content legend,
#grid4-app-shell.theme-light ~ .modal fieldset legend,
#grid4-app-shell.theme-light .modal .modal-body legend,
#grid4-app-shell.theme-light .modal .modal-content legend,
#grid4-app-shell.theme-light .modal fieldset legend,
body.theme-light .modal legend,
.theme-light .modal legend,
.modal legend {
  color: #333333 !important;
  border-bottom-color: #e5e5e5 !important;
}

/* Fix help-block and help-inline text */
#grid4-app-shell.theme-dark ~ .modal .help-block,
#grid4-app-shell.theme-dark ~ .modal .help-inline,
#grid4-app-shell.theme-dark .modal .help-block,
#grid4-app-shell.theme-dark .modal .help-inline,
.theme-dark .modal .help-block,
.theme-dark .modal .help-inline {
  color: #adb5bd !important; /* Muted gray for dark theme */
}

/* Light theme help text */
#grid4-app-shell.theme-light ~ .modal .help-block,
#grid4-app-shell.theme-light ~ .modal .help-inline,
#grid4-app-shell.theme-light .modal .help-block,
#grid4-app-shell.theme-light .modal .help-inline,
.theme-light .modal .help-block,
.theme-light .modal .help-inline,
.modal .help-block,
.modal .help-inline {
  color: #6c757d !important; /* Muted gray for light theme */
}

/* Remove the problematic g4-themed rule that was overriding theme-specific colors */
/* Previously had .modal.g4-themed .help-inline/.help-block rules here but removed to allow theme-specific rules to work */

/* End Modal Text Color Fixes */

/* Section 29: Navigation Icon Fixes */
/* Ensure FontAwesome icons display properly */
#nav-buttons .fa {
  display: inline-block !important;
  margin-right: 5px !important;
  width: 16px !important;
  text-align: center !important;
  font-family: FontAwesome !important;
  vertical-align: middle !important;
}

/* Icon positioning inside nav structure */
#nav-buttons li a .fa {
  position: relative !important;
  top: 0 !important;
}

/* Specific fix for fax icon */
#nav-buttons .fa-fax:before {
  content: "\f1ac" !important; /* FontAwesome 4.7 fax icon */
}

/* Ensure nav-text spans are properly styled */
#nav-buttons .nav-text {
  display: inline !important;
  vertical-align: middle !important;
}

/* Icon visibility */
.nav-button + .fa {
  display: inline-block !important;
}

  #grid4-app-shell {
 --g4-radius-sm: 1px !important;
--g4-radius-md: 2px !important;
--g4-radius-lg: 3px !important;
                        }
 #grid4-app-shell .btn,
 #grid4-app-shell .form-control,
#grid4-app-shell .panel,
#grid4-app-shell .modal-content {
   border-radius: 2px !important;
}



/* End Navigation Icon Fixes */
/* ===================================
   PAGE-SPECIFIC FIX: AUTO ATTENDANT EDITOR (v3 - Ultimate Specificity)
   =================================== */

/*
 * PROBLEM: A global rule for `.form-actions` is overriding the display property of the
 * AA panels. Previous fixes failed due to a specificity conflict.
 *
 * SOLUTION: This version uses the highest practical specificity by starting the
 * selector chain from the `body` tag with the page-specific class. This ensures
 * our `display: none` rule wins the specificity battle against the global rule.
 */
body.page-autoattendants #grid4-app-shell .attendant-creation .application-details.form-actions {
  display: none !important;
}

/*
 * This corresponding rule ensures that when the portal's JavaScript adds an inline
 * `style="display: block;"` to show a panel, our override kicks in to correctly
 * display it as a flex container. The attribute selector makes it even more specific.
 */
body.page-autoattendants #grid4-app-shell .attendant-creation .application-details.form-actions[style*="display: block"],
body.page-autoattendants #grid4-app-shell .attendant-creation .application-details.form-actions[style*="display: flex"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  overflow: visible !important;
}

/* ===================================================================
   PAGE-SPECIFIC FIX: AUTO ATTENDANT ICONS (v8 - Final Targeted Filter)
   =================================================================== */

/*
 * PROBLEM: A global rule for `[class*=" icon-"]` was forcing the wrong sprite sheet.
 * A separate, stubborn rule was also setting `filter: none;` on these icons,
 * preventing our dark mode theming from applying.
 *
 * SOLUTION: A two-pronged attack.
 * 1. An override targeting `[class*=" icon-"]` specifically to force the correct
 *    `background-image` (`aa-icons.png`) onto the elements.
 * 2. A NEW, separate override targeting the more unique `.app-icon-lg` class
 *    to apply our theme-specific filter. This avoids conflict with the
 *    global `filter: none;` rule.
 */
/* 1. Force the correct background image onto the icon elements */
#grid4-app-shell .page-autoattendants .application-choices [class*=" icon-"] {
  display: block;
  width: 40px;
  height: 40px;
  background-image: url('/portal/img/misc/aa-icons.png') !important;
  background-repeat: no-repeat;
  margin: 0 auto 5px;
}

/* 2. Set the specific background positions for each icon */
#grid4-app-shell .page-autoattendants .application-choices .icon-user { background-position: 0 0; }
#grid4-app-shell .page-autoattendants .application-choices .icon-conference { background-position: -40px 0; }
#grid4-app-shell .page-autoattendants .application-choices .icon-callqueue { background-position: -80px 0; }
#grid4-app-shell .page-autoattendants .application-choices .icon-directory { background-position: -120px 0; }
#grid4-app-shell .page-autoattendants .application-choices .icon-voicemail { background-position: -160px 0; }
#grid4-app-shell .page-autoattendants .application-choices .icon-vmailmanage { background-position: -200px 0; }
#grid4-app-shell .page-autoattendants .application-choices .icon-external { background-position: -240px 0; }
#grid4-app-shell .page-autoattendants .application-choices .icon-message { background-position: -280px 0; }
#grid4-app-shell .page-autoattendants .application-choices .icon-repeat { background-position: -320px 0; }
#grid4-app-shell .page-autoattendants .application-choices .icon-tier { background-position: -360px 0; }
/* 3. Apply the theme-specific filter by targeting the unique `.app-icon-lg` class */
body.page-autoattendants #grid4-app-shell.theme-dark .application-choices .app-icon-lg {
  filter: invert(1) brightness(2.5) contrast(1.5) !important;
}

/* End Auto Attendant Icon Fixes */


/* ===================================================================
   FORM INPUT ADD-ON FIX (Dark Theme)
   =================================================================== */

/*
 * PROBLEM: On the AA page and elsewhere, input add-ons (`.add-on`) and
 * uneditable inputs (`.uneditable-input`) have a light background in dark mode.
 *
 * SOLUTION: Create a specific rule for these elements in dark mode to match
 * the theme's form input styling.
 */
#grid4-app-shell.theme-dark .add-on,
#grid4-app-shell.theme-dark .uneditable-input {
  background-color: var(--surface-secondary-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  text-shadow: none !important;
}


/* Center flash messages */
  .flashMessage, #flashMessage {
    max-width: 600px !important;
    margin-left: auto;
    margin-right: auto !important;
    padding-top: 2.5% !important;
  }


/* ===================================
   SECTION 26A: Dropdown Hitbox Fix (Definitive)
   =================================== */

/*
 * PROBLEM: The dropdown closes when the mouse is over the empty space
 * inside the menu, because the links (<a>) are not full-width, allowing
 * mouse events to pass through to the action buttons in the rows underneath.
 *
 * SOLUTION: This highly specific rule forces the links (<a>) inside the action
 * menu to become block-level elements. This makes them fill the entire width
 * of the dropdown, creating a solid, interactive surface with no "holes" and
 * preventing the underlying row from ever receiving a mouse event while the
 * menu is open.
*/
#grid4-app-shell .table .action-buttons .dropdown-menu li a {
display: block !important;
 padding: 4px 40px !important; /* Optional: Improves spacing and feel */
 color: var(--table-hover-text) !important;
 text-align: left;
font-weight: 500 !important;


}


/* ===================================
   SECTION 26A: Dropdown Event Isolation Fix (Definitive)
   =================================== */

/*
 * When a dropdown is open, our JavaScript adds the 'dropdown-active'
 * class to its parent table row (<tr>). This CSS rule uses that class to
 * elevate the entire row's stacking context with a z-index, effectively
 * shielding all other rows from mouse events and making the dropdown stable.
*/
.table > tbody > tr.dropdown-active {
  position: relative;
  z-index: 5;
}



/* ===================================================================
   PAGE-SPECIFIC FIX: CALL HISTORY QOS POPOVER (v6 - Final)
   =================================================================== */


/*for the fax page in dark mode */
#grid4-app-shell.theme-dark .info-alert-custom {
    background-color: black !important;
}



/*
 * PROBLEM: The popover was unthemed and flickered on page load.
 *
 * SOLUTION:
 * 1. A JS function now re-initializes the popover in the correct `body`
 *    container and dynamically adds theme classes on show.
 * 2. This CSS proactively hides the default, incorrectly placed popover
 *    that is generated inside the table, preventing the flicker.
 * 3. The main styling rules now target the dynamically themed popover
 *    that exists as a child of the body.
 */

/* 1. CRITICAL: Proactively hide the broken popover to prevent flicker. */
/* This targets any qos-popover that is inside a table cell. Our JS-created popover is not. */
#call-history-table .qos-popover {
  display: none !important;
  visibility: hidden !important;
}

/* 2. Main Popover Theming (now targeting the JS-themed element) */
/* Selects the popover when it has our dynamically added theme classes. */
.popover.qos-popover.g4-themed {
  z-index: 10001 !important;
  background: var(--surface-primary-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--g4-radius-md) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
  opacity: 1 !important;
}

/* 3. Popover Inner Structure */
.popover.qos-popover.g4-themed .popover-inner {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 4. Popover Content & Text Color */
.popover.qos-popover.g4-themed .popover-content {
  color: var(--text-primary) !important;
  padding: 10px 12px !important;
}

/* 5. Arrow Theming */
.popover.qos-popover.g4-themed.right > .arrow {
  border-right-color: var(--border-color) !important;
}
.popover.qos-popover.g4-themed.right > .arrow:after {
  border-right-color: var(--surface-primary-bg) !important;
}

/* 6. Table Theming Inside the Popover */
.popover.qos-popover.g4-themed .table {
  color: var(--text-primary) !important;
  background: transparent !important;
}
.popover.qos-popover.g4-themed .table th {
  color: var(--text-secondary) !important;
  border-bottom: 2px solid var(--border-color) !important;
  font-weight: 700;
}
.popover.qos-popover.g4-themed .table td {
  border-top: 1px solid var(--border-color) !important;
}


/* ===================================================================
   PAGE-SPECIFIC FIX: CALL HISTORY "CALL FLOW" MODAL
   =================================================================== */

/*
 * PROBLEM: The "Call Flow" modal (#cradle-modal) on the Call History page
 * is not fully themed, with inconsistent backgrounds and icons that are
 * not visible in light mode.
 *
 * SOLUTION:
 * 1. Use a high-specificity, page-scoped selector to target the #cradle-modal.
 * 2. Unify the modal's header, body, and footer backgrounds using theme variables.
 * 3. Style the custom `.cradle-timeline` list, including the connecting lines,
 *    icon backgrounds, and text, using theme variables.
 * 4. Apply a CSS `filter: invert(1)` to the timeline icons ONLY in light mode
 *    to change them from white to black for proper visibility.
 */

/* 1. Base Modal Theming */
/* Unify header and footer styling */
body.page-callhistory #grid4-app-shell #cradle-modal .modal-header,
body.page-callhistory #grid4-app-shell #cradle-modal .modal-footer {
  background-color: var(--surface-secondary-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.modal-body > .cradle-timeline  {
  background-color: var(--surface-primary-bg) !important;
  /*color: var(--text-primary) !important; */
  border-color: var(--border-color) !important;
}
/* Style the main body to be distinct but themed */
body.page-callhistory #grid4-app-shell #cradle-modal .modal-body {
  background-color: var(--surface-primary-bg) !important;
}

/* Ensure modal title is the correct color */
body.page-callhistory #grid4-app-shell #cradle-modal .modal-header h4 {
  color: var(--text-primary) !important;
}





/* 4. Timeline Icon Styling (Pseudo-element) */
/* This creates the circle behind the icon */
body.page-callhistory #grid4-app-shell #cradle-modal .cradle-timeline .event::before {
  background-color: var(--surface-secondary-bg);
  border: 0px solid var(--border-color);
  color: var(--accent-primary) !important;

  /* The actual phone icon is a background-image set by the portal's default CSS */
}

/* 5. CRITICAL: Icon Theming for Light vs. Dark Mode */
/* In light mode, the default white icons are invisible. This inverts them to black. */
body.page-callhistory #grid4-app-shell.theme-light #cradle-modal .cradle-timeline .event::before {
  /*filter: invert(1); */
  color: var(--text-primary) !important;

}

/* 6. Timeline Text Styling */
/* Main event text */
body.page-callhistory #grid4-app-shell #cradle-modal .cradle-timeline .event p {

  color: var(--text-primary);
  font-weight: 500;
}

/* Timestamp text (+3s, +7s, etc.) */
body.page-callhistory #grid4-app-shell #cradle-modal .cradle-timeline .event .event-ts {
  color: var(--text-secondary);
  font-size: var(--g4-font-size-sm);
}
body.page-callhistory #grid4-app-shell.modal.g4-themed.theme-dark #cradle-modal .cradle-timeline .event::after {
  filter: invert(1);
  color: var(--text-primary) !important;

}
/* ===================================================================
   PAGE-SPECIFIC FIX: ANSWERING RULES "ALLOW / BLOCK" MODAL (v2)
   =================================================================== */

/*
 * PROBLEM: The "Allow / Block" modal on the Answering Rules page uses
 * default Bootstrap `.well` components which are not theme-aware, resulting
 * in bright white boxes and unreadable text in dark mode.
 *
 * SOLUTION (v2):
 * 1. Use the `.page-answerrules` context class to scope all fixes.
 * 2. Override the `.well` element's background to be theme-aware, removing
 *    default borders and shadows.
 * 3. Explicitly set the text color for the section titles and checkbox label.
 * 4. Add a max-height and scrollbar to the number list containers.
 * 5. Resize the "+" buttons to the specified dimensions.
 */

/* 1. Theme the main container "wells" */
body.page-answerrules #grid4-app-shell .well {
  background-color: var(--surface-primary-bg) !important;
}

/* 2. Style the section titles */
body.page-answerrules #grid4-app-shell .allowblock-input h6 {
  color: var(--text-primary) !important;
  font-weight: 600;
  margin-bottom: 8px;
}

/* 3. Make the number list areas scrollable */
body.page-answerrules #grid4-app-shell .allowblock-table {
  min-height: 180px;
  max-height: 180px;
  overflow-y: auto;
 /* Add space for the scrollbar */
}

/* 4. Theme the anonymous block checkbox and label */
body.page-answerrules #grid4-app-shell .allowblock-anon {
  background-color: var(--surface-secondary-bg);
  border: 0px;
}

body.page-answerrules #grid4-app-shell .allowblock-anon label.checkbox {
  color: var(--text-primary) !important;
}

/* 5. Resize the "+" buttons in the input fields */
body.page-answerrules #grid4-app-shell .allowblock-input .btn {
  height: 1.7rem !important;
  width: 1.7rem !important;
  padding: 0 !important; /* Remove padding to allow for icon centering */
  display: inline-flex !important; /* Use flexbox for perfect centering */
  align-items: center;
  justify-content: center;
}


/* ===================================================================
   PAGE-SPECIFIC FIX: ANSWERING RULES "BLOCKED NUMBERS" MODAL STYLING
   =================================================================== */

/*
 * PROBLEM: Specific components within the "Allow / Block" modal on the
 * Call History page require theme-aware background colors.
 *
 * SOLUTION: Apply page-scoped, theme-aware background colors to the
 * specified elements using the project's CSS variables.
 */

/* 1. Style the input container background */
body.page-callhistory #grid4-app-shell #allowblock-lists .allowblock-input {
  background-color: var(--app-bg) !important;
}

/* 2. Style the rejected numbers list background */
body.page-callhistory #grid4-app-shell .blocknumbers-modal #rej-list {
  background-color: var(--modal-bg) !important;
}

/* 3. Style the "well" container for the blocked numbers list */
body.page-callhistory #grid4-app-shell #allowblock-lists #block-div .well {
  background-color: var(--modal-bg) !important;
}
/* ===================================================================
   PAGE-SPECIFIC FIX: MESSAGES PAGE CHAT INTERFACE
   =================================================================== */

/*
 * PROBLEM: The chat interface on the Messages page is not theme-aware.
 * Message bubbles and text are unreadable in dark mode due to default
 * light-mode styling from the `.well` class.
 *
 * SOLUTION:
 * 1. Scope all rules within `.conversation-column-left` to ensure they only
 *    apply to this specific chat interface.
 * 2. Theme the main chat box background for better visual structure.
 * 3. Override the `.chat-well` styles to provide distinct, theme-aware
 *    backgrounds for inbound (received) and outbound (sent) messages.
 * 4. Style all text elements using theme variables for readability.
 */

/* 1. Main Chat Container Styling */
#grid4-app-shell .conversation-column-left .chat-box {
  background-color: var(--surface-primary-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--g4-radius-lg) !important;
  padding: .5rem !important;

}

/* 2. General Message Bubble Styling (overrides .well) */
#grid4-app-shell .conversation-column-left .chat-well {
  border-radius: var(--g4-radius-lg) !important;
  border: none !important;
  box-shadow: 0 1px 2px var(--shadow-color) !important;
  padding: 0.5rem 0.75rem !important;
}

/* 3. Inbound (Received) Message Bubbles */
#grid4-app-shell .conversation-column-left .chat-inbound .chat-well {
  background-color: var(--surface-secondary-bg) !important;
}

/* 4. Outbound (Sent) Message Bubbles */
#grid4-app-shell .conversation-column-left .chat-outbound .chat-well {
  background-color: var(--accent-primary) !important;
}

/* 5. Message Text Color */
/* Inbound text should be the primary text color of the theme */
#grid4-app-shell .conversation-column-left .chat-inbound .chat-well p {
  color: var(--text-primary) !important;
  margin: 0;
}

/* Outbound text should be white to contrast with the accent color */
#grid4-app-shell .conversation-column-left .chat-outbound .chat-well p {
  color: #ffffff !important;
  margin: 0;
}

/* 6. Timestamp and User Info Text */
#grid4-app-shell .conversation-column-left .chat-timestamp {
  color: var(--text-muted) !important;
  font-size: var(--g4-font-size-sm) !important;
  font-weight: 500;
}


/*For Timeframe Holiday Picker */
#grid4-app-shell .holiday-picker-container {
    background-color: var(--modal-bg);
}


#grid4-app-shell .accordion-heading {
    background-color: var(--modal-bg);
}


.alert {
  text-shadow: none !important;
}

.alert-info {
  background-color: var(--surface-secondary-bg) !important;

}

#grid4-app-shell a#bulkDeleteBtn.btn.btn-danger, #grid4-app-shell .btn.btn-danger#bulkDeleteBtn { color: #ffffff !important; text-shadow: none !important; }

#grid4-app-shell a#bulkDeleteBtn.btn.btn-danger:hover, #grid4-app-shell a#bulkDeleteBtn.btn.btn-danger:focus, #grid4-app-shell a#bulkDeleteBtn.btn.btn-danger:active { color: #ffffff !important; }

#grid4-app-shell a#bulkDeleteBtn.btn.btn-danger[style*="display"], #grid4-app-shell a#bulkDeleteBtn.btn.btn-danger.hide { color: #ffffff !important; }


.label-warning, .badge-warning {
    color: white !important;
}

.label-success, .badge-success {
    color: white !important;
}

.label.g4-themed.theme-light {
    color: white !important;
}

.label-info, .badge-info {
    background-color: #3a87ad;
    color: white !important;
}

.nsicon.nsicon-phone-extension {
    color: white !important;
}

.tooltip-inner {
    color: white !important;
}


input#device {
    width: 10rem !important;
}

.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
    border-bottom: unset !important;
}

span.badge.badge-information {
    color: white !important;
}

span.badge.table-sentiment-positive {
    color: white !important;
}

span.badge.table-sentiment-negative {
    color: white !important;
}
span.badge.table-sentiment-neutral {
    color: white !important;
}

.pill {
    color: white !important;
}

span.label {
    color: white !important;
}
.bootstrap-switch-container {
    /* border: 3px red; */
    background-color: white !important;
}
span.bootstrap-switch-handle-off.bootstrap-switch-default {
    color: red !important;
    font-weight: 600;
}


span#nav-msg-count {
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem .45rem !important;
    top: unset !important;
    right: 10px !important;
}

/* .theme-dark button.close.cancel {
    filter: invert(1) brightness(1) !important;
} */

.form-horizontal .control-label {
    width: unset;
}


.theme-dark .checkmark
 {
   filter: invert(1) brightness(1) !important;
}

.theme-dark i.icon-info-sign {
    filter: invert(1) brightness(1) !important;
}

#grid4-app-shell.theme-dark .icon-calendar {
  filter: invert(1) brightness(2.5) contrast(1.5) !important;
}

h3.popover-title {
    color: var(--text-primary) !important;
}

.popover-title, .popover-content
 {
    background-color: var(--surface-primary-bg) !important;
}

a.btn.btn-medium.btn-danger
{

  color: var(--text-primary) !important;
}

#user-edit > div.form-actions.affix-form-actions.scroll-to-fixed-fixed > div > div.popover-content.text-center > div > a:nth-child(2)
{
color: var(--text-primary) !important;
text-shadow: none !important;
}

#grid4-app-shell input.btn.color-primary.span2.saving.saveBtn {
    width: 5rem !important;
    height: 1.7rem !important;
}

#grid4-app-shell .btn.color-primary.saving.span2.saveBtn {
    width: 4rem !important;
    height: 1.7rem !important;
}
#grid4-app-shell a.label {
    /*background-color: darkviolet !important; */
    color: white !important;
    padding: .2rem;
}

#grid4-app-shell .action-container-left.uiconfig-defs
 {
    float: left !important;
}


/* Fixing icons in the Contacts/Chat Dock */
i.icon-white.icon-minimize {
    filter: unset !important;
}

.icon-share-alt {
    filter: unset !important;
    background-position: -336px -96px;
}

#new-msg > i {
    filter: unset !important;
}

#make-call > i {
    filter: unset !important;
}

/* Fixing the sub nav vm badge text on the Messages page*/
#sub-nav-vm-count {
    color: white !important;
}

#grid4-app-shell.theme-light span#nav-msg-count {
    color: white !important;
}

#grid4-app-shell.theme-dark span#nav-msg-count {
    color: white !important;
}



/* Dropdown items: white text on hover/active */
#grid4-app-shell .dropdown-menu > li > a:hover,
#grid4-app-shell .dropdown-menu > li > a:focus,
#grid4-app-shell .dropdown-menu > li:hover > a,
#grid4-app-shell .dropdown-menu > .active > a {
  color: #fff !important;
}

/* Icons inside dropdown items follow the text color */
#grid4-app-shell .dropdown-menu > li > a .fa,
#grid4-app-shell .dropdown-menu > li > a .iconfont,
#grid4-app-shell .dropdown-menu > li > a [class^="icon-"],
#grid4-app-shell .dropdown-menu > li > a [class*=" icon-"] {
  color: inherit !important;
  filter: none !important; /* beats inline filters from JS, only inside menus */
}


#grid4-app-shell form .control-group.group {
    margin-bottom: .9rem !important;
    margin-top: .5rem !important;
}


/* SIP Trunks › Edit › Header Manipulation — responsive row, no h‑scroll */
#grid4-app-shell .modal #siptrunk-edit-header .control-group .controls {
  overflow-x: hidden; /* safety against tiny rounding overflows */
}

#grid4-app-shell .modal #siptrunk-edit-header .input-prepend.input-append {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0 !important; /* we join the pieces; borders define seams */
}

/* Left box (user) */
#grid4-app-shell .modal #siptrunk-edit-header .split-input-left {
  flex: 0 0 24%;          /* percentage so it scales with modal */
  min-width: 100px;       /* never too tiny */
  margin: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Middle “@” chip */
#grid4-app-shell .modal #siptrunk-edit-header .input-prepend.input-append > .add-on {
  flex: 0 0 42px;         /* fixed, compact chip */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  line-height: 32px !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Right box (host) — grows to fill remaining width */
#grid4-app-shell .modal #siptrunk-edit-header .split-input-right {
  flex: 1 1 0 !important;
  min-width: 0 !important;   /* allow shrinking inside flex container */
  width: auto !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Uneditable “Server's IP” variant */
#grid4-app-shell .modal #siptrunk-edit-header .uneditable-input.split-input-right {
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 10px !important;
}

/* Optional: tiny screens/dev tools narrow widths */
@media (max-width: 640px) {
  #grid4-app-shell .modal #siptrunk-edit-header .split-input-left { flex-basis: 35%; min-width: 90px; }
  #grid4-app-shell .modal #siptrunk-edit-header .input-prepend.input-append > .add-on { flex-basis: 36px; }
}


/* AUTO ATTENDANTS (edit) — side-by-side Prompt | Dial Pad */
body.page-autoattendants #grid4-app-shell .attendant-creation {
  overflow-x: hidden; /* safety */
}

/* Header labels: "Menu Prompt" (left) | "Dial Pad Menu" (right) */
body.page-autoattendants #grid4-app-shell
  .attendant-creation .attendant-header.form-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: left !important;
  background: transparent !important;
  border: 0 !important;
  padding: 4px 0 !important;
  padding-bottom: 0.5rem !important;
}
body.page-autoattendants #grid4-app-shell .attendant-creation .attendant-header.form-actions .pull-left,
body.page-autoattendants #grid4-app-shell
  .attendant-creation .attendant-header.form-actions .pull-right {
  float: none !important; /* kill legacy float */
  padding-bottom: 0.5rem !important;
}

/* Main row container: id starts with attendant_tier_ */
body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options {
  display: flex;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 90% !important;
  padding: 0.2rem !important;
}

body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options.grid4-aa-visible {
  display: flex !important;
}

body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options.grid4-aa-hidden,
body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options.hide,
body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options[style*="display: none"],
body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options[style*="display:none"] {
  display: none !important;
}

body.page-autoattendants #grid4-app-shell [id^="aatierdata"].grid4-aa-visible,
body.page-autoattendants #grid4-app-shell [id^="aatierdata"]:not(.grid4-aa-hidden):not(.hide) {
  display: block !important;
}

body.page-autoattendants #grid4-app-shell [id^="aatierdata"].grid4-aa-hidden,
body.page-autoattendants #grid4-app-shell [id^="aatierdata"].hide,
body.page-autoattendants #grid4-app-shell [id^="aatierdata"][style*="display: none"],
body.page-autoattendants #grid4-app-shell [id^="aatierdata"][style*="display:none"] {
  display: none !important;
}

/* Left column = prompt/media area */
body.page-autoattendants #grid4-app-shell
  .attendant-creation [id^="attendant_tier_"].attendant-tier-options > .pull-left {
  float: none !important;
  order: 1 !important;
  flex: 1 1 420px !important;   /* grows/shrinks with modal */
  min-width: 260px !important;  /* don’t crush controls */
}

/* Right column = dial pad */
body.page-autoattendants #grid4-app-shell
  .attendant-creation [id^="attendant_tier_"].attendant-tier-options > .dialpad.pull-right {
  float: none !important;
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important; /* pin to right edge */
  display: inline-block !important;
  max-width: 100% !important;
}

/* Small widths: allow wrapping so nothing overflows */
@media (max-width: 1024px) {
  body.page-autoattendants #grid4-app-shell
    .attendant-creation [id^="attendant_tier_"].attendant-tier-options {
    flex-wrap: wrap !important;
    row-gap: 2rem !important;
  }
  body.page-autoattendants #grid4-app-shell
    .attendant-creation [id^="attendant_tier_"].attendant-tier-options > .dialpad.pull-right {
    margin-left: 0 !important;
    width: 100% !important; /* dial pad drops below on narrow */
  }
}

#grid4-app-shell button#trace-share-btn, button#trace-export-btn {
    margin-bottom: unset !important;
}

/* 1) SIP Flow header sticks to the top (fixes misaligned header on long calls) */
body.page-callhistory #grid4-app-shell .flow-header {
  position: sticky !important;
  top: 0 !important; /* beat inline top values */
  z-index: 5 !important;
}

/* 2) Dark mode: white ladder lines and markers, without touching text */
body.page-callhistory #grid4-app-shell.theme-dark
  .flow-fullscreen-container svg path,
body.page-callhistory #grid4-app-shell.theme-dark
  .flow-fullscreen-container svg circle {
  stroke: #fff !important;
}

/* Only flip dark fills used for shapes (not text) to white */
body.page-callhistory #grid4-app-shell.theme-dark
  .flow-fullscreen-container svg path[fill="#1A1A1A"],
body.page-callhistory #grid4-app-shell.theme-dark
  .flow-fullscreen-container svg rect[fill="#1A1A1A"] {
  fill: #fff !important;
}

/* 3) Keep message-bubble text dark on the white pills */
body.page-callhistory #grid4-app-shell.theme-dark
  .flow-fullscreen-container g[data-msg] text {
  fill: #111 !important; /* or #000 if you prefer */
  font-weight: 600;
}

/* 4) Left-side time scale numbers should be white in dark mode */
body.page-callhistory #grid4-app-shell.theme-dark
  .flow-time text {
  fill: #fff !important;
  opacity: 0.9;
}

body.page-callhistory #grid4-app-shell .svelte-1v18tvj {
     background-color: var(--accent-primary)  !important;
}

span.flow-filter.svelte-6anihf {
    color: white !important;
}

span.sl-sipmethod {
    color: white !important;
}

#grid4-app-shell i.nsicon.nsicon-reply {
    color: white !important;
}

div.flow-time.svelte-tppiux>svg.svelte-tppiux>text.selected.svelte-tppiux.svelte-tppiux {
    fill: white !important;
}


/* ===================================================================
   SECTION: CALENDAR/TIME PICKER ADD-ON FIX (Global)
   - Restore inline icon cell for .input-prepend/.input-append add-ons.
   - Fixes calendar/time icons showing as tall blocks under inputs.
   - Theme-aware background/border; works in light and dark modes.
   - Does not affect SIP Trunk “Header Manipulation” which has a
     more specific rule that still uses flex for its "@" chip.
   =================================================================== */

#grid4-app-shell .input-append > .add-on,
#grid4-app-shell .input-prepend > .add-on {
  /* Revert to inline cell so it sits on the same line as the input */
  display: inline-block !important;              /* beat earlier display:flex */
  vertical-align: middle !important;

  /* Compact sizing to align visually with ~28px inputs */
  padding: 2px 6px !important;
  height: 1.6rem !important;                     /* ~25-26px */
  min-height: 0 !important;                      /* undo the 1.75rem min-height */
  line-height: 1.6rem !important;

  /* Theme-aware surface and border */
  background-color: var(--surface-secondary-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Keep the icon inside small and centered without stretching the cell */
#grid4-app-shell .input-append > .add-on > i[class^="icon-"],
#grid4-app-shell .input-append > .add-on > i[class*=" icon-"],
#grid4-app-shell .input-prepend > .add-on > i[class^="icon-"],
#grid4-app-shell .input-prepend > .add-on > i[class*=" icon-"] {
  display: inline-block !important;
  font-size: 14px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* Optional: tighten seam between input and add-on in Bootstrap 2 groups */
#grid4-app-shell .input-append > .add-on { margin-left: -1px !important; }
#grid4-app-shell .input-prepend > .add-on { margin-right: -1px !important; }



/*presence icons need the default colors restored */
#grid4-app-shell .agent-presence-user-phone.loggedin {
    color: #00A304 !important;
}

#grid4-app-shell .agent-presence-user-phone.loggedout {
    color: #D4D4D4 !important;
}

#grid4-app-shell .agent-presence-user-phone.onphone {
    color: #FF1200 !important;
}



/* Fix the Call Queues container on the call center page */
#home-queues-body {
    min-height: 10rem !important;
    max-height: 30rem !important;
    overflow-y: auto;
    /* max-width: 60rem; */
}



[class^="icon-"], [class*=" icon-"] {
  /* margin-top: 4px !important; */
  margin-left: 0.2rem !important;


}

#grid4-app-shell i.icon-search {
    height: 1.3rem !important;
    margin-top: unset;
    margin-left: unset;
    width: .9rem !important;
}

/* Links inside a hovered table row should be white for contrast */
#grid4-app-shell .table-hover tbody tr:hover
  a:not(.btn, .label, .nav-link, [role='button'], [id^='LinkPager']) {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
}
/* Also ensure visibility when the row is selected/active */
#grid4-app-shell .table tbody tr.selected a:not(.btn, .label, .nav-link, [role='button'], [id^='LinkPager']),
#grid4-app-shell .table tbody tr.active a:not(.btn, .label, .nav-link, [role='button'], [id^='LinkPager']) {
  color: #ffffff !important;
  text-decoration: none;
}

/* Optional: a bit brighter on link hover/focus */
#grid4-app-shell .table-hover tbody tr:hover a:not(.btn, .label, .nav-link, [role='button'], [id^='LinkPager']):hover, #grid4-app-shell .table-hover tbody tr:hover a:not(.btn, .label, .nav-link, [role='button'], [id^='LinkPager']):focus {
    color: #FF2400 !important;
    /*font-weight: 700 !important; */
}

#grid4-app-shell span.dropdown-msg-count.badge.badge-important.hide {
    color: white !important;
}

/*fix tooltip value color while in light mode */
#grid4-app-shell.theme-light span.slider-tooltip-value {
    color: white !important;
}

/* ===================================================================
   ATTENDANT SHIELD (Manager CSS neutralized on /portal/attendant only)
   - Activates when <html data-grid4-skin="off"> is present.
   - Restores Bootstrap 3 defaults Attendant relies on.
   - Keep this block at the very end so it wins in the cascade.
   =================================================================== */

/* Restore light page background (Manager dark BG must not bleed) */
html[data-grid4-skin="off"] body,
html[data-grid4-skin="off"] html {
  background: #fff !important;
  background-color: #fff !important;
}

/* Modals: viewport container; remove Manager top/left/margins/transform hacks */
html[data-grid4-skin="off"] .modal {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important;       /* BS3 default */
  z-index: 1050 !important;
}

/* Attendant/BS3 controls display via fade/in/show; keep it visible when active */
html[data-grid4-skin="off"] .modal.in,
html[data-grid4-skin="off"] .modal.show {
  display: block !important;
}

/* Dialog spacing and centering */
html[data-grid4-skin="off"] .modal-dialog {
  margin: 10px auto !important;      /* BS3 default vertical spacing */
}

/* Modal content: solid white; remove Manager glass/opacity overrides */
html[data-grid4-skin="off"] .modal-content {
  background-color: #fff !important;
  color: #333 !important;
  border: 1px solid rgba(0,0,0,.2) !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Header/Footer surfaces */
html[data-grid4-skin="off"] .modal-header,
html[data-grid4-skin="off"] .modal-footer {
  background-color: #f8f9fa !important;
  border-color: #e5e5e5 !important;
  color: #333 !important;
}

/* Backdrop: full viewport, 0.5 opacity */
html[data-grid4-skin="off"] .modal-backdrop {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  background-color: #000 !important;
  opacity: 0.5 !important;
  z-index: 1040 !important;
}

/* Dropdowns: undo Manager animation/visibility overrides; use BS3 defaults */
html[data-grid4-skin="off"] .dropdown-menu {
  display: none !important;          /* closed */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;
  position: absolute !important;     /* BS3 default */
}
html[data-grid4-skin="off"] .open > .dropdown-menu,
html[data-grid4-skin="off"] .dropdown.open .dropdown-menu,
html[data-grid4-skin="off"] .btn-group.open .dropdown-menu {
  display: block !important;         /* open */
}

/* Defensive: ensure interactions are not disabled by Manager CSS */
html[data-grid4-skin="off"] .modal,
html[data-grid4-skin="off"] .modal * {
  pointer-events: auto !important;
}

/* Optional: revert caret to inherit if Manager forced white */
html[data-grid4-skin="off"] .caret {
  border-top-color: inherit !important;
}

/* End Attendant Shield */


/* ===================================================================
   ATTENDANT CONSOLE — SAFE MODAL/DROPDOWN OVERRIDES (no JS required)
   Rationale: Attendant page does not load our JS, so html[data-grid4-skin="off"]
   may be missing. These selectors key off the Attendant-only .flex-container
   root to neutralize Manager modal/drawer overrides without touching Manager.
   Keep this block at the very end so it wins the cascade.
   =================================================================== */

/* Viewport modal container + stacking fix */
.flex-container ~ .modal {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important; /* Bootstrap 3 default */
  z-index: 1050 !important;    /* Above backdrop */
}
.flex-container ~ .modal.in,
.flex-container ~ .modal.show { /* BS2/BS3 variations used by Attendant */
  display: block !important;
}
/* Center dialog with Bootstrap spacing */
.flex-container ~ .modal .modal-dialog {
  margin: 10px auto !important;
}
/* Solid, fully interactive content surface */
.flex-container ~ .modal .modal-content {
  background-color: #fff !important;
  color: #333 !important;
  border: 1px solid rgba(0,0,0,.2) !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: auto !important;
}
/* Header/Footer surfaces */
.flex-container ~ .modal .modal-header,
.flex-container ~ .modal .modal-footer {
  background-color: #f8f9fa !important;
  border-color: #e5e5e5 !important;
  color: #333 !important;
}
/* Ensure backdrop sits behind modal and covers viewport */
.flex-container ~ .modal-backdrop {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  background-color: #000 !important;
  opacity: 0.5 !important;    /* Bootstrap default */
  z-index: 1040 !important;   /* Below .modal */
}
/* Attendant dropdowns use BS3 defaults; undo Manager animations */
.flex-container ~ .dropdown-menu {
  display: none !important;          /* closed */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;
  position: absolute !important;     /* Bootstrap 3 default */
}
.flex-container ~ .open > .dropdown-menu,
.flex-container ~ .dropdown.open .dropdown-menu,
.flex-container ~ .btn-group.open .dropdown-menu {
  display: block !important;         /* open */
}

/* Extra safety: explicitly scope Attendant modal IDs (no impact on Manager) */
#transfer-options-modal,
#transfer-options-modalOff,
#call-options-modal,
#custom-group-modal {
  z-index: 1050 !important;
}
#transfer-options-modal .modal-content,
#transfer-options-modalOff .modal-content,
#call-options-modal .modal-content,
#custom-group-modal .modal-content {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ===================================================================
   ATTENDANT CONSOLE — HARD OVERRIDES FOR ATTENDANT MODAL IDS
   Neutralize Manager BS2 modal tweaks (top/opacity) and enforce BS3
   behavior for Attendant-only modals. These IDs exist only on
   /portal/attendant, so Manager pages are unaffected.
   =================================================================== */
#transfer-options-modal,
#transfer-options-modalOff,
#call-options-modal,
#custom-group-modal {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 1050 !important;  /* above backdrop */
}
/* Ensure visible when shown (BS2/BS3 class variants) */
#transfer-options-modal.in, #transfer-options-modal.show,
#transfer-options-modalOff.in, #transfer-options-modalOff.show,
#call-options-modal.in, #call-options-modal.show,
#custom-group-modal.in, #custom-group-modal.show {
  display: block !important;
}
/* Kill BS2-style vertical animation that pushes modal off center */
#transfer-options-modal.modal.fade,
#transfer-options-modal.modal.fade.in,
#transfer-options-modalOff.modal.fade,
#transfer-options-modalOff.modal.fade.in,
#call-options-modal.modal.fade,
#call-options-modal.modal.fade.in,
#custom-group-modal.modal.fade,
#custom-group-modal.modal.fade.in {
  top: 0 !important;
  opacity: 1 !important; /* Attendant uses BS3; keep fully visible */
}
/* Dialog spacing (center horizontally; let content height decide vertical) */
#transfer-options-modal .modal-dialog,
#transfer-options-modalOff .modal-dialog,
#call-options-modal .modal-dialog,
#custom-group-modal .modal-dialog { margin: 10px auto !important; }
/* Backdrop stacking safety (applies globally; already used by Manager) */
body > .modal-backdrop { z-index: 1040 !important; }


/* ===================================================================
   ATTENDANT CONSOLE — FINAL MODAL FIXES
   Backdrop is inserted as a child of the modal on Attendant pages.
   Ensure dialog/content paint above that backdrop and are fully opaque.
   Do NOT touch Manager globals; scope by Attendant modal IDs only.
   =================================================================== */
#transfer-options-modal .modal-backdrop,
#transfer-options-modalOff .modal-backdrop,
#call-options-modal .modal-backdrop,
#custom-group-modal .modal-backdrop,
#no-numbers-modal .modal-backdrop,
#user-settings .modal-backdrop {
  /* Keep the dimming layer, but place it under the dialog within the
     modal stacking context and let clicks pass through. */
  z-index: 0 !important;
  pointer-events: none !important;
}
#transfer-options-modal .modal-dialog,
#transfer-options-modalOff .modal-dialog,
#call-options-modal .modal-dialog,
#custom-group-modal .modal-dialog,
#no-numbers-modal .modal-dialog,
#user-settings .modal-dialog {
  position: relative !important;
  z-index: 1 !important; /* above the in-modal backdrop */
}
#transfer-options-modal .modal-content,
#transfer-options-modalOff .modal-content,
#call-options-modal .modal-content,
#custom-group-modal .modal-content,
#no-numbers-modal .modal-content,
#user-settings .modal-content,
#transfer-options-modal .modal-header,
#transfer-options-modalOff .modal-header,
#call-options-modal .modal-header,
#custom-group-modal .modal-header,
#no-numbers-modal .modal-header,
#user-settings .modal-header,
#transfer-options-modal .modal-body,
#transfer-options-modalOff .modal-body,
#call-options-modal .modal-body,
#custom-group-modal .modal-body,
#no-numbers-modal .modal-body,
#user-settings .modal-body,
#transfer-options-modal .modal-footer,
#transfer-options-modalOff .modal-footer,
#call-options-modal .modal-footer,
#custom-group-modal .modal-footer,
#no-numbers-modal .modal-footer,
#user-settings .modal-footer {
  background-color: #fff !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* ===================================================================
   ATTENDANT CONSOLE — FINAL MODAL STACKING AND SURFACE FIXES
   - Attendant inserts .modal-backdrop INSIDE each modal container.
   - This creates a child stacking conflict where backdrop (z-index:1040)
     can sit above the dialog (auto), and our Manager glass/transparency
     rules can make modal surfaces transparent.
   - Solution: for Attendant modal IDs only, push backdrop below dialog
     within the same stacking context, and force solid surfaces.
   - Do not alter Manager/global rules. Keep scope to Attendant IDs.
   =================================================================== */
/* Backdrop lives INSIDE the modal in Attendant: keep it behind dialog */
#transfer-options-modal .modal-backdrop,
#transfer-options-modalOff .modal-backdrop,
#call-options-modal .modal-backdrop,
#custom-group-modal .modal-backdrop,
#no-numbers-modal .modal-backdrop,
#user-settings .modal-backdrop,
#offnet-transfer-modal .modal-backdrop {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  margin: 0 !important;
  background-color: #000 !important;
  opacity: 0.5 !important;      /* Bootstrap default dim */
  z-index: 0 !important;        /* below the dialog inside the same modal */
}
/* Ensure dialog paints above the in-container backdrop */
#transfer-options-modal .modal-dialog,
#transfer-options-modalOff .modal-dialog,
#call-options-modal .modal-dialog,
#custom-group-modal .modal-dialog,
#no-numbers-modal .modal-dialog,
#user-settings .modal-dialog,
#offnet-transfer-modal .modal-dialog {
  position: relative !important;
  z-index: 1 !important;
}
/* Kill transparency leaks: force solid modal surfaces on Attendant */
#transfer-options-modal .modal-content,
#transfer-options-modalOff .modal-content,
#call-options-modal .modal-content,
#custom-group-modal .modal-content,
#no-numbers-modal .modal-content,
#user-settings .modal-content,
#offnet-transfer-modal .modal-content,
#transfer-options-modal .modal-header,
#transfer-options-modalOff .modal-header,
#call-options-modal .modal-header,
#custom-group-modal .modal-header,
#no-numbers-modal .modal-header,
#user-settings .modal-header,
#offnet-transfer-modal .modal-header,
#transfer-options-modal .modal-body,
#transfer-options-modalOff .modal-body,
#call-options-modal .modal-body,
#custom-group-modal .modal-body,
#no-numbers-modal .modal-body,
#user-settings .modal-body,
#offnet-transfer-modal .modal-body,
#transfer-options-modal .modal-footer,
#transfer-options-modalOff .modal-footer,
#call-options-modal .modal-footer,
#custom-group-modal .modal-footer,
#no-numbers-modal .modal-footer,
#user-settings .modal-footer,
#offnet-transfer-modal .modal-footer {
  background-color: #fff !important;
  opacity: 1 !important;
}



div#email-report {
    margin-top: -300px !important;
}

div#write-routeprofile {
    height: 79%;
    margin-top: -301.195px !important;
}


#grid4-app-shell.theme-light .dropdown-column > li > .checkbox
{
color:white !important;
}

#grid4-app-shell.theme-light .alert.alert-info.text-center {
  color:white !important;
  background-color: #555 !important;

}



#grid4-app-shell span#current-folder, span#current-group  {
    color: white !important;
}

.alert-info.text-center > strong {
    color: var(--accent-primary) !important;
}
/*
#grid4-app-shell button.close {
    filter: invert(1) contrast(2) brightness(5.5);
}
*/
#grid4-app-shell.theme-light i.caret {
    border-top: 4px solid var(--accent-primary) !important;
}

#grid4-app-shell p.caption {
    color: var(--primary-text);
    background-color: var(--modal-bg);
}

#grid4-app-shell.theme-light button.close.cancel {
    filter: contrast(2) brightness(-2.5);
}

/* Use theme surface instead of transparency on modal body */
.modal-body { background-color: var(--modal-bg) !important; opacity: 1 !important; }


#grid4-app-shell #cc-settings-btn {
    /* padding-left: 4px !important; */
    gap: 2px !important;
    margin-inline: 5px !important;
}

#grid4-app-shell .btn-group-full {
    width: 98% !important;
    margin: auto !important;
    margin-left: 0px !important;
}

i.nsicon.nsicon-contacts {
    color: white !important;
}

input#add-template
{
   right: unset !important;
   bottom: unset !important;
}

.input-append input, .input-prepend input, .input-append select, .input-prepend select, .input-append .uneditable-input, .input-prepend .uneditable-input {
    position: relative;
    margin-bottom: 0;
    vertical-align: middle !important;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.blocknumbers-modal {
    width: fit-content !important;
}

#grid4-app-shell.theme-dark ~ .modal .modal-body,
#grid4-app-shell.theme-dark .modal .modal-body { background-color: var(--modal-bg) !important; }

select#templateApplier {
    font-size: 10px !important;
    max-block-size: min-content ! IMPORTANT;
    MAX-WIDTH: min-content !important;
}

.dropdown-menu.pull-right.form-actions.template-selector
 {
   min-width:fit-content !important;
}

div#config-save-bar {
    max-width: 50% !important;
}
div#left-panel {
    margin-top: 50px !important;
}
input#copy-template, input#delete-template {
    width: unset !important;
}

#grid4-app-shell.theme-dark input.compound-select-filter {
    /* color: #fffefe12 !important; */
    background-color: black !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-weight:500 !important;
}

#grid4-app-shell.theme-dark .compound-select-option:hover

 {
  background: var(--accent-primary) !important;
  color: var(--text-primary) !important;
}

div#chart_div_AnnotationChart_legendContainer {
    color: black !important;
}

body.theme-dark ul#ui-id-1
 {
    background-color: black !important;
}

body.theme-dark option
 {
    -webkit-text-fill-color: var(--text-primary) !important;
    background-color: black !important;
}

div#\37 66sy {
    top: 50% !important;
}

span.uneditable-input {
    background: var(--modal-bg) !important;
}

/* ============================================
   SPECIFIC MODAL FIXES (PAGE-SCOPED)
   ============================================ */
/* Center the Fax > Number Permissions modal vertically a bit lower */
body.theme-dark .modal.grid4-number-permissions,
body.theme-light .modal.grid4-number-permissions,
.modal.grid4-number-permissions {
  top: 50% !important;
}

div#write-uiconfig {
    top: 30% !important;
}
body.theme-dark .selectivity-multiple-input-container {
    background-color: var(--modal-bg) !important;
}

/* Time Frames modal: fix first/last rows (tr.gray-out) in dark mode */
body.theme-dark.page-timeframes .modal table tr.gray-out,
body.theme-dark.page-timeframes .modal table tr.gray-out td,
body.theme-dark.page-timeframes .modal .timeframe-details tr.gray-out,
body.theme-dark.page-timeframes .modal .timeframe-details tr.gray-out td {
  background-color: var(--surface-secondary-bg) !important;
  color: var(--text-secondary) !important;
}

/* Ensure disabled labels inside gray-out rows are readable */
body.theme-dark.page-timeframes .modal td.opaque-text {
  color: var(--text-secondary) !important;
}


body.theme-dark .modal div .selectivity-result-item {
    background: black !important;
}

body.theme-dark .modal div .selectivity-result-item.highlight

 {
    background-color: #785EF0 !important;
    color: white;
}

input#status-filter-add {
    width: calc(100% - 80px) !important;
}

/*Attendant Console limited customization 

.container-fluid {
  padding-right: unset !important;
   padding-left: unset !important;
    margin-right: auto;
    margin-left: auto;
}

.navbar-collapse.collapse {
    background-color: #52B4FA !important;
    color: white !important;
}

*/
.specific-date-rows {

    width: 92.75% !important;
}

body.theme-dark .modal pre.source-code.xml {
    background: black !important;
}

body.theme-dark .modal pre.source-code.xml {
    color: antiquewhite !important;
}

body.theme-dark .google-visualization-tooltip {
   background-color: var(--surface-secondary-bg) !important;
}

.nav-pills>.active>a, .nav-pills>.active>a:hover, .nav-pills>.active>a:focus {
    color: white !important;
    background-color: var(--accent-primary) !important;
}

body.theme-dark a.transcription-controls.transcription-play-comment, body.theme-dark a.transcription-controls.transcription-copy-comment
 {
    filter: invert(1);
}
body.theme-dark .transcription-controls
 {
    filter: invert(1);
}

.queue-slider, .agent-slider, .cc-settings-slider {
    width: 260px;
    margin-top: 9px;
    margin-left: 1rem !important;
}

dl.slider-maxlength-labels.slider-labels {
    /* padding-left: 1rem; */
    margin-left: 1rem !important;
}

input#by_extension {
    margin-left: .1px;

}

#bulkedit-phonenumbers {
    width: 600px;
}

select#ip_control_dd {
    width: fit-content !important;
}

body.theme-dark  .table-striped tbody>tr:nth-child(odd)>td {
    background-color: var(--accent-primary) !important;
}

body.theme-dark  .refresh-icon.py-4 {
    /* color: black; */
    /* color: unset !important; */
    /* background: black !important; */
    filter: invert(3) brightness(3.5);
    /* font-palette: unset; */
    /* border: white; */
}

span#language_name_tier_1 {
    width: fit-content !important;
    color: white;
}
span#language_name_tier_2 {
    width: fit-content !important;
    color: white;
}

i.nsicon.nsicon-language {
    color: white;
}

/* ===================================================================
   FULLSCREEN MODE: SIP FLOW DARK THEME FIX
   ===================================================================
 * PROBLEM: When .flow-fullscreen-container enters fullscreen mode via
 * the browser Fullscreen API, the NetSapiens Svelte components have
 * hardcoded white backgrounds that override our dark theme.
 *
 * SOLUTION: Target .flow-fullscreen-container:fullscreen and its
 * children directly. Uses body.theme-dark which persists during
 * fullscreen (synced by JS in grid4-portal-skin-v5.0.11.js).
 *
 * Elements targeted (from diagnostic):
 * - .flow-fullscreen-container: main container (white → dark)
 * - .svelte-y6c6zk: flow header boxes (7 instances, white → dark)
 * - #search.svelte-1l4izdq: search input (white → dark)
 * - SVG paths/circles: stroke color for ladder diagram
 * - .flow-time text: time scale labels
 */

/* 1. Main fullscreen container background */
body.theme-dark .flow-fullscreen-container:fullscreen,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen {
  background-color: var(--surface-primary-bg, #333) !important;
}

/* 2. Flow header boxes (svelte-y6c6zk) - the device name boxes at top */
body.theme-dark .flow-fullscreen-container:fullscreen .svelte-y6c6zk,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen .svelte-y6c6zk {
  background-color: var(--surface-secondary-bg, #181818ed) !important;
  color: var(--text-primary, #e9ecef) !important;
}

/* 3. Search input in fullscreen */
body.theme-dark .flow-fullscreen-container:fullscreen #search.svelte-1l4izdq,
body.theme-dark .flow-fullscreen-container:fullscreen input.svelte-1l4izdq,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen #search.svelte-1l4izdq,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen input.svelte-1l4izdq {
  background-color: var(--surface-secondary-bg, #181818ed) !important;
  color: var(--text-primary, #e9ecef) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

/* 4. SVG paths and circles - white strokes for dark mode ladder diagram */
body.theme-dark .flow-fullscreen-container:fullscreen svg path,
body.theme-dark .flow-fullscreen-container:fullscreen svg circle,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen svg path,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen svg circle {
  stroke: #fff !important;
}

/* 5. Dark fills in SVG → white (arrow heads, markers) */
body.theme-dark .flow-fullscreen-container:fullscreen svg path[fill="#1A1A1A"],
body.theme-dark .flow-fullscreen-container:fullscreen svg rect[fill="#1A1A1A"],
body.theme-dark .flow-fullscreen-container:-webkit-full-screen svg path[fill="#1A1A1A"],
body.theme-dark .flow-fullscreen-container:-webkit-full-screen svg rect[fill="#1A1A1A"] {
  fill: #fff !important;
}

/* 6. Time scale text on left side */
body.theme-dark .flow-fullscreen-container:fullscreen .flow-time text,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen .flow-time text {
  fill: #fff !important;
}

/* 7. Selected time text highlight */
body.theme-dark .flow-fullscreen-container:fullscreen .flow-time text.selected,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen .flow-time text.selected {
  fill: #fff !important;
}

/* 8. SIP method labels and filter text */
body.theme-dark .flow-fullscreen-container:fullscreen span.flow-filter,
body.theme-dark .flow-fullscreen-container:fullscreen span.sl-sipmethod,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen span.flow-filter,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen span.sl-sipmethod {
  color: #fff !important;
}

/* 9. Pre/code blocks (SIP message details on right panel) 
body.theme-dark .flow-fullscreen-container:fullscreen pre.box,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen pre.box {
  color: var(--text-primary, #e9ecef) !important;
} */

/* 10. Light mode fullscreen - ensure it stays light (no changes needed) */
body:not(.theme-dark) .flow-fullscreen-container:fullscreen,
body:not(.theme-dark) .flow-fullscreen-container:-webkit-full-screen {
  background-color: #fff !important;
}

/* End Fullscreen SIP Flow Fix */
body.theme-dark .assigned-label, body.theme-dark .assigned-feature {
    color: white !important;
}
#grid4-app-shell.theme-light .dropdown-menu > li > a {
    color: white !important;
}