@charset "UTF-8";

/* ============================================================
   VTIGER CRM  CUSTOM STYLESHEET
   Clean rewrite. No patches. Single source of truth.

   Sections:
    1.  Fonts & imports
    2.  Color tokens   edit all colours here
    3.  Base / reset
    4.  Layout offsets
    5.  Topbar
    6.  Sidebar
    7.  Module header
    8.  Essentials panel
    9.  List view table
   10.  Buttons   global .btn-default applied here (all views)
   11.  Toolbar & pagination
   12.  Row action icons
   13.  Forms, dropdowns, panels, modals
   14.  Custom tabs
   15.  Responsive & print
   ============================================================ */

/* -- 1. Fonts -- */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
/* ============================================================
   ===========  INLINED FROM list-view.css  ==================
   (was @import url("list-view.css");)
   ============================================================ */

.configColumnsContainer .modal-body {
  padding:    24px 28px !important;
  min-height: 360px !important;
  /* Bootstrap .row uses -15px margins; without this they escape the modal-body
     padding box and trigger a horizontal scrollbar at the bottom of the modal. */
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
/* Use CSS Grid for the two-column layout: bulletproof, immune to Bootstrap's
   `.col-lg-6 { width: 50%; float: left }` and to flex-wrap edge cases that
   were stacking the columns vertically inside the left half of the modal. */
.configColumnsContainer .modal-body > .row {
  margin-left:  0 !important;
  margin-right: 0 !important;
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   24px !important;
  align-items:           stretch !important;
}
/* Bootstrap 3's `.row::before / ::after` clearfix pseudos become real grid
   items when the parent is `display: grid`, occupying two cells and pushing
   the actual columns onto the diagonal.  Hide them. */
.configColumnsContainer .modal-body > .row::before,
.configColumnsContainer .modal-body > .row::after {
  display: none !important;
  content: none !important;
}
.configColumnsContainer .modal-body > .row > .col-lg-6 {
  /* Reset Bootstrap's col-lg-6 sizing — grid owns layout now. We deliberately
     do NOT touch padding here so that the more-specific
     .configColumnsContainer .selectedFieldsContainer / .availFiedlsContainer
     rules below can apply their card padding (16px). */
  width:      auto !important;
  max-width:  none !important;
  flex:       initial !important;
  margin:     0 !important;
  float:      none !important;
  min-width:  0 !important;
  display:    flex !important;
  flex-direction: column !important;
}

.configColumnsContainer h5 {
  font-size:      11px !important;
  font-weight:    700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color:          var(--color-text-muted) !important;
  margin:         0 0 12px 0 !important;
  font-family:    var(--font-family) !important;
}

.configColumnsContainer .selectedFieldsContainer {
  /* Replaced the right-border separator with a proper card for symmetry
     against the available-fields card on the right. */
  background:    var(--color-card) !important;
  border:        1px solid var(--line) !important;
  border-radius: 10px !important;
  padding:       16px !important;
  min-height:    320px !important;
  display:       flex !important;
  flex-direction:column !important;
}
.configColumnsContainer .selectedFieldsContainer .selectedFieldsListContainer {
  flex:        1 1 auto !important;
  min-height:  0 !important;
  margin-top:  4px !important;
  max-height:  320px !important;
  overflow-y:  auto !important;
  overflow-x:  hidden !important;
  padding-right: 4px !important;
}

/* Native scrollbar styling for both Configure Columns lists.
   Replaces the malihu/mCustomScrollbar plugin that previously wrapped
   the contents in .mCSB_container — that wrapper interfered with the
   grid layout and broke instaFilta's target lookup. */
.configColumnsContainer .selectedFieldsContainer .selectedFieldsListContainer::-webkit-scrollbar,
.configColumnsContainer .availFiedlsContainer .avialFieldsListContainer::-webkit-scrollbar {
  width:  8px !important;
  height: 8px !important;
}
.configColumnsContainer .selectedFieldsContainer .selectedFieldsListContainer::-webkit-scrollbar-track,
.configColumnsContainer .availFiedlsContainer .avialFieldsListContainer::-webkit-scrollbar-track {
  background:    transparent !important;
  border-radius: 4px !important;
}
.configColumnsContainer .selectedFieldsContainer .selectedFieldsListContainer::-webkit-scrollbar-thumb,
.configColumnsContainer .availFiedlsContainer .avialFieldsListContainer::-webkit-scrollbar-thumb {
  background:    rgba(var(--theme-primary-rgb), 0.25) !important;
  border-radius: 4px !important;
}
.configColumnsContainer .selectedFieldsContainer .selectedFieldsListContainer::-webkit-scrollbar-thumb:hover,
.configColumnsContainer .availFiedlsContainer .avialFieldsListContainer::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--theme-primary-rgb), 0.45) !important;
}
.configColumnsContainer .selectedFieldsContainer .selectedFieldsListContainer,
.configColumnsContainer .availFiedlsContainer .avialFieldsListContainer {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(var(--theme-primary-rgb), 0.25) transparent !important;
}

.configColumnsContainer .selectedFieldsContainer ul {
  list-style: none !important;
  padding:    0 !important;
  margin:     0 !important;
}

/* Each selected field row */
.configColumnsContainer .selectedFieldsContainer ul .item {
  display:       flex !important;
  align-items:   center !important;
  gap:           8px !important;
  width:         100% !important;
  padding:       7px 10px !important;
  border-radius: 7px !important;
  border:        1px solid transparent !important;
  margin-bottom: 4px !important;
  background:    var(--color-surface-light) !important;
  transition:    background 0.15s, border-color 0.15s !important;
  cursor:        grab !important;
  box-sizing:    border-box !important;
}
.configColumnsContainer .selectedFieldsContainer ul .item:hover {
  background:    var(--color-primary-tint) !important;
  border-color:  rgba(var(--theme-primary-rgb), 0.20) !important;
}
.configColumnsContainer .selectedFieldsContainer ul .active {
  background:   var(--color-primary-tint-2) !important;
  border-color: var(--color-primary) !important;
}

/* Drag handle icon */
.configColumnsContainer .selectedFieldsContainer ul .item .dragContainer {
  flex-shrink: 0 !important;
  opacity:     0.35 !important;
  line-height: 1 !important;
}
.configColumnsContainer .selectedFieldsContainer ul .item:hover .dragContainer {
  opacity: 0.65 !important;
}
.configColumnsContainer .selectedFieldsContainer ul .item .dragContainer img {
  width:  14px !important;
  height: 14px !important;
  display: block !important;
}

/* Field label text */
.configColumnsContainer .selectedFieldsContainer ul .item .fieldLabel {
  flex:        1 1 auto !important;
  font-size:   13px !important;
  font-weight: 500 !important;
  color:       var(--text) !important;
  font-family: var(--font-family) !important;
  padding:     0 !important;
}

/* Remove (×) button */
.configColumnsContainer .selectedFieldsContainer ul .item .removeField {
  flex-shrink:  0 !important;
  font-size:    13px !important;
  color:        var(--muted) !important;
  line-height:  1 !important;
  padding:      2px 4px !important;
  border-radius: 4px !important;
  transition:   color 0.15s, background 0.15s !important;
  cursor:       pointer !important;
}
.configColumnsContainer .selectedFieldsContainer ul .item:hover .removeField {
  color: var(--red) !important;
}

.configColumnsContainer .availFiedlsContainer {
  /* Card wrapper, mirroring the selected-fields panel on the left. */
  background:    var(--color-card) !important;
  border:        1px solid var(--line) !important;
  border-radius: 10px !important;
  padding:       16px !important;
  display:       flex !important;
  flex-direction:column !important;
  min-height:    320px !important;
}
/* NOTE: previously this rule was prefixed with a stray '/' which made the
   selector invalid and the search input went unstyled. */
.configColumnsContainer .availFiedlsContainer .searchAvailFields {
  width:         100% !important;
  margin-bottom: 12px !important;
  box-sizing:    border-box !important;
}

.configColumnsContainer .availFiedlsContainer .avialFieldsListContainer {
  margin-top:    0 !important;
  flex:          1 1 auto !important;
  min-height:    0 !important;
  max-height:    320px !important;
  overflow-y:    auto !important;
  overflow-x:    hidden !important;
  border:        1px solid var(--line) !important;
  border-radius: 8px !important;
  background:    var(--color-card) !important;
}

/* accordion panel */
.configColumnsContainer .availFiedlsContainer #accordion .panel {
  border:     none !important;
  box-shadow: none !important;
  margin:     0 !important;
}
.configColumnsContainer .availFiedlsContainer #accordion .panel-body {
  padding: 0 0 4px 0 !important;
  border:  none !important;
}

/* Accordion section toggle button */
.configColumnsContainer .availFiedlsContainer #accordion .availFieldBlock {
  padding:       0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.configColumnsContainer .availFiedlsContainer #accordion .availFieldBlock a {
  display:        flex !important;
  align-items:    center !important;
  gap:            6px !important;
  padding:        9px 14px !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  color:          var(--text) !important;
  text-decoration: none !important;
  background:     var(--color-surface-light) !important;
  letter-spacing: 0.02em !important;
  font-family:    var(--font-family) !important;
  transition:     background 0.15s, color 0.15s !important;
}
.configColumnsContainer .availFiedlsContainer #accordion .availFieldBlock a:hover,
.configColumnsContainer .availFiedlsContainer #accordion .availFieldBlock a:focus {
  background:  var(--color-primary-tint) !important;
  color:       var(--color-primary) !important;
  font-weight: 600 !important;
}
.configColumnsContainer .availFiedlsContainer #accordion .availFieldBlock a span {
  flex:      1 1 auto !important;
  color:     inherit !important;
}
.configColumnsContainer .availFiedlsContainer #accordion .availFieldBlock i {
  font-size:   11px !important;
  flex-shrink: 0 !important;
  color:       var(--muted) !important;
  padding:     0 !important;
  transition:  transform 0.2s !important;
}

/* Filtered-out rows in the Configure Columns search.
   The .item rule below uses display:flex !important, so the filter
   needs an !important hide rule with equal-or-greater specificity. */
.configColumnsContainer .availFiedlsContainer #accordion .item.is-filtered-out,
.configColumnsContainer .availFiedlsContainer .instafilta-section.is-filtered-out {
  display: none !important;
}

/* Each available field item */
.configColumnsContainer .availFiedlsContainer #accordion .item {
  display:       flex !important;
  align-items:   center !important;
  width:         100% !important;
  padding:       7px 14px !important;
  border-radius: 0 !important;
  cursor:        pointer !important;
  transition:    background 0.12s !important;
  box-sizing:    border-box !important;
  border-bottom: 1px solid var(--line) !important;
}
.configColumnsContainer .availFiedlsContainer #accordion .item:last-child {
  border-bottom: none !important;
}
.configColumnsContainer .availFiedlsContainer #accordion .item:hover {
  background: var(--color-primary-tint) !important;
  cursor:     pointer !important;
}
.configColumnsContainer .availFiedlsContainer #accordion .item .fieldLabel {
  font-size:       13px !important;
  font-weight:     400 !important;
  color:           var(--text) !important;
  font-family:     var(--font-family) !important;
  padding:         0 !important;
  text-decoration: none !important;
}
.configColumnsContainer .availFiedlsContainer #accordion .item:hover .fieldLabel {
  color: var(--color-primary) !important;
}

/* "+" icon that appears on hover */
.configColumnsContainer .availFiedlsContainer #accordion .item:hover .addField {
  color: var(--color-primary) !important;
}

/* col-lg-10 wrapper — let it fill full width */
.configColumnsContainer .availFiedlsContainer .row {
  margin: 0 !important;
}
.configColumnsContainer .availFiedlsContainer .row .col-lg-10 {
  width:   100% !important;
  padding: 0 !important;
  float:   none !important;
}


.quickPreview {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  min-height:     0 !important;
  width:          100% !important;
  height:         100% !important;
  overflow:       hidden !important;
  position:       relative !important;
}

/* -- Modal wrappers passthrough -- */
.quickPreview .quick-preview-modal,
.quickPreview .quick-preview-modal.modal-content {
  border:         none !important;
  border-radius:  0 !important;
  box-shadow:     none !important;
  background:     transparent !important;
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  min-height:     0 !important;
  overflow:       hidden !important;
}

/* -- Modal body scrollable -- */
.quickPreview .modal-body {
  flex:        1 1 auto !important;
  min-height:  0 !important;
  overflow-y:  auto !important;
  overflow-x:  hidden !important;
  padding:     0 !important;
  margin:      0 !important;
  background:  var(--color-card) !important;
  max-height:  none !important;
  height:      auto !important;
}

/* Kill perfectScrollbar */
.quickPreview .ps-scrollbar-x-rail,
.quickPreview .ps-scrollbar-y-rail,
.quickPreview .ps__rail-x,
.quickPreview .ps__rail-y,
#helpPageOverlay .ps-scrollbar-x-rail,
#helpPageOverlay .ps-scrollbar-y-rail,
#helpPageOverlay .ps__rail-x,
#helpPageOverlay .ps__rail-y { display: none !important; }

/* -- HEADER: clean white card with thin primary accent line -- */
.quickPreview .quickPreviewModuleHeader {
  padding:       16px 48px 16px 18px !important; /* right pad leaves room for × button */
  margin:        0 !important;
  background:    var(--color-card) !important;
  border-top:    3px solid var(--color-primary) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  flex-shrink:   0 !important;
  position:      relative !important;
  overflow:      visible !important;
}

/* qp-heading: flex row, avatar left, info right */
.quickPreview .quickPreviewModuleHeader .qp-heading {
  display:     flex !important;
  align-items: center !important;
  gap:         12px !important;
  margin:      0 !important;
}
/* inner Bootstrap col from DetailViewHeaderTitle — treat as flex child */
.quickPreview .quickPreviewModuleHeader .qp-heading > [class*="col-"] {
  flex:      1 1 auto !important;
  width:     auto !important;
  max-width: none !important;
  padding:   0 !important;
  float:     none !important;
  min-width: 0 !important;
}

/* record-header: flex row (avatar + info side by side)
   Override marketing skin's min-height: 80px */
.quickPreview .quickPreviewModuleHeader .record-header {
  display:    flex !important;
  align-items: center !important;
  gap:        12px !important;
  min-height: 0 !important;    /* kill marketing-skin 80 px */
}

/* Avatar container */
.quickPreview .quickPreviewModuleHeader .recordImage,
.quickPreview .quickPreviewModuleHeader [class*="recordImage"] {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           44px !important;
  height:          44px !important;
  min-width:       44px !important;
  max-width:       44px !important;
  border-radius:   10px !important;
  overflow:        hidden !important;
  flex-shrink:     0 !important;
  background:      var(--color-primary-tint) !important;
  box-shadow:      none !important;
}
/* Contact photo: fills the container */
.quickPreview .quickPreviewModuleHeader .recordImage img:not(.summaryImg) {
  width:         44px !important;
  height:        44px !important;
  max-width:     44px !important;
  max-height:    44px !important;
  border-radius: 10px !important;
  object-fit:    cover !important;
  display:       block !important;
  padding:       0 !important;
  filter:        none !important;
  opacity:       1 !important;
}
/* Default silhouette placeholder: natural grey icon on tinted bg */
.quickPreview .quickPreviewModuleHeader .recordImage img.summaryImg {
  width:      24px !important;
  height:     24px !important;
  max-width:  24px !important;
  max-height: 24px !important;
  object-fit: contain !important;
  display:    block !important;
  padding:    0 !important;
  filter:     none !important;
  opacity:    0.5 !important;
}
/* Module icon initials fallback */
.quickPreview .quickPreviewModuleHeader .recordImage .name {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           100% !important;
  height:          100% !important;
}
.quickPreview .quickPreviewModuleHeader .recordImage .name span {
  font-size:   15px !important;
  font-weight: 700 !important;
  color:       var(--color-primary) !important;
  text-shadow: none !important;
  line-height: 1 !important;
}

/* recordBasicInfo: grows to fill remaining header width */
.quickPreview .quickPreviewModuleHeader .recordBasicInfo {
  flex:      1 1 auto !important;
  min-width: 0 !important;
  width:     100% !important;
  overflow:  hidden !important;
}

/* info-row wrappers — kill Bootstrap row negative margins */
.quickPreview .quickPreviewModuleHeader .info-row {
  margin-left:  0 !important;
  margin-right: 0 !important;
  overflow:     hidden !important;
  white-space:  nowrap !important;
  text-overflow: ellipsis !important;
  width:        100% !important;
}

/* col-lg-7.fieldLabel inside header form rows — full width */
.quickPreview .quickPreviewModuleHeader .info-row [class*="col-"] {
  width:         100% !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
  float:         none !important;
}

/* Record name — also override marketing skin's h4 { height: 25px } */
.quickPreview .quickPreviewModuleHeader h4,
.quickPreview .quickPreviewModuleHeader .name h4,
.quickPreview .quickPreviewModuleHeader .recordLabel {
  font-family: var(--font-family) !important;
  font-size:   14px !important;
  font-weight: 700 !important;
  color:       var(--color-text) !important;
  margin:      0 0 2px !important;
  height:      auto !important;    /* kill marketing 25 px fixed height */
  line-height: 1.35 !important;
  text-align:  left !important;
  white-space: nowrap !important;
  overflow:    hidden !important;
  text-overflow: ellipsis !important;
}
/* recordLabel span inside h4 */
.quickPreview .quickPreviewModuleHeader .recordLabel span {
  color: var(--color-text) !important;
}

/* Sub-info rows: phone, email, Show Map */
.quickPreview .quickPreviewModuleHeader .recordBasicInfo span,
.quickPreview .quickPreviewModuleHeader .recordBasicInfo a,
.quickPreview .quickPreviewModuleHeader .fieldLabel span {
  font-size:       11.5px !important;
  color:           var(--color-text-muted) !important;
  line-height:     1.55 !important;
  text-align:      left !important;
  text-decoration: none !important;
  display:         inline !important;
  white-space:     nowrap !important;
  overflow:        hidden !important;
  text-overflow:   ellipsis !important;
}
.quickPreview .quickPreviewModuleHeader .recordBasicInfo a:hover {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}

/* Location pin icon */
.quickPreview .quickPreviewModuleHeader .recordBasicInfo .fa {
  font-size:    10px !important;
  margin-right: 3px !important;
  color:        var(--color-text-muted) !important;
}

/* -- Header controls: nav arrows + close grouped in one flex row top-right -- */
.quickPreview .qp-header-controls {
  position:    absolute !important;
  top:         10px !important;
  right:       10px !important;
  display:     flex !important;
  align-items: center !important;
  gap:         5px !important;
  z-index:     3 !important;
}

/* Close button: part of the flex group, not independently positioned */
.quickPreview .close {
  position:        static !important;
  top:             auto !important;
  right:           auto !important;
  font-size:       13px !important;
  font-weight:     400 !important;
  color:           var(--color-text-muted) !important;
  opacity:         1 !important;
  background:      rgba(0,0,0,0.04) !important;
  border:          1px solid var(--color-border-light) !important;
  cursor:          pointer !important;
  text-shadow:     none !important;
  z-index:         1 !important;
  width:           26px !important;
  height:          26px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  border-radius:   5px !important;
  transition:      all 0.15s !important;
  line-height:     1 !important;
  padding:         0 0 1px 0 !important;
}
.quickPreview .close:hover {
  color:        #ffffff !important;
  background:   var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}

/* Nav prev/next buttons */
.quickPreview .qp-nav-btn {
  width:           26px !important;
  height:          26px !important;
  padding:         0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  border:          1px solid var(--color-border-light) !important;
  border-radius:   5px !important;
  background:      rgba(0,0,0,0.04) !important;
  color:           var(--color-text-muted) !important;
  font-size:       11px !important;
  cursor:          pointer !important;
  transition:      all 0.15s !important;
  box-shadow:      none !important;
}
.quickPreview .qp-nav-btn:hover:not([disabled]) {
  border-color: var(--color-primary) !important;
  color:        var(--color-primary) !important;
  background:   rgba(var(--theme-primary-rgb), 0.06) !important;
}
.quickPreview .qp-nav-btn[disabled] {
  opacity: 0.30 !important;
  cursor:  not-allowed !important;
}

/* Record name: clickable link in quick preview header */
.quickPreview .qp-record-link {
  text-decoration: none !important;
  color:           inherit !important;
  cursor:          pointer !important;
}
.quickPreview .qp-record-link:hover .recordLabel,
.quickPreview .qp-record-link:hover .recordLabel span {
  color:           var(--color-primary) !important;
  text-decoration: underline !important;
}

/* -- ACTIONS BAR (legacy, kept for JS hooks) -- */
.quickPreview .quickPreviewActions {
  display:         none !important;  /* removed from layout, hidden in case JS still references it */
  align-items:     center !important;
  justify-content: space-between !important;
  padding:         10px 20px !important;
  background:      var(--color-card) !important;
  border-bottom:   1px solid var(--color-border) !important;
  flex-shrink:     0 !important;
}

/* Reset Bootstrap pull-left/pull-right floats */
.quickPreview .quickPreviewActions .btn-group.pull-left {
  float: none !important;
  order: 1 !important;
}
.quickPreview .quickPreviewActions .btn-group.pull-right {
  float:       none !important;
  order:       2 !important;
  margin-left: auto !important;
}

/* View Details button */
.quickPreview .quickPreviewActions .btn-success {
  height:        32px !important;
  padding:       0 16px !important;
  border-radius: 7px !important;
  font-size:     12px !important;
  font-weight:   600 !important;
  background:    var(--color-primary) !important;
  border:        1px solid var(--color-primary-hover) !important;
  color:         var(--color-card) !important;
  font-family:   var(--font-family) !important;
  display:       inline-flex !important;
  align-items:   center !important;
  box-shadow:    0 2px 6px rgba(46,120,255,0.25) !important;
}
.quickPreview .quickPreviewActions .btn-success:hover {
  background: var(--color-primary-hover) !important;
}

/* Nav arrows */
.quickPreview .quickPreviewActions .btn-default {
  width:           30px !important;
  height:          30px !important;
  padding:         0 !important;
  border-radius:   6px !important;
  border:          1px solid var(--color-border) !important;
  background:      var(--color-card) !important;
  color:           var(--color-text-muted) !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  font-size:       12px !important;
  box-shadow:      none !important;
}
.quickPreview .quickPreviewActions .btn-default:hover:not([disabled]) {
  border-color: var(--color-primary) !important;
  color:        var(--color-primary) !important;
  background:   var(--color-row-hover) !important;
}
.quickPreview .quickPreviewActions .btn-default[disabled] {
  opacity: 0.35 !important;
  cursor:  not-allowed !important;
}

/* -- SUMMARY FIELDS: mirrors .summaryFieldRow layout from detail view -- */
.quickPreview .quickPreviewSummary {
  padding:       0 !important;
  background:    var(--color-card) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  margin-bottom: 0 !important;
}

/* Container: column stack of rows */
.quickPreview .qp-fields-grid {
  display:        flex !important;
  flex-direction: column !important;
  border-top:     1px solid var(--color-border-light) !important;
}

/* Each row: label | value  (same grid as detail view summaryFieldRow) */
.quickPreview .qp-field {
  display:               grid !important;
  grid-template-columns: minmax(130px, 38%) minmax(0, 1fr) !important;
  align-items:           stretch !important;
  border-top:            1px solid var(--color-border-light) !important;
  min-width:             0 !important;
}
.quickPreview .qp-field:first-child {
  border-top: 0 !important;
}

/* Label cell — tinted background, themed text */
.quickPreview .qp-field .fieldLabel {
  min-width:    0 !important;
  padding:      11px 12px 11px 16px !important;
  background:   rgba(var(--theme-primary-rgb), 0.035) !important;
  border-right: 1px solid var(--color-border-light) !important;
  font-family:  var(--font-family) !important;
  font-size:    12px !important;
  font-weight:  600 !important;
  color:        rgba(var(--theme-primary-rgb), 0.84) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height:  1.35 !important;
  display:      flex !important;
  align-items:  center !important;
  overflow:     hidden !important;
  text-overflow: ellipsis !important;
  white-space:  nowrap !important;
}

/* Value cell — white background, regular text */
.quickPreview .qp-field .fieldValue {
  min-width:   0 !important;
  padding:     11px 14px 11px 12px !important;
  background:  var(--color-card) !important;
  font-size:   var(--field-font-size) !important;
  font-weight: var(--field-font-weight) !important;
  color:       var(--color-text) !important;
  font-family: var(--font-family) !important;
  word-break:  break-word !important;
  line-height: 1.45 !important;
  overflow:    visible !important;
}
.quickPreview .qp-field .fieldValue .value {
  display:          block !important;
  word-break:       break-word !important;
  overflow-wrap:    anywhere !important;
  white-space:      normal !important;
  line-height:      1.45 !important;
}
.quickPreview .qp-field .fieldValue a {
  color:           var(--color-primary) !important;
  text-decoration: none !important;
}
.quickPreview .qp-field .fieldValue a:hover {
  text-decoration: underline !important;
}

/* -- SECTION HEADERS Updates Comments -- */
#quickPreviewHeader,
.quickPreview #quickPreviewHeader,
div#quickPreviewHeader {
  background:    rgba(var(--theme-primary-rgb), 0.045) !important;
  padding:       8px 18px !important;
  margin:        0 !important;
  border-top:    none !important;
  border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.1) !important;
  border-left:   3px solid var(--color-primary) !important;
}
#quickPreviewHeader .title,
.quickPreview #quickPreviewHeader .title,
div#quickPreviewHeader .title {
  font-family:    var(--font-family) !important;
  font-size:      10.5px !important;
  font-weight:    700 !important;
  color:          var(--color-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  background:     transparent !important;
}

/* -- ENGAGEMENTS (Updates timeline) container -- */
.quickPreview .engagementsContainer {
  background: var(--color-card) !important;
}

/* Timeline inside quick preview — match dashboard widget spacing */
.quickPreview .engagementsContainer .historyWidgetTimelineModern {
  padding: 6px 16px 12px !important;
}

/* Day marker green-dot ring must match the white panel background */
.quickPreview .engagementsContainer .historyWidgetDayMarker::before {
  box-shadow: 0 0 0 4px var(--color-card) !important;
}

/* Entries get a touch more vertical breathing room in the narrow panel */
.quickPreview .engagementsContainer .historyWidgetEntry {
  padding: 9px 0 13px !important;
}

/* "More" link — centred at bottom of timeline */
.quickPreview .engagementsContainer .historyWidgetMoreRow {
  padding: 8px 0 4px 42px !important;
}

/* moved to timeline.css */


.quickPreview .quickPreviewComments { padding: 0 !important; }

/* Remove spacer brs */
.quickPreview .quickPreviewComments br,
.quickPreview .quickPreviewComments .recentCommentsBody > br {
  display: none !important;
}

/* Each comment block */
.quickPreview .quickPreviewComments .commentDetails {
  padding:       12px 20px !important;
  border-bottom: 1px solid var(--color-border) !important;
  background:    var(--color-card) !important;
}

/* -- Inner row flex avatar left content right -- */
.quickPreview .quickPreviewComments .singleComment .row,
.quickPreview .quickPreviewComments .singleComment > .container-fluid > .row {
  display:     flex !important;
  align-items: flex-start !important;
  gap:         10px !important;
  margin:      0 !important;
}

/* -- 2.commentInfoHeader -- */
.quickPreview .quickPreviewComments .commentInfoHeader,
.quickPreview .quickPreviewComments .col-lg-2.recordImage {
  width:       34px !important;
  min-width:   34px !important;
  max-width:   34px !important;
  height:      34px !important;
  flex:        0 0 34px !important;
  padding:     0 !important;
  float:       none !important;
  overflow:    hidden !important;
  border-radius: 8px !important;
  background:  var(--color-primary-tint) !important;
  display:     flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Avatar image */
.quickPreview .quickPreviewComments .commentInfoHeader img {
  width:         34px !important;
  height:        34px !important;
  border-radius: 8px !important;
  object-fit:    cover !important;
}

/* Initials fallback (.name > span > strong) */
.quickPreview .quickPreviewComments .commentInfoHeader .name {
  width:  100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.quickPreview .quickPreviewComments .commentInfoHeader .name span {
  font-size:   11px !important;
  font-weight: 700 !important;
  color:       var(--color-primary) !important;
  text-transform: uppercase !important;
}

/* -- 10.comment -- */
.quickPreview .quickPreviewComments .comment.col-lg-10,
.quickPreview .quickPreviewComments .col-lg-10.comment {
  flex:      1 1 auto !important;
  width:     auto !important;
  min-width: 0 !important;
  padding:   0 !important;
  float:     none !important;
}

/* Creator name */
.quickPreview .quickPreviewComments .creatorName {
  font-size:   12.5px !important;
  font-weight: 600 !important;
  color:       var(--color-primary) !important;
}

/* Comment text */
.quickPreview .quickPreviewComments .commentInfoContent {
  font-size:   12.5px !important;
  color:       var(--color-text) !important;
  line-height: 1.5 !important;
  display:     block !important;
  margin-top:  2px !important;
  word-break:  break-word !important;
}

/* Comment time */
.quickPreview .quickPreviewComments .commentTime {
  float: none !important;
}
.quickPreview .quickPreviewComments .commentTime p,
.quickPreview .quickPreviewComments .commentTime small {
  font-size: 10px !important;
  color:     var(--color-text-muted) !important;
  margin:    2px 0 0 0 !important;
}

/* File attachments */
.quickPreview .quickPreviewComments .comment a[name="viewfile"] {
  font-size:   11px !important;
  color:       var(--color-primary) !important;
}

/* Remove extra br inside .comment */
.quickPreview .quickPreviewComments .comment br {
  display: none !important;
}



.quickPreview .quick-preview-modal,
.quickPreview .quick-preview-modal.modal-content,
.quickPreview .modal-body {
  background: var(--color-card) !important;
}

/* Header: soft light gradient — primary tint fading to white */
.quickPreview .quickPreviewModuleHeader {
  background:
    linear-gradient(
      135deg,
      rgba(var(--theme-primary-rgb), 0.10) 0%,
      rgba(var(--theme-primary-rgb), 0.04) 45%,
      #ffffff 100%
    ) !important;
  border-top:    3px solid var(--color-primary) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}

/* Header text: dark on light background */
.quickPreview .quickPreviewModuleHeader .recordLabel,
.quickPreview .quickPreviewModuleHeader .name h4,
.quickPreview .quickPreviewModuleHeader h4 {
  color: var(--color-text) !important;
}
.quickPreview .quickPreviewModuleHeader .recordBasicInfo span,
.quickPreview .quickPreviewModuleHeader .recordBasicInfo a,
.quickPreview .quickPreviewModuleHeader .recordBasicInfo .fa {
  color: var(--color-text-muted) !important;
}
.quickPreview .quickPreviewModuleHeader .recordBasicInfo a:hover {
  color: var(--color-primary) !important;
}

/* Avatar: tinted circle */
.quickPreview .quickPreviewModuleHeader .recordImage,
.quickPreview .quickPreviewModuleHeader [class*="recordImage"] {
  background: rgba(var(--theme-primary-rgb), 0.12) !important;
  box-shadow:  none !important;
}

/* Close button colours already set in the qp-header-controls block above */

/* Actions bar */
.quickPreview .quickPreviewActions {
  background:    var(--color-card) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Body sections */
.quickPreview .quickPreviewSummary,
.quickPreview .engagementsContainer,
.quickPreview .quickPreviewComments,
.quickPreview .recentComments,
.quickPreview .summaryWidgetContainer,
.quickPreview .summaryWidgetContainer:not(.noContent),
.quickPreview .commentsBody.container-fluid {
  background:    var(--color-card) !important;
  border:        none !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  margin:        0 !important;
}

/* Summary grid clean-up pass — ensure tokens override any skin defaults */
.quickPreview .qp-field .fieldLabel {
  background: rgba(var(--theme-primary-rgb), 0.035) !important;
  color:      rgba(var(--theme-primary-rgb), 0.84) !important;
}
.quickPreview .qp-field .fieldValue {
  background: var(--color-card) !important;
  color:      var(--color-text) !important;
}

/* Empty states */
.quickPreview .summaryWidgetContainer.noContent,
.quickPreview .noCommentsMsgContainer.noContent {
  padding: 16px !important;
  color:   var(--color-text-muted) !important;
  text-align: center !important;
}

/* Comment blocks */
.quickPreview .quickPreviewComments .commentDetails {
  padding:       14px 16px !important;
  border-bottom: 1px solid var(--color-border) !important;
  background:    var(--color-card) !important;
}
.quickPreview .quickPreviewComments .commentDetails:last-child {
  border-bottom: none !important;
}
.quickPreview .quickPreviewComments .singleComment > .container-fluid {
  padding: 0 !important;
}
.quickPreview .quickPreviewComments .commentInfoHeader,
.quickPreview .quickPreviewComments .col-lg-2.recordImage {
  width:         34px !important;
  min-width:     34px !important;
  height:        34px !important;
  border-radius: 8px !important;
  background:    var(--color-primary-tint) !important;
}
.quickPreview .quickPreviewComments .comment.col-lg-10,
.quickPreview .quickPreviewComments .col-lg-10.comment {
  width:        calc(100% - 46px) !important;
  padding-left: 12px !important;
}
.quickPreview .quickPreviewComments .commentInfoContent,
.quickPreview .quickPreviewComments .commentTime small,
.quickPreview .noCommentsMsgContainer p,
.quickPreview .summaryWidgetContainer.noContent p {
  color: var(--color-text-muted) !important;
}
/* ====== end inlined list-view.css ===== */
/* ============================================================
   ===========  INLINED FROM overlay.css  ====================
   (was @import url("overlay.css");)
   ============================================================ */

/* =============================================================================
   overlay.css  —  All overlay / modal-overlay / full-screen-panel CSS
   Loaded globally via @import in style.css so overlays work on every page.
   ============================================================================= */

/* ── Save / Cancel fixed footer ──────────────────────────────────────────────── */

/* Settings context: offset = main sidebar + settings sidebar */
.settings-sidebar ~ .settingsPageDiv .modal-overlay-footer,
.settings-sidebar ~ * .modal-overlay-footer {
  left: calc(var(--sb-w) + 240px) !important;
}

/* Settings page: separate override */
.settingsPageDiv .modal-overlay-footer {
    border-left: 312px var(--sb-bg) !important;
    border-top: none !important;
}

/* Save button */
.modal-overlay-footer .btn.btn-success.saveButton {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  height:          36px !important;
  padding:         0 24px !important;
  border-radius:   6px !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  background:      var(--accent) !important;
  border:          1px solid var(--acc-h) !important;
  color:           var(--color-card) !important;
  box-shadow:      0 1px 4px rgba(46,120,255,0.25) !important;
}

/* Cancel link */
.modal-overlay-footer .cancelLink {
  display:         inline-flex !important;
  align-items:     center !important;
  height:          36px !important;
  padding:         0 20px !important;
  border-radius:   6px !important;
  font-size:       13px !important;
  font-weight:     500 !important;
  color:           var(--color-danger) !important;
  text-decoration: none !important;
}

/* ── Backdrop & base overlay elements ─────────────────────────────────────── */

/* Fix Bootstrap white backdrop → dark */
.modal-backdrop, .modal-backdrop.in {
  background: rgba(8, 15, 35, 0.75) !important;
  opacity:    1 !important;
  z-index:    1095 !important;
}

body.modal-open::after { display: none !important; }

/* #overlayPage hidden by default; .in added by JS to show */
#overlayPage { display: none !important; }

/* Hide the slide-out arrow when not shown */
#overlayPage .arrow.show { display: none !important; }

/* Base transparency for both spellings */
#overlayPageContent  { background: transparent !important; }
.overlayPageContent  { background: transparent !important; }

/* ── customview-content: native scroll (replaces mCustomScrollbar) ──────── */

.customview-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
.customview-content.mCS_destroyed {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── #overlayPageContent.in — full-screen import / edit overlay ───────────── */

#overlayPageContent.in,
div#overlayPageContent.in,
div#overlayPageContent.modal.in {
  display:        flex !important;
  flex-direction: column !important;
  position:       fixed !important;
  top:            60px !important;
  left:           0 !important;
  right:          0 !important;
  bottom:         0 !important;
  width:          100vw !important;
  height:         auto !important;
  max-height:     none !important;
  margin:         0 !important;
  padding:        0 !important;
  z-index:        1100 !important;
  background:     var(--navy) !important;
  overflow:       hidden !important;
  border:         none !important;
  border-radius:  0 !important;
  box-shadow:     0 -4px 30px rgba(0,0,0,0.15) !important;
  transform:      none !important;
}

/* Bootbox confirmation dialogs must appear above overlays */
.bootbox.modal.in {
  z-index: 999999 !important;
}
.bootbox.modal.in + .modal-backdrop.in,
.bootbox.modal ~ .modal-backdrop.in {
  z-index: 999998 !important;
}

/* ── Bootbox dialog design ── */
.bootbox .modal-dialog {
  max-width:  460px !important;
  margin:     80px auto !important;
}
.bootbox .modal-content {
  border:        none !important;
  border-radius: 10px !important;
  box-shadow:    0 24px 64px rgba(15, 23, 42, 0.2) !important;
  overflow:      hidden !important;
}
.bootbox .modal-body {
  padding:     28px 28px 20px !important;
  font-size:   14px !important;
  color:       var(--text, #334155) !important;
  line-height: 1.65 !important;
}
.bootbox .modal-footer {
  padding:     14px 24px !important;
  border-top:  1px solid var(--line, #e8eef4) !important;
  display:     flex !important;
  justify-content: flex-end !important;
  gap:         10px !important;
}
.bootbox .modal-footer .btn {
  min-width:    88px !important;
  height:       36px !important;
  border-radius: 6px !important;
  font-size:    13px !important;
  font-weight:  600 !important;
  padding:      0 18px !important;
}

/* .data wrapper fills the overlay column */
#overlayPageContent.in > .data,
div#overlayPageContent.in > .data {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  min-height:     0 !important;
  width:          100% !important;
  height:         100% !important;
}

/* fc-overlay-modal — fills parent; shared by all overlay pages */
#overlayPageContent.in .fc-overlay-modal,
div#overlayPageContent.in .fc-overlay-modal,
#overlayPage.in .fc-overlay-modal {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  min-height:     0 !important;
  width:          100% !important;
  height:         100% !important;
  border-radius:  0 !important;
  overflow:       hidden !important;
  box-shadow:     none !important;
  background:     var(--color-card) !important;
}

#overlayPageContent.in .fc-overlay-modal .modal-content,
div#overlayPageContent.in .fc-overlay-modal .modal-content,
#overlayPage.in .fc-overlay-modal .modal-content,
#overlayPage.in .modal-content {
  border:         none !important;
  border-radius:  0 !important;
  overflow:       hidden !important;
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  min-height:     0 !important;
  height:         100% !important;
  background:     var(--color-card) !important;
}

/* Header — full-width dark bar, shared by all overlay pages */
#overlayPageContent.in .overlayHeader .modal-header h4,
#overlayPage.in .overlayHeader .modal-header h4,
#overlayPage.in .overlayHeader h4 {
  color:       var(--color-card) !important;
  font-family: var(--font-family) !important;
  font-size:   14px !important;
  font-weight: 600 !important;
  margin:      0 !important;
  float:       none !important;
}

#overlayPageContent.in .overlayHeader .modal-header .close,
#overlayPage.in .overlayHeader .modal-header .close,
#overlayPage.in .overlayHeader .close {
  color:       var(--color-card) !important;
  opacity:     0.7 !important;
  text-shadow: none !important;
  font-size:   16px !important;
  margin:      0 !important;
  float:       right !important;
}

#overlayPageContent.in .overlayHeader .modal-header .close:hover,
#overlayPage.in .overlayHeader .close:hover { opacity: 1 !important; }

/* Body — fills space between header and footer; scrolls internally when
   the form is taller than the available height. Standard Bootstrap
   dialog pattern. */
#overlayPageContent.in .modal-body,
div#overlayPageContent.in .modal-body,
#overlayPageContent.in .modal-body#landingPageDiv {
  background:    var(--color-card) !important;
  padding:       20px 24px !important;
  overflow-y:    auto !important;
  overflow-x:    hidden !important;
  flex:          1 1 auto !important;
  min-height:    0 !important;
  height:        auto !important;
  max-height:    none !important;
  margin-bottom: 0 !important;
  margin:        0 !important;
}

#overlayPageContent.in .modal-body > hr:first-child {
  display: none !important;
}

/* Landing page container inside modal-body */
#overlayPageContent.in .modal-body .landingPage,
#overlayPageContent.in .modal-body .importServiceSelectionContainer {
  align-content: flex-start !important;
  padding-top:   40px !important;
}

/* ── .modal-dialog inside overlayPageContent ─────────────────────────────── */
/* The .modal-dialog is an EMPTY sibling of .data in #overlayPageContent.
   It has no content — content is loaded by JS into .data instead.
   Hide it so it takes no space and doesn't interfere with the flex layout. */
#overlayPageContent .modal-dialog,
#overlayPageContent > .modal-dialog {
  display: none !important;
  width:   0 !important;
  height:  0 !important;
}

/* The element fc-overlay-modal.modal-content.overlayEdit is ONE element with all
   three classes — a descendant selector (.fc-overlay-modal .modal-content) won't
   match it; use compound class selectors instead. */
#overlayPageContent.in .fc-overlay-modal.modal-content,
#overlayPageContent.in .overlayEdit.modal-content {
  border:         none !important;
  border-radius:  0 !important;
  overflow:       hidden !important;
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  min-height:     0 !important;
  height:         100% !important;
  background:     var(--color-card) !important;
  box-shadow:     none !important;
}

/* .overlayEdit flex chain (may wrap fc-overlay-modal content) */
#overlayPageContent.in .overlayEdit {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  min-height:     0 !important;
  height:         100% !important;
  overflow:       hidden !important;
}

/* overlayHeader — ensure no white gap before the dark modal-header */
#overlayPageContent.in .overlayHeader {
  flex-shrink: 0 !important;
  background:  var(--navy) !important;
  padding:     0 !important;
  margin:      0 !important;
}

/* Edit form fills the overlay column */
#overlayPageContent.in form#EditView {
  flex:           1 1 auto !important;
  min-height:     0 !important;
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
}

/* editViewContents scroll within overlayPage */
.overlayPage .editViewContents {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── Import landing page — CSV / VCF cards ────────────────────────────────── */

.importServiceSelectionContainer {
  padding:         0 !important;
  display:         flex !important;
  flex-wrap:       wrap !important;
  align-items:     flex-start !important;
  justify-content: center !important;
  gap:             0 !important;
}
.importServiceSelectionContainer > .col-lg-12 {
  font-size:   16px !important;
  font-weight: 600 !important;
  color:       var(--text) !important;
  font-family: var(--font-family) !important;
  padding:     0 0 24px !important;
  margin:      0 !important;
  width:       100% !important;
  flex:        0 0 100% !important;
  text-align:  center !important;
}

.importServiceSelectionContainer > br { display: none !important; }

.importServiceSelectionContainer #csvImport,
.importServiceSelectionContainer #vcfImport,
.importServiceSelectionContainer [id$="Import"] {
  padding:   12px !important;
  flex:      0 0 200px !important;
  width:     200px !important;
  max-width: 200px !important;
}

.importServiceSelectionContainer .menu-item.app-item {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             12px !important;
  padding:         28px 20px !important;
  background:      var(--color-card) !important;
  border:          2px solid var(--line) !important;
  border-radius:   12px !important;
  cursor:          pointer !important;
  transition:      border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
  box-shadow:      0 2px 8px rgba(0,0,0,0.04) !important;
  text-align:      center !important;
  min-height:      140px !important;
}
.importServiceSelectionContainer .menu-item.app-item:hover {
  border-color: var(--accent) !important;
  box-shadow:   0 6px 20px rgba(46,120,255,0.15) !important;
  transform:    translateY(-2px) !important;
}

.importServiceSelectionContainer .menu-item.app-item > span.fa {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           52px !important;
  height:          52px !important;
  border-radius:   12px !important;
  background:      rgba(46,120,255,0.10) !important;
  color:           var(--accent) !important;
  font-size:       22px !important;
  flex-shrink:     0 !important;
}
.importServiceSelectionContainer .menu-item.app-item:hover > span.fa {
  background: rgba(46,120,255,0.18) !important;
  color:      var(--acc-h) !important;
}

.importServiceSelectionContainer .menu-item.app-item h4 {
  font-family: var(--font-family) !important;
  font-size:   13px !important;
  font-weight: 600 !important;
  color:       var(--text) !important;
  margin:      0 !important;
}
.importServiceSelectionContainer .menu-item.app-item:hover h4 {
  color: var(--accent) !important;
}

/* ── Import stepper / breadcrumb ─────────────────────────────────────────── */

/* =================================================================
   Breadcrumb wizard steps — clean flat pill design
   =================================================================
   Replaces the legacy chevron technique (a stack of CSS border tricks
   creating triangular notch + arrow per step) which had fragile
   rendering: stray arrows on the last step, colour seams at state
   boundaries, and visual blur when adjacent steps share a colour.

   The new design: flat rounded pills, each carrying its own number
   badge + label, with `.active` / `.completed` / upcoming (the
   neither-of-those default) communicated by background colour and
   text weight. No pseudo-element arrows, no transparent borders. */

/* Container: simple flex row, removes the legacy 40px height + absolute
   positioning that the chevron design needed. */
.crumbs {
  display:    flex !important;
  flex-wrap:  wrap;
  gap:        8px;
  list-style: none;
  height:     auto !important;
  margin:     0;
  padding:    0 !important;
  position:   static !important;
  width:      100% !important;
  font-family: var(--font-family) !important;
}

/* Each step: flat rectangle pill. Reset every chevron border the legacy
   LESS set on `<li>` and the `::after` arrow. */
.crumbs li {
  flex:           1 1 0;
  min-width:      0;
  display:        flex !important;
  align-items:    center;
  gap:            8px;
  height:         44px !important;
  padding:        0 16px !important;
  border:         0 !important;
  border-radius:  8px !important;
  background:     #e8edf5 !important;
  cursor:         default;
  position:       static !important;
  font-family:    var(--font-family) !important;
  transition:     background-color 0.15s ease, color 0.15s ease;
}
.crumbs li::after,
.crumbs li::before { content: none !important; display: none !important; }

/* The <a> wraps the step number + text; flatten it so it's not a separate
   visual element from the li body. */
.crumbs li a {
  display:        flex !important;
  align-items:    center;
  gap:            10px;
  margin:         0 !important;
  padding:        0 !important;
  width:          100%;
  font-family:    var(--font-family) !important;
  font-size:      13px !important;
  text-decoration: none;
}

/* Number badge — small circle, contrasts against the pill background. */
.crumbs li .stepNum {
  width:           22px;
  height:          22px;
  flex:            0 0 22px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  margin:          0 !important;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.25);
  font-size:       12px !important;
  font-weight:     700 !important;
  line-height:     1;
}
.crumbs li .stepText {
  font-size:    13px !important;
  font-weight:  500 !important;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

/* Three states driven by classes set in BreadCrumbs.tpl:
     `.completed` — steps before the active one
     `.active`    — current step
     (neither)    — upcoming steps */
.crumbs li.active,
.crumbs li.completed {
  background: var(--accent) !important;
}
.crumbs li.active a,    .crumbs li.active .stepNum,    .crumbs li.active .stepText,
.crumbs li.completed a, .crumbs li.completed .stepNum, .crumbs li.completed .stepText {
  color: #fff !important;
}
.crumbs li.active .stepText { font-weight: 600 !important; }
.crumbs li.completed .stepNum { background: rgba(255, 255, 255, 0.35); }

.crumbs li:not(.active):not(.completed) a,
.crumbs li:not(.active):not(.completed) .stepNum,
.crumbs li:not(.active):not(.completed) .stepText { color: var(--muted) !important; }
.crumbs li:not(.active):not(.completed) .stepNum {
  background: rgba(15, 23, 42, 0.06);
  color:      var(--muted) !important;
}

/* ── #overlayPage.in — task management / list panel overlay ──────────────── */

#overlayPage.in {
  display:        flex !important;
  flex-direction: column !important;
  position:       fixed !important;
  top:            60px !important;
  left:           0 !important;
  right:          0 !important;
  bottom:         0 !important;
  width:          100vw !important;
  height:         auto !important;
  max-height:     none !important;
  background:     var(--color-card) !important;
  border-radius:  0 !important;
  box-shadow:     0 -4px 30px rgba(0,0,0,0.15) !important;
  border:         none !important;
  z-index:        1096 !important;
  overflow:       hidden !important;
  margin:         0 !important;
  padding:        0 !important;
  transform:      none !important;
}

#overlayPage.in .modal-body,
#overlayPage.in .overflowYAuto,
#overlayPage.in .modal-body.overflowYAuto {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  min-height:     0 !important;
  height:         auto !important;
  max-height:     none !important;
  overflow:       hidden !important;
  padding:        0 !important;
  margin:         0 !important;
  background:     transparent !important;
}

#overlayPage.in .datacontent {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  min-height:     0 !important;
  overflow:       hidden !important;
}

#overlayPage.in .data-header {
  flex-shrink: 0 !important;
  padding:     10px 15px !important;
}

#overlayPage.in hr { flex-shrink: 0 !important; margin: 0 !important; }

#overlayPage.in .data {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  height:         auto !important;
  min-height:     0 !important;
  max-height:     none !important;
  overflow:       hidden !important;
  padding:        0 !important;
}

/* Support flex height chain through Bootstrap's row */
#overlayPage.in .data-body {
  display:    flex !important;
  flex:       1 1 auto !important;
  height:     100% !important;
  min-height: 0 !important;
  margin:     0 !important;
  overflow:   hidden !important;
}

#overlayPage.in .col-lg-4.contentsBlock {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 0% !important;
  height:         100% !important;
  min-height:     0 !important;
  overflow:       hidden !important;
  padding:        0 8px !important;
}

#overlayPage.in .content {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
  min-height:     0 !important;
  overflow:       hidden !important;
}

#overlayPage.in .content .input-group { flex-shrink: 0 !important; }
#overlayPage.in .content > br { display: none !important; }

#overlayPage.in .scrollable {
  flex:            1 1 auto !important;
  overflow:        scroll !important;
  overflow-x:      hidden !important;
  height:          calc(100vh - 115px - 40px - 52px - 60px - 90px) !important;
  min-height:      100px !important;
  max-height:      none !important;
  width:           100% !important;
  max-width:       100% !important;
  box-sizing:      border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0,0,0,0.2) transparent !important;
}

#overlayPage.in .scrollable::-webkit-scrollbar { width: 5px !important; }
#overlayPage.in .scrollable::-webkit-scrollbar-track { background: transparent !important; }
#overlayPage.in .scrollable::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18) !important; border-radius: 4px !important; }
#overlayPage.in .scrollable::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35) !important; }

/* -- Task cards inside #overlayPage.in -- */

#overlayPage.in .entries { padding: 0 !important; }

#overlayPage.in .task {
  display:       flex !important;
  flex-wrap:     wrap !important;
  align-items:   flex-start !important;
  background:    var(--color-card) !important;
  border:        1px solid var(--line) !important;
  border-radius: 7px !important;
  margin:        0 0 5px !important;
  padding:       7px 10px !important;
  box-shadow:    0 1px 3px rgba(0,0,0,0.05) !important;
  overflow:      visible !important;
  transition:    box-shadow 0.15s !important;
}
#overlayPage.in .task:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important; }

#overlayPage.in .task-status {
  float:       none !important;
  flex:        0 0 22px !important;
  display:     flex !important;
  align-items: center !important;
  padding-top: 2px !important;
  margin:      0 !important;
}
#overlayPage.in .task-status input[type="checkbox"] {
  width:        14px !important;
  height:       14px !important;
  margin:       0 !important;
  float:        none !important;
  accent-color: var(--accent) !important;
  cursor:       pointer !important;
  display:      block !important;
}

#overlayPage.in .task-body {
  float:       none !important;
  flex:        1 1 0% !important;
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
  min-width:   0 !important;
  overflow:    hidden !important;
}
#overlayPage.in .task-body::before,
#overlayPage.in .task-body::after { display: none !important; }

#taskManagementContainer .entries .task-body { margin-left: 4px; }

#overlayPage.in .taskSubject {
  float:         none !important;
  flex:          1 1 auto !important;
  width:         auto !important;
  min-width:     0 !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
}
#overlayPage.in .taskSubject a { color: var(--text) !important; text-decoration: none !important; }
#overlayPage.in .taskSubject a:hover { color: var(--accent) !important; }
#overlayPage.in .taskSubject.textStrike a { text-decoration: line-through !important; color: var(--muted) !important; }

#overlayPage.in .taskStatus {
  float:         none !important;
  flex-shrink:   0 !important;
  font-size:     10px !important;
  font-weight:   600 !important;
  padding:       1px 7px !important;
  border-radius: 20px !important;
  white-space:   nowrap !important;
  line-height:   1.6 !important;
}

#overlayPage.in .other-details {
  float:        none !important;
  flex:         0 0 100% !important;
  display:      flex !important;
  align-items:  center !important;
  gap:          6px !important;
  margin-top:   3px !important;
  padding-left: 0px !important;
  overflow:     visible !important;
}
#overlayPage.in .other-details::before,
#overlayPage.in .other-details::after { display: none !important; }

#overlayPage.in .drag-task { display: none !important; }

#overlayPage.in .task-details {
  display:     flex !important;
  align-items: center !important;
  flex:        1 1 auto !important;
  gap:         6px !important;
  min-width:   0 !important;
}

#overlayPage.in .taskDueDate {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         3px !important;
  font-size:   11px !important;
  color:       var(--muted) !important;
  white-space: nowrap !important;
}

#overlayPage.in .related_account,
#overlayPage.in .related_contact {
  font-size:     11px !important;
  color:         var(--muted) !important;
  max-width:     100px !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
}
#overlayPage.in .related_account a,
#overlayPage.in .related_contact a { color: var(--accent) !important; text-decoration: none !important; }

#overlayPage.in .task-actions {
  float:       none !important;
  flex-shrink: 0 !important;
  display:     flex !important;
  gap:         8px !important;
  opacity:     0 !important;
  transition:  opacity 0.12s !important;
  margin-left: auto !important;
}
#overlayPage.in .task:hover .task-actions { opacity: 1 !important; }
#overlayPage.in .task-actions a { color: var(--muted) !important; font-size: 12px !important; }
#overlayPage.in .task-actions a:hover { color: var(--accent) !important; }
#overlayPage.in .task-actions .taskDelete:hover { color: var(--color-danger) !important; }

#overlayPage.in .moreButtonBlock { padding: 4px 0 !important; margin: 0 !important; }
#overlayPage.in .moreRecords { width: 100% !important; border: 1px solid var(--line) !important; border-radius: 6px !important; background: #f8fafc !important; color: var(--muted) !important; font-size: 12px !important; padding: 5px 0 !important; }
#overlayPage.in .moreRecords:hover { background: var(--accent) !important; color: var(--color-card) !important; border-color: var(--accent) !important; }

/* ── Custom View overlay ──────────────────────────────────────────────────── */

#overlayPageContent.in #filterContainer {
  /* No padding / backdrop tint — header sits flush with the viewport
     top + edges, matching the Edit overlay (e.g. "Editing QUO9") which
     fills the full viewport without a floating-card look. */
  display:         flex !important;
  flex-direction:  column !important;
  width:           100% !important;
  height:          100% !important;
  padding:         0 !important;
  background:      transparent !important;
}

#overlayPageContent.in #CustomView {
  width:  100% !important;
  height: 100% !important;
  margin: 0 !important;
}

#overlayPageContent.in #CustomView > .modal-content {
  /* Flush full-viewport panel — no border, no radius, no drop shadow
     so the dark header bar reads as part of the page instead of a
     floating card. */
  display:        flex !important;
  flex-direction: column !important;
  height:         100% !important;
  max-height:     none !important;
  border:         0 !important;
  border-radius:  0 !important;
  background:     #ffffff !important;
  box-shadow:     none !important;
  overflow:       hidden !important;
}

#overlayPageContent.in #CustomView .modal-body {
  flex:       1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding:    22px 24px !important;
  background: #f6f9fc !important;
}

#overlayPageContent.in #CustomView .customview-content {
  display:        flex !important;
  flex-direction: column !important;
  gap:            18px !important;
  height:         100% !important;
  padding-right:  6px !important;
}

#overlayPageContent.in #CustomView .form-group {
  margin:        0 !important;
  padding:       18px 20px !important;
  background:    #ffffff !important;
  border:        1px solid #e3ebf4 !important;
  border-radius: 12px !important;
  box-shadow:    0 6px 18px rgba(15, 23, 42, 0.04) !important;
}

#overlayPageContent.in #CustomView .form-group > label,
#overlayPageContent.in #CustomView .filterHeaders {
  display:        block !important;
  margin-bottom:  12px !important;
  font-size:      12px !important;
  font-weight:    700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color:          #6a7f94 !important;
}

#overlayPageContent.in #CustomView input.form-control,
#overlayPageContent.in #CustomView input[type="text"],
#overlayPageContent.in #CustomView select.form-control {
  height:        40px !important;
  border:        1px solid #d7e2ee !important;
  border-radius: 8px !important;
  background:    #ffffff !important;
  box-shadow:    none !important;
}

#overlayPageContent.in #CustomView .checkbox { margin: 2px 0 0 !important; }

#overlayPageContent.in #CustomView .checkbox-inline {
  margin-right: 18px !important;
  font-size:    13px !important;
  color:        #31475d !important;
}

#overlayPageContent.in #CustomView .columnsSelectDiv,
#overlayPageContent.in #CustomView .filterConditionContainer,
#overlayPageContent.in #CustomView #memberList {
  width: 100% !important;
}

#overlayPageContent.in #CustomView .filterConditionContainer {
  padding:       16px !important;
  border:        1px solid #dde7f1 !important;
  border-radius: 12px !important;
  background:    #fbfdff !important;
  box-shadow:    none !important;
}

#overlayPageContent.in #CustomView .modal-overlay-footer {
  flex:       0 0 auto !important;
  padding:    16px 24px !important;
  border-top: 1px solid #e4edf6 !important;
  background: #ffffff !important;
}

#overlayPageContent.in #CustomView .modal-overlay-footer .textAlignCenter {
  display:         flex !important;
  /* Centred Save / Cancel pair — matches the Import wizard's centred
     Next/Cancel footer. The element's own classname (textAlignCenter)
     already implies this intent; the previous `flex-end` was at odds
     with that. */
  justify-content: center !important;
  align-items:     center !important;
  gap:             12px !important;
}

#overlayPageContent.in #CustomView .saveButton {
  min-width:   120px !important;
  height:      40px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

#overlayPageContent.in #CustomView .cancelLink {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  min-width:       92px !important;
  height:          40px !important;
  padding:         0 14px !important;
  border:          1px solid #d7e2ee !important;
  border-radius:   8px !important;
  color:           #31475d !important;
  text-decoration: none !important;
  background:      #ffffff !important;
}

.fc-overlay-modal {
    border: none;
}

/* ====== end inlined overlay.css ===== */

/* -- 2. Color Tokens -- */
/* -- EDIT COLOURS HERE all values one place Brand --accent Primary blue links active states CTA --acc-h Accent hover slightly darker --navy Dark navy topbar background Status --ok Success green --red Danger delete red --warn Warning orange Surfaces --bg Page background light grey --white Card panel background --line Border divider colour Text --text Primary text dark --muted Secondary label text grey Buttons global btn-default --btn-bg Default button background --btn-border Default button border --btn-color Default button text --btn-hover-bg Hover background --btn-hover-border Hover border --btn-hover-color Hover text --btn-shadow Resting shadow --btn-hover-shadow Hover shadow Sidebar --sb-bg Sidebar background --sb-w Collapsed width --sb-w-open Expanded width --sb-text Icon label colour --sb-text-active Active icon label colour --sb-accent Sidebar accent matches --accent but can differ --sb-border Subtle border between items --sb-icon-bg Icon box background --sb-icon-active Active icon box background --sb-hover-bg Row hover background --sb-active-bg Active row background Form fields --field-label Field label colour --field-value Field value colour --field-border Input border --field-focus Input focus border --field-bg Input background -- */

:root {
  /*
     THEME TOKENS  Edit these to change the entire colour scheme
      */

  /*  Active user theme seed (defaults to Softed)  */
  --theme-primary-rgb:     21, 96, 189;
  --theme-primary:         #1560BD;
  --theme-primary-hover:   #0F55AA;
  --theme-primary-dark:    #0B4587;

  /*  Primary palette  */
  --color-primary:         var(--theme-primary);   /* Main brand / accent colour */
  --color-primary-hover:   var(--theme-primary-hover);   /* Darker shade for hover states */
  --color-primary-dark:    var(--theme-primary-dark);   /* Deep shade for focus rings, sidebar accent */
  --color-primary-tint:    rgba(var(--theme-primary-rgb), 0.10);  /* Light tint for icon boxes, badges */
  --color-primary-tint-2:  rgba(var(--theme-primary-rgb), 0.18);  /* Stronger tint for hover */

  /*  Dark palette (header, sidebar, table header)  */
  --color-dark:            #1C2B3A;   /* Topbar, modal headers, block headers */
  --color-dark-deep:       #0d1b2e;   /* Sidebar background */

  /*  Status colours  */
  --color-success:         #22C87A;
  --color-danger:          #FF4060;
  --color-warning:         #FFAA30;
  --color-star:            #f0b429;   /* Favourite star */

  /*  Surface colours  */
  --color-page-bg:         #F2F5F9;   /* Page background */
  --color-card:            #FFFFFF;   /* Cards, panels, modal bodies */
  --color-border:          #E1E8F0;   /* Borders, dividers */
  --color-border-light:    #f0f3fa;   /* Subtle inner borders */
  --color-border-mid:      #dde5f0;   /* Button/input borders */
  --color-border-dark:     #d0ddf0;   /* Stronger borders (tabs, panels) */
  --color-row-alt:         #f6f8fc;   /* Alternating row stripe */
  --color-row-hover:       #eef4ff;   /* Row hover highlight */
  --color-row-selected:    #dbeafe;   /* Selected row */
  --color-surface-light:   #f8fafd;   /* Subtle surface tint */
  --color-surface-muted:   #f5f8fc;   /* Muted surface (search rows) */
  --color-surface-input:   #f4f7fb;   /* Input area backgrounds */
  --color-scrollbar:       #c8d8e8;   /* Scrollbar thumb */
  --color-success-hover:   #16a34a;   /* Success button hover */

  /*  Text colours  */
  --color-text:            #1C2B3A;   /* Primary text */
  --color-text-muted:      #7A8EA3;   /* Secondary / label text */
  --color-text-label:      #4a5568;   /* Form field labels */
  --color-text-field:      #1a2230;   /* Field values */

  /*  Shared controls: related-tab icons, toolbar buttons, list actions  */
  --control-icon-bg:            rgba(var(--theme-primary-rgb), 0.10);
  --control-icon-border:        transparent;
  --control-icon-color:         var(--color-primary);
  --control-icon-hover-bg:      var(--color-primary);
  --control-icon-hover-border:  var(--color-primary);
  --control-icon-hover-color:   #ffffff;
  --control-icon-shadow:        none;
  --control-icon-hover-shadow:  0 4px 12px rgba(var(--theme-primary-rgb), 0.22);

  /*  Buttons mirror related-tab icon controls  */
  --btn-bg:                var(--control-icon-bg);
  --btn-border:            var(--control-icon-border);
  --btn-color:             var(--control-icon-color);
  --btn-hover-bg:          var(--control-icon-hover-bg);
  --btn-hover-border:      var(--control-icon-hover-border);
  --btn-hover-color:       var(--control-icon-hover-color);
  --btn-shadow:            var(--control-icon-shadow);
  --btn-hover-shadow:      var(--control-icon-hover-shadow);

  /*  Sidebar  */
  --sb-bg:                 var(--color-dark-deep);
  --sb-w:                  72px;
  --sb-w-open:             240px;
  --sb-text:               #b0b8c8;
  --sb-text-active:        #ffffff;
  --sb-accent:             var(--color-primary-dark);
  --sb-border:             rgba(255, 255, 255, 0.06);
  --sb-icon-bg:            rgba(255, 255, 255, 0.07);
  --sb-icon-active:        rgba(11, 86, 166, 0.22);
  --sb-hover-bg:           rgba(255, 255, 255, 0.06);
  --sb-active-bg:          rgba(var(--theme-primary-rgb), 0.18);

  --field-border:          #d4dae8;
  --field-focus:           var(--color-primary-dark);
  --field-bg:              #ffffff;

  /*  Typography  */
  --font-family:           'Inter', 'OpenSans-Regular', sans-serif;
  --font-size-base:        12px;
  --font-size-sm:          13px;
  --font-weight-normal:    400;
  --font-weight-bold:      600;
  --line-height-base:      1.5;

  /*  Field typography  */
  --field-font-size:       13px;
  --field-font-weight:     400;
  --field-line-height:     1.45;
  --field-color:           var(--color-text);
  --label-font-size:       12.5px;
  --label-font-weight:     500;
  --label-color:           var(--color-text-muted);

  /* -- Tabs & chips -- */
  --tab-shell-bg:          #ffffff;
  --tab-shell-border:      #e4ebf3;
  --tab-shell-radius:        12px;
  --tab-chip-height:         34px;
  --tab-chip-padding-x:      16px;
  --tab-chip-radius:         10px;
  --view-card-radius-xs:     6px;
  --view-control-radius-sm:  7px;
  --view-card-radius:        var(--tab-shell-radius);
  --view-card-radius-sm:     var(--tab-chip-radius);
  --view-card-radius-md:     14px;
  --view-card-radius-lg:     16px;
  --view-card-radius-xl:     18px;
  --view-card-radius-2xl:    20px;
  --view-card-radius-3xl:    22px;
  --view-card-radius-4xl:    24px;
  --view-control-radius:     8px;
  --tab-chip-bg:           rgba(var(--theme-primary-rgb), 0.08);
  --tab-chip-border:       rgba(var(--theme-primary-rgb), 0.12);
  --tab-chip-text:         var(--color-primary-dark);
  --tab-chip-hover-bg:     var(--color-primary-dark);
  --tab-chip-hover-text:   #ffffff;
  --tab-chip-active-bg:    var(--color-primary-dark);
  --tab-chip-active-text:  #ffffff;

  --color-text-on-dark:  #ffffff;   /* White text on dark backgrounds */
  --accent:    var(--color-primary);
  --acc-h:     var(--color-primary-hover);
  --navy:      var(--color-dark);
  --ok:        var(--color-success);
  --red:       var(--color-danger);
  --warn:      var(--color-warning);
  --bg:        var(--color-page-bg);
  --white:     var(--color-card);
  --line:      var(--color-border);
  --text:      var(--color-text);
  --muted:     var(--color-text-muted);
  --field-value: var(--color-text-field);
  --field-label: var(--color-text-label);
}

body[data-user-theme="nature"] {
  --theme-primary-rgb:   0, 141, 76;
  --theme-primary:       #008D4C;
  --theme-primary-hover: #067B43;
  --theme-primary-dark:  #045F34;
  --color-dark:          #145840;
  --color-dark-deep:     #0C3F2E;
  --navy:                var(--color-dark);
  --sb-bg:               var(--color-dark-deep);
}

body[data-user-theme="woodspice"] {
  --theme-primary-rgb:   193, 152, 3;
  --theme-primary:       #C19803;
  --theme-primary-hover: #A68102;
  --theme-primary-dark:  #7C6000;
  --color-dark:          #5A4817;
  --color-dark-deep:     #41330D;
  --navy:                var(--color-dark);
  --sb-bg:               var(--color-dark-deep);
}

body[data-user-theme="orchid"] {
  --theme-primary-rgb:   198, 84, 121;
  --theme-primary:       #C65479;
  --theme-primary-hover: #AE466A;
  --theme-primary-dark:  #82304D;
  --color-dark:          #553046;
  --color-dark-deep:     #3B2031;
  --navy:                var(--color-dark);
  --sb-bg:               var(--color-dark-deep);
}

body[data-user-theme="firebrick"] {
  --theme-primary-rgb:   229, 20, 0;
  --theme-primary:       #E51400;
  --theme-primary-hover: #C41200;
  --theme-primary-dark:  #931000;
  --color-dark:          #5D231C;
  --color-dark-deep:     #431711;
  --navy:                var(--color-dark);
  --sb-bg:               var(--color-dark-deep);
}

body[data-user-theme="twilight"] {
  --theme-primary-rgb:   137, 68, 0;
  --theme-primary:       #894400;
  --theme-primary-hover: #743900;
  --theme-primary-dark:  #5B2E00;
  --color-dark:          #5A3715;
  --color-dark-deep:     #40260F;
  --navy:                var(--color-dark);
  --sb-bg:               var(--color-dark-deep);
}

body[data-user-theme="almond"] {
  --theme-primary-rgb:   166, 106, 44;
  --theme-primary:       #A66A2C;
  --theme-primary-hover: #8F5921;
  --theme-primary-dark:  #6F4215;
  --color-dark:          #6A4220;
  --color-dark-deep:     #4B2D14;
  --navy:                var(--color-dark);
  --sb-bg:               var(--color-dark-deep);
}

body[data-user-theme="alphagrey"] {
  --theme-primary-rgb:   102, 102, 102;
  --theme-primary:       #666666;
  --theme-primary-hover: #575757;
  --theme-primary-dark:  #434343;
  --color-dark:          #434A54;
  --color-dark-deep:     #2D333C;
  --navy:                var(--color-dark);
  --sb-bg:               var(--color-dark-deep);
}

body[data-user-theme="softed"] {
  --theme-primary-rgb:   21, 96, 189;
  --theme-primary:       #1560BD;
  --theme-primary-hover: #0F55AA;
  --theme-primary-dark:  #0B4587;
  --color-dark:          #1C2B3A;
  --color-dark-deep:     #0D1B2E;
  --navy:                var(--color-dark);
  --sb-bg:               var(--color-dark-deep);
}

body[data-user-theme="blueagoon"] {
  --theme-primary-rgb:   32, 78, 129;
  --theme-primary:       #204E81;
  --theme-primary-hover: #1D4674;
  --theme-primary-dark:  #17385D;
  --color-dark:          #163354;
  --color-dark-deep:     #0D2040;
  --navy:                var(--color-dark);
  --sb-bg:               var(--color-dark-deep);
}

body[data-user-theme="navy"] {
  --theme-primary-rgb:   28, 43, 58;
  --theme-primary:       #1C2B3A;
  --theme-primary-hover: #162331;
  --theme-primary-dark:  #0D1B2E;
  --color-dark:          #1C2B3A;
  --color-dark-deep:     #0D1B2E;
  --navy:                var(--color-dark);
  --sb-bg:               var(--color-dark-deep);
}

:root {
  --crm-list-surface: #ffffff;
  --crm-list-border: #e7eef5;
  --crm-list-border-soft: #f0f4f8;
  --crm-list-header-bg: #ffffff;
  --crm-list-header-color: var(--color-primary-dark);
  --crm-list-row-hover: rgba(var(--theme-primary-rgb), 0.045);
  --crm-list-control-bg: var(--control-icon-bg);
  --crm-list-control-border: var(--control-icon-border);
  --crm-list-control-color: var(--control-icon-color);
  --crm-list-control-hover-bg: var(--control-icon-hover-bg);
  --crm-list-control-hover-border: var(--control-icon-hover-border);
  --crm-list-control-hover-color: var(--control-icon-hover-color);
  --crm-list-control-shadow: var(--control-icon-shadow);
  --crm-list-control-hover-shadow: var(--control-icon-hover-shadow);
}


/* -- 3. Base -- */

*, *::before, *::after {
  box-sizing: border-box;
}

*:focus, a:focus {
  outline: none;
}

/* -- Base font applied text elements only select excluded select reads native select dimensions for positioning Icon elements vicon glyphicon excluded their fonts aren overridden -- */
body, input, button, textarea,p, td, th, label {
  font-family: var(--font-family) !important;
  font-size:   var(--font-size-base) !important;
  line-height: var(--line-height-base) !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal;
}

/* Apply font-family to text spans/divs/links but NOT to icon elements */
span:not([class*="fa"]):not([class*="vicon"]):not([class*="glyphicon"]):not([class*="bi"]):not([class*="icon"]):not([class*="select2"]),
div:not([class*="fa"]):not([class*="vicon"]):not([class*="glyphicon"]):not([class*="icon"]):not([class*="select2"]),
a:not([class*="fa"]):not([class*="vicon"]):not([class*="glyphicon"]):not([class*="icon"]):not([class*="select2"]),
li:not([class*="fa"]):not([class*="vicon"]):not([class*="glyphicon"]):not([class*="select2"]) {
  font-family: var(--font-family) !important;
  line-height: var(--line-height-base) !important;
}

body {
  background:  var(--bg) !important;
  color:       var(--text) !important;
  padding-top: 0 !important;
}

/* -- Page loader overlay -- */
/* -- Only show when NOT hide vtiger adds removes hide class -- */
#messageBar:not(.hide) {
  position:        fixed !important;
  inset:           0 !important;
  width:           100vw !important;
  height:          100vh !important;
  z-index:         999999 !important;
  background:      rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  opacity:         .4 !important;
}

/* -- When hide present fully gone -- */
#messageBar.hide {
  display: none !important;
}

/* Hide vtiger's inner text div */
#messageBar > div { display: none !important; }

/* Spinner */
#messageBar:not(.hide)::after {
  content:       '' !important;
  display:       block !important;
  width:         40px !important;
  height:        40px !important;
  border:        3px solid rgba(var(--theme-primary-rgb), 0.15) !important;
  border-top:    3px solid var(--accent) !important;
  border-radius: 50% !important;
  animation:     vt-spin 0.75s linear infinite !important;
}

@keyframes vt-spin {
  to { transform: rotate(360deg); }
}
/* -- FIELD TYPOGRAPHY single source truth Edit the tokens root change ALL views once --field-font-size controls list view cells detail view edit view summary view --field-font-weight normal weight for values --field-line-height row cell line spacing -- */

/* -- Applies every field value surface -- */
.fieldValue,
.fieldValue span,
.value,
.summaryView .value,
.summaryViewEntries .fieldValue,
.detailview-table .fieldValue,
.detailview-table td.fieldValue,
td.fieldValue,
#page td.fieldValue,
#page .detailview-table td.fieldValue {
  font-family: var(--font-family) !important;
  font-size:   var(--field-font-size) !important;
  font-weight: var(--field-font-weight) !important;
  color:       var(--field-color) !important;
  line-height: var(--field-line-height) !important;
}



/* → moved to detail-view.css: Detail view layout: detailview-table fieldLabel/fieldValue/tr */
/* Row separators */
#page .detailview-table tbody tr,
.editViewContents table.table tr {
  border-bottom: 1px solid var(--line) !important;
}

/* -- Alternating row colours legacy table-based views -- */
/* → moved to detail-view.css: Detail view: alternating row colours */
/* → moved to edit-view.css: Edit view: alternating row colours */

/* Record title (Mr. Donald Jr.) */
.recordLabel,
.recordBasicInfo h4,
.detailview-header h4 {
  font-family: var(--font-family) !important;
  font-size:   18px !important;
  font-weight: var(--font-weight-bold) !important;
  color:       var(--text) !important;
}

/* Edit view inputs */
/* → moved to edit-view.css: Edit view inputs typography */

/* Section headers (Lead Details, Address Details) */
.blockHeader,
.blockHeaderText,
h4.blockHeaderText,
.summaryViewHeader h4 {
  font-family: var(--font-family) !important;
  font-size:   var(--font-size-sm) !important;
  font-weight: var(--font-weight-bold) !important;
  color:       var(--text) !important;
  letter-spacing: 0.04em !important;
}


/* -- 4. Layout Offsets -- */

nav.navbar.app-fixed-navbar .container-fluid.global-nav {
  padding-left:  calc(var(--sb-w) + 20px) !important;
  padding-right: 12px !important;
}

div.container-fluid.app-nav {
  margin-left: var(--sb-w) !important;
  width:        calc(100% - var(--sb-w)) !important;
  box-sizing:   border-box !important;
}

div#page {
  margin-left: var(--sb-w) !important;
  width:        calc(100% - var(--sb-w)) !important;
  max-width:    calc(100% - var(--sb-w)) !important;
  overflow-x:   hidden !important;
  box-sizing:   border-box !important;
  padding-top: 115px;
}

/* Kill vtiger's hardcoded 42px left padding on the module bar */
@media (min-width: 992px) {
  .app-nav .module-action-bar {
    padding-left: 0 !important;
  }
}

/* -- Flexbox layout for main-container ONLY when sidebar-essentials present list view Edit detail views without sidebar panel must NOT get flex the content shrinks partial-width column Using has detect sidebar-essentials presence -- */
@media (min-width: 992px) {
  .main-container:has(.sidebar-essentials) {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    flex-start !important;
    position:       relative !important;
  }

  .main-container:has(.sidebar-essentials) .sidebar-essentials {
    position:    relative !important;
    left:        auto !important;
    top:         auto !important;
    flex:        0 0 240px !important;
    width:       240px !important;
    min-height:  100% !important;
    align-self:  stretch !important;
  }

  .main-container:has(.sidebar-essentials) .content-area {
    flex:         1 1 auto !important;
    width:        auto !important;
    padding-left: 0 !important;
    min-width:    0 !important;
  }

  /* Settings page  flex row: settings-sidebar | settingsPageDiv */
  .main-container:has(.settings-sidebar):has(.settingsPageDiv) {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    flex-start !important;
  }

  .main-container:has(.settings-sidebar):has(.settingsPageDiv) .settings-sidebar {
    flex:      0 0 240px !important;
    width:     240px !important;
    min-width: 240px !important;
    position:  relative !important;
    left:      auto !important;
    top:       auto !important;
    align-self: stretch !important;
  }

  .main-container:has(.settings-sidebar):has(.settingsPageDiv) .settingsPageDiv {
    flex:         1 1 auto !important;
    width:        auto !important;
    min-width:    0 !important;
    padding-left: 16px !important;
  }

  /* Edit/detail/settings views  full width, no flex interference */
  .main-container:not(:has(.sidebar-essentials)):not(:has(.settingsPageDiv)) {
    display: block !important;
  }
}

/* Full-width views (no essentials panel) */
.listViewPageDiv.content-area.full-width,
.CalendarViewPageDiv.content-area.full-width,
.editViewPageDiv.content-area.full-width,
.settingsPageDiv.content-area.full-width {
  padding-left: 0;
}

/* -- 5. Topbar -- */

nav.navbar.app-fixed-navbar {
  background-color: var(--navy) !important;
  border:           none !important;
  border-bottom:    1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow:       0 2px 12px rgba(0, 0, 0, 0.22) !important;
  padding:          0 !important;
  min-height:       0 !important;
}

nav.navbar.app-fixed-navbar .container-fluid.global-nav > .row {
  display:      flex !important;
  align-items:  center !important;
  flex-wrap:    nowrap !important;
  margin:       0 !important;
  min-height:   50px !important;
}

nav.navbar.app-fixed-navbar .navbar-header {
  display: none !important;
}

nav.navbar.app-fixed-navbar .col-sm-3 {
  flex:    0 0 260px !important;
  width:   260px !important;
  padding: 0 8px 0 0 !important;
  float:   none !important;
}

nav.navbar.app-fixed-navbar #search-links-container,
nav.navbar.app-fixed-navbar .search-links-container,
nav.navbar.app-fixed-navbar #navbar {
  display:    block !important;
  height:     auto !important;
  overflow:   visible !important;
  visibility: visible !important;
  border:     none !important;
  box-shadow: none !important;
  padding:    0 !important;
}

nav.navbar.app-fixed-navbar #navbar {
  flex:            1 !important;
  display:         flex !important;
  justify-content: flex-end !important;
  align-items:     center !important;
  float:           none !important;
  width:           auto !important;
}

nav.navbar.app-fixed-navbar .navbar-nav {
  display:        flex !important;
  flex-direction: row !important;
  align-items:    center !important;
  margin:         0 !important;
  float:          none !important;
}

nav.navbar.app-fixed-navbar .navbar-nav > li {
  float:       none !important;
  display:     flex !important;
  align-items: center !important;
}

/* Search box */
nav.navbar.app-fixed-navbar .search-link {
  display:      flex !important;
  align-items:  center !important;
  background:   rgba(255, 255, 255, 0.1) !important;
  border:       1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 5px !important;
  padding:      0 10px !important;
  height:       32px !important;
  gap:          7px !important;
  width:        100% !important;
}

nav.navbar.app-fixed-navbar .search-link:focus-within {
  border-color: var(--accent) !important;
}

nav.navbar.app-fixed-navbar .fa-search {
  color:       rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0 !important;
  font-size:   12px !important;
}

nav.navbar.app-fixed-navbar .keyword-input {
  background:  transparent !important;
  border:      none !important;
  outline:     none !important;
  box-shadow:  none !important;
  color:       var(--color-card) !important;
  font-size:   12.5px !important;
  font-family: 'Inter', sans-serif !important;
  flex:        1 !important;
  padding:     0 !important;
  height:      auto !important;
}

nav.navbar.app-fixed-navbar .keyword-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

nav.navbar.app-fixed-navbar .adv-search {
  color:  rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  font-size: 13px !important;
}

nav.navbar.app-fixed-navbar .adv-search:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Topbar icon links */
nav.navbar.app-fixed-navbar .navbar-nav > li > div > a,
nav.navbar.app-fixed-navbar .navbar-nav > li > a,
nav.navbar.app-fixed-navbar .qc-button {
  color:           rgba(255, 255, 255, 0.62) !important;
  background:      transparent !important;
  font-size:       15px !important;
  padding:         0 10px !important;
  line-height:     50px !important;
  display:         inline-flex !important;
  align-items:     center !important;
  text-decoration: none !important;
}

nav.navbar.app-fixed-navbar .navbar-nav > li > div > a:hover,
nav.navbar.app-fixed-navbar .navbar-nav > li > a:hover,
nav.navbar.app-fixed-navbar .qc-button:hover {
  color: var(--color-card) !important;
}

nav.navbar.app-fixed-navbar .qc-button {
  font-size: 18px !important;
}

/* User dropdown */
nav.navbar.app-fixed-navbar .logout-content {
  min-width:    260px !important;
  padding:      16px !important;
  border-radius: 8px !important;
  box-shadow:   0 8px 30px rgba(28, 43, 58, 0.18) !important;
  border:       1px solid var(--line) !important;
  background:   var(--white) !important;
  right:        0 !important;
  left:         auto !important;
  margin-top:   2px !important;
}

nav.navbar.app-fixed-navbar .logout-content .profile-container h4 {
  font-size:   14px !important;
  font-weight: 700 !important;
  color:       var(--text) !important;
  margin:      0 0 3px !important;
}

nav.navbar.app-fixed-navbar .logout-content .profile-container h5,
nav.navbar.app-fixed-navbar .logout-content .profile-container p {
  font-size: 12px !important;
  color:     var(--muted) !important;
  margin:    0 !important;
}

nav.navbar.app-fixed-navbar .logout-footer a {
  color:           var(--muted) !important;
  font-size:       12.5px !important;
  text-decoration: none !important;
}

nav.navbar.app-fixed-navbar .logout-footer a:hover {
  color: var(--accent) !important;
}

/* -- 6. Sidebar -- */

.sidebar-wrapper {
  position:    fixed;
  left:        0;
  top:         0;
  height:      100%;
  z-index:     1002;
  display:     flex;
  align-items: flex-start;
}

.sidebar {
  width:            var(--sb-w);
  height:           100%;
  background-color: var(--sb-bg);
  overflow:         hidden;    /* clips the width expansion visually */
  position:         relative;
  display:          flex;
  flex-direction:   column;
  border-right:     1px solid var(--sb-border);
  box-shadow:       4px 0 24px rgba(0, 0, 0, 0.18);
  transition:       width 0.22s ease;
}

/* Accent stripe */
.sidebar::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        0;
  width:      3px;
  height:     100%;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--sb-accent) 60%, transparent 100%);
  opacity:    0.85;
  border-radius: 0 2px 2px 0;
  z-index:    1;
}

.sidebar.open,
.sidebar:hover {
  width: var(--sb-w-open);
}

/* Logo row */
/* -- Sidebar profile logo area -- */
.sidebar .profile {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  padding:         10px 0;
  min-height:      60px;
  border-bottom:   1px solid var(--sb-border);
  flex-shrink:     0;
  overflow:        hidden;
  box-sizing:      border-box;
}

/* -- COLLAPSED state small icon centered -- */
.sidebar .collapse_img_2 {
  height:          40px !important;
}

.sidebar .collapse_img_2 img {
  display:    block !important;
  width:      36px !important;
  height:     36px !important;
  max-width:  36px !important;
  max-height: 36px !important;
  object-fit: contain !important;
  filter:     brightness(0) invert(1) !important;
  opacity:    0.9 !important;
  margin:     0 auto !important;
}

/* Hide expanded logo in collapsed state */
.sidebar .collapse_img_1 {
  display: none !important;
}

/* -- EXPANDED state hover open full logo centered -- */
.sidebar:hover .collapse_img_2,
.sidebar.open  .collapse_img_2 {
  display: none !important;
}

.sidebar:hover .collapse_img_1,
.sidebar.open  .collapse_img_1 {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  width:           100% !important;
  padding:         0 16px !important;
  box-sizing:      border-box !important;
}

/* -- Logo link takes all space centers the image -- */
.sidebar:hover .collapse_img_1 a,
.sidebar.open  .collapse_img_1 a {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex:            1 1 auto !important;
  min-width:       0 !important;
  overflow:        hidden !important;
}

/* Logo image */
.sidebar:hover .collapse_img_1 a img,
.sidebar.open  .collapse_img_1 a img {
  display:    block !important;
  max-height: 36px !important;
  max-width:  140px !important;
  width:      auto !important;
  height:     auto !important;
}

.sidebar:hover .collapse_img_1 .es_logo,
.sidebar.open  .collapse_img_1 .es_logo {
  max-width: 108px !important;
  width:     auto !important;
  filter:    brightness(0) invert(1) !important;
}

/* Toggle button */
.sidebar .toggle-btn {
  width:        26px;
  height:       26px;
  background:   rgba(255, 255, 255, 0.07);
  border:       1px solid rgba(255, 255, 255, 0.10);
  cursor:       pointer;
  display:      flex;
  align-items:  center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink:  0;
}

.sidebar .toggle-btn:hover {
  background:   rgba(var(--theme-primary-rgb), 0.25);
  border-color: var(--sb-accent);
}

.sidebar .toggle-btn img {
  filter:  brightness(0) invert(1);
  opacity: 0.8;
}

.sidebar.open .toggle-btn {
  border-color: var(--sb-accent);
  background:   rgba(var(--theme-primary-rgb), 0.2);
}

/* Scroll container */
.sidebar .menu_listing {
  list-style:      none;
  padding:         8px 0 16px;
  flex:            1 1 auto;
  overflow-y:      auto;
  overflow-x:      hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  max-height:      calc(100vh - 80px); /* 80px = profile header height */
}

.sidebar .menu_listing::-webkit-scrollbar { width: 4px; }
.sidebar .menu_listing::-webkit-scrollbar-track { background: transparent; }
.sidebar .menu_listing::-webkit-scrollbar-thumb {
  background:    rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
.sidebar .menu_listing::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Menu items */
.sidebar .menu_listing li { padding: 2px 8px; cursor: pointer; position: relative; }
.sidebar .has-submenu { padding: 2px 8px; }

/* Row links */
.sidebar .menu_listing li a,
.sidebar .has-submenu button {
  display:      flex;
  align-items:  center;
  gap:          10px;
  color:        var(--sb-text);
  text-decoration: none;
  border-radius: 10px;
  padding:      9px 8px;
  white-space:  nowrap;
  font-size:    13.5px;
  font-weight:  400;
}

.sidebar:hover .menu_listing li a,
.sidebar.open  .menu_listing li a,
.sidebar:hover .has-submenu button,
.sidebar.open  .has-submenu button {
  justify-content: flex-start;
}

.sidebar .menu_listing li a:hover,
.sidebar .menu_listing li:hover > a {
  background: var(--sb-hover-bg);
  color:      var(--sb-text-active);
}

.sidebar .menu_listing li a.active-link {
  background: var(--sb-active-bg);
  color:      var(--sb-text-active);
}

/* -- Icon box matches new TPL div sb-icon svg Every menu item now uses div class sb-icon class div div class sb-icon svg svg div -- */
.sidebar .sb-icon {
  width:           34px !important;
  height:          34px !important;
  min-width:       34px !important;
  max-width:       34px !important;
  border-radius:   8px !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  background:      var(--sb-icon-bg) !important;
  flex-shrink:     0 !important;
  margin-left:     0 !important;
}

/* FA icon inside sb-icon */
.sidebar .sb-icon > i {
  color:       rgba(255, 255, 255, 0.65) !important;
  font-size:   15px !important;
  line-height: 1 !important;
  width:       auto !important;
  height:      auto !important;
  max-width:   none !important;
  max-height:  none !important;
  filter:      none !important;
  display:     block !important;
}

/* SVG icon inside sb-icon */
.sidebar .sb-icon > svg,
.sidebar .sb-icon > img {
  width:      18px !important;
  height:     18px !important;
  max-width:  18px !important;
  max-height: 18px !important;
  display:    block !important;
  filter:     brightness(0) invert(0.7) !important;
}

/* Hover */
.sidebar .menu_listing li a:hover .sb-icon,
.sidebar .menu_listing li:hover .sb-icon,
.sidebar .has-submenu:hover .sb-icon {
  background: rgba(11, 86, 166, 0.2) !important;
}

.sidebar .menu_listing li a:hover .sb-icon > i,
.sidebar .menu_listing li:hover .sb-icon > i,
.sidebar .has-submenu:hover .sb-icon > i {
  color: var(--color-card) !important;
}

.sidebar .menu_listing li a:hover .sb-icon > svg,
.sidebar .menu_listing li a:hover .sb-icon > img,
.sidebar .menu_listing li:hover .sb-icon > svg,
.sidebar .has-submenu:hover .sb-icon > svg,
.sidebar .has-submenu:hover .sb-icon > img {
  filter: brightness(0) invert(1) !important;
}

/* Keep old .app-icon-list rules working as fallback */
.sidebar .menu_listing li .app-icon-list,
.sidebar .has-submenu .app-icon-list {
  width:           34px !important;
  height:          34px !important;
  min-width:       34px !important;
  max-width:       34px !important;
  border-radius:   8px !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  background:      var(--sb-icon-bg) !important;
  flex-shrink:     0 !important;
  color:           rgba(255, 255, 255, 0.65) !important;
  font-size:       15px !important;
  line-height:     1 !important;
  margin-left:     0 !important;
  filter:          none !important;
}

.sidebar .menu_listing li div.app-icon-list > i,
.sidebar .menu_listing li div.app-icon-list > svg,
.sidebar .menu_listing li div.app-icon-list > img {
  color:      rgba(255, 255, 255, 0.65);
  font-size:  15px !important;
  width:      18px;
  height:     18px;
  max-width:  18px;
  max-height: 18px;
  filter:     brightness(0) invert(0.7);
}

.sidebar .menu_listing li a:hover .app-icon-list,
.sidebar .menu_listing li:hover .app-icon-list,
.sidebar .has-submenu:hover .app-icon-list {
  background: rgba(11, 86, 166, 0.2) !important;
  color:      var(--color-card) !important;
}
.sidebar .menu_listing li .app-icon-list.active-link {
  background: var(--sb-icon-active) !important;
}

.sidebar .menu_listing li .app-icon-list.active-link i,
.sidebar .menu_listing li .app-icon-list.active-link svg {
  color:  var(--sb-accent) !important;
  filter: none;
}

/* -- img_active used submenu button rows -- */
.sidebar .menu_listing li .img_active {
  height:          34px;
  min-width:       34px;
  max-width:       34px;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--sb-icon-bg);
  flex-shrink:     0;
}

.sidebar .menu_listing li .img_active i {
  color:      var(--sb-text);
  font-size:  15px !important;
  filter:     brightness(0) invert(0.7);
  max-width:  18px;
  max-height: 18px;
}

.sidebar .menu_listing li a:hover .img_active,
.sidebar .menu_listing li:hover .img_active {
  background: rgba(11, 86, 166, 0.15);
}

.sidebar .menu_listing li a:hover .img_active i,
.sidebar .menu_listing li:hover .img_active i {
  color: var(--sb-accent);
}

.sidebar .menu_listing li .img_active.active-link {
  background: var(--sb-icon-active) !important;
}

.sidebar .menu_listing li .img_active.active-link i {
  color: var(--sb-accent) !important;
}

/* -- Labels hidden until expanded -- */
.sidebar .menu_listing li span,
.sidebar .has-submenu > .has-submenu_gap > span {
  font-size:   12.5px;
  font-weight: 400;
  color:       var(--sb-text);
  opacity:     0;
  white-space: nowrap;
}

.sidebar:hover .menu_listing li span,
.sidebar.open  .menu_listing li span,
.sidebar:hover .has-submenu span,
.sidebar.open  .has-submenu span {
  opacity: 1;
}

.sidebar .menu_listing li a:hover span,
.sidebar .menu_listing li:hover span {
  color: var(--sb-text-active);
}

/* -- Submenu row the flex row button wrapper Structure has-submenu div d-flex has-submenu_gap div img_active div span Label span div img open_submenu div nav__dropdown-collapse div -- */
.sidebar .has-submenu {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  border-radius:  10px;
  padding:        2px 8px;
  cursor:         pointer;
  position:       relative;
  margin:         0;
}

.sidebar .has-submenu:hover { background: var(--sb-hover-bg); }
.sidebar .has-submenu:hover > .has-submenu_gap span { color: var(--sb-text-active); }
.sidebar .has-submenu:hover > .has-submenu_gap .img_active { background: rgba(11, 86, 166, 0.15); }
.sidebar .has-submenu:hover > .has-submenu_gap .img_active i { color: var(--sb-accent); filter: none; }

/* -- Inner flex row collapsed icon centred via padding open left-aligned -- */
.sidebar .has-submenu > .has-submenu_gap {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  gap:             10px;
  flex:            1 1 0%;
  min-width:       0;
  overflow:        hidden;
  padding:         9px 8px;
}

.sidebar:hover .has-submenu > .has-submenu_gap,
.sidebar.open  .has-submenu > .has-submenu_gap {
  justify-content: flex-start;
}

/* -- img_active icon box for submenu rows match app-icon-list exactly -- */
.sidebar .has-submenu > .has-submenu_gap .img_active {
  height:          34px;
  min-width:       34px;
  max-width:       34px;
  width:           34px;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--sb-icon-bg);
  flex-shrink:     0;
  margin:          0;
  padding:         0;
}

/* -- glyph same visual size SVG icons regular items -- */
.sidebar .has-submenu > .has-submenu_gap .img_active i {
  color:       rgba(255,255,255,0.65);
  font-size:   15px;
  line-height: 1;
  filter:      none;
  width:       auto;
  height:      auto;
  max-width:   none;
  max-height:  none;
  margin:      0;
  padding:     0;
}

.sidebar .has-submenu:hover > .has-submenu_gap .img_active {
  background: rgba(11, 86, 166, 0.18);
}
.sidebar .has-submenu:hover > .has-submenu_gap .img_active i {
  color: var(--color-card);
}

/* -- Arrow hidden when collapsed prevent flex-wrap issues -- */
.sidebar .has-submenu > .open_submenu {
  flex-shrink: 0;
  width:       14px;
  height:      14px;
  transform:   rotate(90deg);
  filter:      brightness(0) invert(1);
  transition:  transform 0.2s ease, opacity 0.15s ease;
  margin-left: 4px;
  display:     none;
  opacity:     0.45;
}

.sidebar:hover .has-submenu > .open_submenu,
.sidebar.open  .has-submenu > .open_submenu {
  display: block;
  opacity: 0.45;
}

.sidebar .has-submenu.submenu-open > .open_submenu,
.sidebar .has-submenu.active     > .open_submenu {
  transform: rotate(270deg);
  opacity:   0.85;
}

/* Dropdown takes full width below the row */
.sidebar .has-submenu > .nav__dropdown-collapse {
  flex-basis: 100%;
  width:      100%;
}

/* Submenu dropdown */
.sidebar .has-submenu .nav__dropdown-collapse {
  display:  none;
  overflow: hidden;
}

.sidebar .has-submenu .nav__dropdown-collapse.open-menu {
  display:   block;
  animation: sbSlide 0.22s ease;
}

@keyframes sbSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sidebar .has-submenu .nav__dropdown-collapse a {
  display:         flex;
  font-size:       12px;
  color:           var(--sb-text);
  align-items:     center;
  gap:             8px;
  border-radius:   8px;
  padding:         7px 8px 7px 50px;
  margin:          2px 0;
  text-decoration: none;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

/* Sidebar only shows submenu content when open/hover */
.sidebar:not(:hover):not(.open) .has-submenu .nav__dropdown-collapse {
  display: none !important;
}

.sidebar .has-submenu .nav__dropdown-collapse a:hover {
  background: rgba(11, 86, 166, 0.14);
  color:      var(--color-card);
}

.sidebar .has-submenu .nav__dropdown-collapse a span,
.sidebar .has-submenu .nav__dropdown-collapse span {
  font-size:   12px !important;
  color:       inherit !important;
  opacity:     1 !important;
  padding:     0 !important;
  margin-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  white-space: nowrap;
}

/* Override inline style="padding:10px; margin-left:40px" from TPL */
.sidebar .nav__dropdown-item span[style] {
  padding:     0 !important;
  margin-left: 0 !important;
}

.sidebar .has-submenu .nav__dropdown-collapse.open-menu {
  display: block !important;
}

.sidebar:not(:hover):not(.open) .has-submenu .nav__dropdown-collapse.open-menu {
  display: none !important;
}

.sidebar .menu_listing li.menu-divider {
  height:         1px;
  background:     var(--sb-border);
  margin:         8px 12px;
  padding:        0;
  pointer-events: none;
}

/* -- 7. Module Header -- */

.app-nav .module-action-bar {
  background:    var(--white) !important;
  border-bottom: 1px solid var(--line) !important;
  border-top:    3px solid var(--accent) !important;
  box-shadow:    0 1px 6px rgba(0, 0, 0, 0.06) !important;
}

.app-nav .module-action-bar .module-title,
.app-nav .module-action-bar h4 {
  font-family:     'Inter', sans-serif !important;
  font-size:       13px !important;
  font-weight:     700 !important;
  letter-spacing:  0.06em !important;
  text-transform:  uppercase !important;
  color:           var(--text) !important;
}

.app-nav .module-action-bar .module-breadcrumb,
.app-nav .module-action-bar .current-filter-name {
  font-size:   11.5px !important;
  color:       var(--muted) !important;
  font-family: 'Inter', sans-serif !important;
}



/* ── 8. Essentials Panel ──────────────────────────────────── */

/* ����������������������������������������������������������
   SIDEBAR ESSENTIALS  (Lists / Tags panel, white panel)
   Wrapper: div.sidebar-essentials > div.sidebar-menu
   ���������������������������������������������������������� */

.main-container .sidebar-essentials {
  background:   var(--white) !important;
  border-right: 1px solid var(--line) !important;
  overflow-y:   auto !important;
}

/* ── Scroller — native, no perfectScrollbar ── */
/* scrollContainer kept for vtiger's search JS — native scroll, no perfectScrollbar */
.sidebar-essentials .menu-scroller,
.sidebar-essentials .scrollContainer {
  overflow-y:    auto !important;
  overflow-x:    hidden !important;
  max-height:    calc(100vh - 260px) !important;
  height:        auto !important;
  min-height:    0 !important;
  scrollbar-width:      thin !important;
  scrollbar-color:      var(--color-scrollbar) transparent !important;
}
.sidebar-essentials .menu-scroller::-webkit-scrollbar,
.sidebar-essentials .scrollContainer::-webkit-scrollbar       { width: 4px !important; }
.sidebar-essentials .menu-scroller::-webkit-scrollbar-track,
.sidebar-essentials .scrollContainer::-webkit-scrollbar-track { background: transparent !important; }
.sidebar-essentials .menu-scroller::-webkit-scrollbar-thumb,
.sidebar-essentials .scrollContainer::-webkit-scrollbar-thumb { background: var(--color-scrollbar) !important; border-radius: 4px !important; }

/* Kill perfectScrollbar's injected rails */
.sidebar-essentials .ps-scrollbar-x-rail,
.sidebar-essentials .ps-scrollbar-y-rail,
.sidebar-essentials .ps__rail-x,
.sidebar-essentials .ps__rail-y { display: none !important; }

/* ── Section wrapper ── */
.sidebar-essentials .module-filters {
  padding: 0 !important;
}
.sidebar-essentials .sidebar-container {
  padding: 0 !important;
}

/* ── Header row (LISTS title + + button) ── */
.sidebar-essentials .sidebar-header {
  display:     flex !important;
  align-items: center !important;
  padding:     12px 14px 4px !important;
  gap:         8px !important;
}
.sidebar-essentials .sidebar-header h5 {
  flex:           1 1 auto !important;
  font-size:      10px !important;
  font-weight:    700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color:          var(--muted) !important;
  margin:         0 !important;
  line-height:    1 !important;
}
.sidebar-essentials .sidebar-header .sidebar-btn {
  flex-shrink:     0 !important;
  width:           22px !important;
  height:          22px !important;
  padding:         0 !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  border-radius:   5px !important;
  border:          1px solid var(--line) !important;
  background:      transparent !important;
  color:           var(--muted) !important;
  font-size:       11px !important;
  box-shadow:      none !important;
}
.sidebar-essentials .sidebar-header .sidebar-btn:hover {
  background:   var(--accent) !important;
  color:        var(--color-card) !important;
  border-color: var(--accent) !important;
}

/* ── Section dividers ── */
.sidebar-essentials hr {
  border:       none !important;
  border-top:   1px solid var(--line) !important;
  margin:       4px 14px !important;
}

/* ── Search input wrapper div (no class) ── */
.sidebar-essentials .sidebar-container > div:not(.menu-scroller):not([class]) {
  padding: 0 14px 6px !important;
  display: block !important;
}

/* ── Search input ── */
.sidebar-essentials .search-list {
  display:       block !important;
  width:         100% !important;
  height:        28px !important;
  font-size:     12px !important;
  font-family:   var(--font-family) !important;
  border:        1px solid var(--field-border) !important;
  border-radius: 5px !important;
  padding:       0 8px !important;
  background:    var(--color-card) !important;
  color:         var(--text) !important;
  box-shadow:    none !important;
  box-sizing:    border-box !important;
}
.sidebar-essentials .search-list:focus {
  border-color: var(--accent) !important;
  outline:      none !important;
  box-shadow:   0 0 0 2px rgba(46,120,255,0.12) !important;
}

/* ── Group headings (MY LIST, SHARED LIST, TAGS) ── */
.sidebar-essentials .lists-header,
.sidebar-essentials h5.lists-header,
.sidebar-essentials h6.lists-header {
  font-size:      10px !important;
  font-weight:    700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color:          var(--muted) !important;
  padding:        8px 14px 3px !important;
  margin:         0 !important;
  line-height:    1 !important;
}

/* ── Filter items list ── */
.sidebar-essentials .lists-menu {
  list-style: none !important;
  padding:    0 8px !important;
  margin:     0 0 4px !important;
}
.sidebar-essentials .lists-menu li.listViewFilter {
  margin:      1px 0 !important;
  border:      none !important;
  background:  transparent !important;
  line-height: 1 !important;
}

/* Each filter row — flex so name + chevron sit side by side */
.sidebar-essentials .lists-menu li.listViewFilter {
  display:     flex !important;
  align-items: center !important;
  border-radius: 5px !important;
  transition:    background 0.1s !important;
}

/* Hide overrides — must match or beat the display:flex specificity above */
.sidebar-essentials .lists-menu li.listViewFilter.search-hidden,
.sidebar-essentials .lists-menu li.listViewFilter.filter-search-hide,
.sidebar-essentials .lists-menu li.filter-search-hide {
  display: none !important;
}

.sidebar-essentials .lists-menu li.listViewFilter a.filterName {
  flex:            1 1 auto !important;
  display:         block !important;
  padding:         5px 6px !important;
  color:           var(--text) !important;
  text-decoration: none !important;
  font-size:       12px !important;
  font-family:     var(--font-family) !important;
  white-space:     nowrap !important;
  overflow:        hidden !important;
  text-overflow:   ellipsis !important;
  min-width:       0 !important;
}
.sidebar-essentials .lists-menu li.listViewFilter .pull-right {
  flex-shrink:  0 !important;
  float:        none !important;
  display:      flex !important;
  align-items:  center !important;
  padding-right: 4px !important;
}
.sidebar-essentials .lists-menu li.listViewFilter:hover {
  background: var(--color-row-hover) !important;
}
.sidebar-essentials .lists-menu li.listViewFilter:hover a.filterName {
  color: var(--accent) !important;
}
.sidebar-essentials .lists-menu li.listViewFilter.active {
  background: #ddeaff !important;
}
.sidebar-essentials .lists-menu li.listViewFilter.active a.filterName {
  color:       var(--accent) !important;
  font-weight: 600 !important;
}

/* Chevron â–¾ on each filter */
.sidebar-essentials .fa-angle-down {
  color:      #b0c4d8 !important;
  font-size:  11px !important;
  cursor:     pointer !important;
  padding:    3px 4px !important;
  transition: color 0.12s !important;
}
.sidebar-essentials .fa-angle-down:hover { color: var(--accent) !important; }

/* Show more / Show less — only when NOT hidden by vtiger */
.sidebar-essentials .toggleFilterSize:not(.hide),
.sidebar-essentials .moreTags:not(.hide) {
  display:         block !important;
  font-size:       11px !important;
  color:           var(--accent) !important;
  padding:         3px 14px 8px !important;
  cursor:          pointer !important;
  text-decoration: none !important;
}
.sidebar-essentials .toggleFilterSize:hover,
.sidebar-essentials .moreTags:hover { text-decoration: underline !important; }

/* Ensure .hide always wins */
.sidebar-essentials .moreTags.hide,
.sidebar-essentials .toggleFilterSize.hide { display: none !important; }

/* TAGS section heading */
.sidebar-essentials h5.lists-header {
  padding-top: 10px !important;
}



/* → moved to detail-view.css: Related tabs navigation */
.listViewPageDiv.content-area { overflow-x: hidden !important; }


#listview-actions.lv-toolbar {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  padding:     8px 0 !important;
  flex-wrap:   wrap !important;
}

/* -- Table base -- */
#listview-table,
table.listViewEntriesTable {
  width:           100% !important;
  border-collapse: collapse !important;
  border-spacing:  0 !important;
  font-family:     var(--font-family) !important;
  table-layout:    auto !important;
  min-width:       600px !important;
}

/* -- Header cells -- */
/* -- Header class same element gives specificity beats all -- */
:is(table#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) thead tr.listViewContentHeader th,
:is(table#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) thead tr.listViewHeaders th {
  background:     var(--crm-list-header-bg, #ffffff) !important;
  color:          var(--crm-list-header-color, var(--color-primary-dark)) !important;
  font-size:      11px !important;
  font-weight:    800 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  border-right:   1px solid var(--crm-list-border-soft, #f0f4f8) !important;
  border-bottom:  1px solid var(--crm-list-border, #e7eef5) !important;
  padding:        0 14px !important;
  height:         40px !important;
  white-space:    nowrap !important;
  vertical-align: middle !important;
  user-select:    none !important;
  position:       sticky !important;
  top:            0 !important;
  z-index:        3 !important;
}
:is(table#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) thead tr.listViewContentHeader th:first-child,
:is(table#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) thead tr.listViewHeaders th:first-child {
  width:        80px !important;
  min-width:    80px !important;
  padding:      0 !important;
  border-right: 1px solid var(--crm-list-border-soft, #f0f4f8) !important;
}
:is(table#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) thead tr.listViewContentHeader th:last-child,
:is(table#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) thead tr.listViewHeaders th:last-child { border-right: none !important; }

/* Checkbox + actions in first header th */
tr.listViewContentHeader th:first-child .table-actions,
tr.listViewHeaders th:first-child .table-actions {
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  height:          36px !important;
  gap:             4px !important;
  padding:         0 8px !important;
}
tr.listViewContentHeader th:first-child .table-actions > .dropdown,
tr.listViewHeaders th:first-child .table-actions > .dropdown,
tr.listViewContentHeader th:first-child .table-actions > div,
tr.listViewHeaders th:first-child .table-actions > div {
  float:       none !important;
  display:     inline-flex !important;
  align-items: center !important;
}
tr.listViewContentHeader th:first-child .listViewEntriesMainCheckBox,
tr.listViewHeaders th:first-child .listViewEntriesMainCheckBox {
  width:        15px !important;
  height:       15px !important;
  margin:       0 !important;
  flex-shrink:  0 !important;
  accent-color: var(--accent) !important;
  cursor:       pointer !important;
  float:        none !important;
}

/* Sort links */
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewContentHeader th a.listViewContentHeaderValues,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewHeaders th a.listViewContentHeaderValues,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewContentHeader th a.noSorting,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewHeaders th a.noSorting,
.relatedContainer tr.listViewContentHeader th a.listViewContentHeaderValues,
.relatedContainer tr.listViewHeaders th a.listViewContentHeaderValues,
.relatedContainer tr.listViewContentHeader th a.noSorting,
.relatedContainer tr.listViewHeaders th a.noSorting {
  color:           var(--crm-list-header-color, var(--color-primary-dark)) !important;
  text-decoration: none !important;
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             5px !important;
  font-size:       11px !important;
  font-weight:     700 !important;
  letter-spacing:  0.04em !important;
  text-transform:  none !important;
  transition:      color 0.12s !important;
}
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewContentHeader th a.listViewContentHeaderValues:hover,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewHeaders th a.listViewContentHeaderValues:hover,
.relatedContainer tr.listViewContentHeader th a.listViewContentHeaderValues:hover,
.relatedContainer tr.listViewHeaders th a.listViewContentHeaderValues:hover { color: var(--color-primary) !important; }
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewContentHeader th a .fa-sort,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewHeaders th a .fa-sort,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewContentHeader th a .customsort,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewHeaders th a .customsort,
.relatedContainer tr.listViewContentHeader th a .fa-sort,
.relatedContainer tr.listViewHeaders th a .fa-sort,
.relatedContainer tr.listViewContentHeader th a .customsort,
.relatedContainer tr.listViewHeaders th a .customsort { opacity: 0.55 !important; font-size: 9px !important; color: var(--crm-list-header-color, var(--color-primary-dark)) !important; }
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewContentHeader th a:hover .fa-sort,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewHeaders th a:hover .fa-sort,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewContentHeader th a:hover .customsort,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewHeaders th a:hover .customsort,
.relatedContainer tr.listViewContentHeader th a:hover .fa-sort,
.relatedContainer tr.listViewHeaders th a:hover .fa-sort,
.relatedContainer tr.listViewContentHeader th a:hover .customsort,
.relatedContainer tr.listViewHeaders th a:hover .customsort { opacity: 1 !important; color: var(--color-primary) !important; }

/* Column filter icon */
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewContentHeader th .listColumnFilter,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewHeaders th .listColumnFilter,
.relatedContainer tr.listViewContentHeader th .listColumnFilter,
.relatedContainer tr.listViewHeaders th .listColumnFilter {
  color:      var(--crm-list-header-color, var(--color-primary-dark)) !important;
  opacity:    0.55 !important;
  font-size:  13px !important;
  cursor:     pointer !important;
  transition: color 0.15s !important;
}
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewContentHeader th .listColumnFilter:hover,
:is(#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) tr.listViewHeaders th .listColumnFilter:hover,
.relatedContainer tr.listViewContentHeader th .listColumnFilter:hover,
.relatedContainer tr.listViewHeaders th .listColumnFilter:hover { color: var(--color-primary) !important; opacity: 1 !important; }

/* -- Data rows -- */
tr.listViewEntries { transition: background 0.07s !important; }
tr.listViewEntries td {
  background:     var(--color-card) !important;
  border-bottom:  1px solid var(--line) !important;
  border-right:   1px solid var(--color-border-light) !important;
  padding:        0 14px !important;
  height:         34px !important;
  font-size:      var(--field-font-size) !important;
  font-family:    var(--font-family) !important;
  color:          var(--text) !important;
  vertical-align: middle !important;
  white-space:    nowrap !important;
  overflow:       hidden !important;
  text-overflow:  ellipsis !important;
  max-width:      260px !important;
}
tr.listViewEntries td:last-child { border-right: none !important; }
tr.listViewEntries td:first-child {
  border-left: 3px solid transparent !important;
  transition:  border-color 0.1s !important;
}
tr.listViewEntries:nth-child(even) td { background: #f7f9fd !important; }
tr.listViewEntries:hover td { background: var(--color-row-hover) !important; }
tr.listViewEntries:hover td:first-child { border-left-color: var(--accent) !important; }
tr.listViewEntries.selectedRow td,
tr.listViewEntries td.ui-selected { background: var(--color-row-selected) !important; }
tr.listViewEntries.selectedRow td:first-child { border-left-color: var(--accent) !important; }

/* -- Actions column checkbox icon buttons -- */
td.listViewRecordActions {
  width:          80px !important;
  min-width:      80px !important;
  max-width:      80px !important;
  padding:        0 8px !important;
  overflow:       visible !important;
  white-space:    nowrap !important;
  vertical-align: middle !important;
}
td.listViewRecordActions input[type="checkbox"] {
  width:          15px !important;
  height:         15px !important;
  margin:         0 2px 0 0 !important;
  accent-color:   var(--accent) !important;
  cursor:         pointer !important;
  vertical-align: middle !important;
}
td.listViewRecordActions > div,
td.listViewRecordActions > span {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         2px !important;
}
td.listViewRecordActions .row {
  display:     inline-flex !important;
  align-items: center !important;
  margin:      0 !important;
  gap:         2px !important;
}
td.listViewRecordActions [class*="col-"] {
  padding:     0 !important;
  width:       auto !important;
  float:       none !important;
  display:     inline-flex !important;
  align-items: center !important;
}

/* -- Links table cells -- */
tr.listViewEntries td a {
  color:           var(--accent) !important;
  text-decoration: none !important;
  font-weight:     500 !important;
}
tr.listViewEntries td a:hover {
  text-decoration: underline !important;
  color:           var(--acc-h) !important;
}

/* -- Picklist pills -- */
tr.listViewEntries td .picklist-color {
  display:        inline-block !important;
  padding:        1px 8px !important;
  border-radius:  20px !important;
  font-size:      10.5px !important;
  font-weight:    600 !important;
  line-height:    17px !important;
  white-space:    nowrap !important;
  vertical-align: middle !important;
  color:          #3b5580;
}

/* -- Empty state -- */
tr.emptyRecordsDiv td {
  text-align:  center !important;
  padding:     60px 24px !important;
  color:       var(--muted) !important;
  font-size:   13px !important;
  border:      none !important;
  background:  var(--color-card) !important;
  max-width:   none !important;
}
.emptyRecordsContent {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             6px !important;
  color:           var(--muted) !important;
}

/* Kill vtiger's duplicate scroller */
#scroller_wrapper,
#scroller_wrapper.bottom-fixed-scroll { display: none !important; }

/* -- 10. Buttons -- */

/* -- Default button applies everywhere -- unified with toolbar sizing -- */
.btn-default:not(.hide),
.btn.btn-default:not(.hide),
.module-buttons:not(.hide) {
  height:          34px !important;
  min-height:      34px !important;
  padding:         0 14px !important;
  border-radius:   var(--view-control-radius) !important;
  font-size:       12px !important;
  font-family:     'Inter', sans-serif !important;
  font-weight:     700 !important;
  border:          1px solid var(--btn-border) !important;
  background:      var(--btn-bg) !important;
  color:           var(--btn-color) !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             8px !important;
  line-height:     1 !important;
  box-shadow:      var(--btn-shadow) !important;
  white-space:     nowrap !important;
  margin-left:     0 !important;
}

/* Always respect .hide — two-class specificity beats single-class display:flex/block */
.ev-row.hide, .ev-col.hide { display: none !important; }

/* ── Compact horizontal form rows (compose email, etc.) ──
   label | field side-by-side, thin separator, no min-height bloat */
.form-row-compact {
  display:       flex;
  align-items:   center;
  min-height:    40px;
  padding:       5px 16px;
  border-bottom: 1px solid var(--line);
  background:    var(--color-card);
  box-sizing:    border-box;
}
.form-row-compact:last-child { border-bottom: none; }
.form-row-compact .frc-label {
  flex:       0 0 80px;
  font-size:  12px;
  font-weight: 600;
  color:      var(--muted);
  white-space: nowrap;
  padding-right: 8px;
}
.form-row-compact .frc-field {
  flex:      1;
  min-width: 0;
}

.btn-default:hover,
.btn.btn-default:hover,
.module-buttons:hover {
  background:  var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-border) !important;
  color:       var(--btn-hover-color) !important;
  box-shadow:  var(--btn-hover-shadow) !important;
}

.btn-default:focus,
.btn-default:active,
.btn-default.active,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active,
.module-buttons:focus,
.module-buttons:active,
.module-buttons.active,
.open > .btn-default.dropdown-toggle {
  background:   var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-border) !important;
  color:        var(--btn-hover-color) !important;
  box-shadow:   var(--btn-hover-shadow) !important;
  outline:      none !important;
}

.btn-default:disabled,
.btn.btn-default[disabled] {
  opacity:        0.38 !important;
  cursor:         not-allowed !important;
  box-shadow:     none !important;
  pointer-events: none !important;
}

/* -- Global button transition (applies to ALL .btn everywhere) -- */
.btn,
.btn-default,
.module-buttons,
.list-switcher-toggle {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* -- Global: icons inside any button inherit parent color -- */
:is(.btn, .btn-default, .module-buttons, .list-switcher-toggle)
  :is(i, [class*="vicon"], [class*="fa-"], [class*="glyphicon"], [class*="icon"]) {
  color: inherit !important;
  fill: currentColor !important;
  transition: color 0.15s ease !important;
}

/* -- btn-group remove Bootstrap float negative-margin collapsing -- */
.btn-group {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         6px !important;
}

.btn-group > .btn,
.btn-group > .btn-group {
  margin-left:   0 !important;
  float:         none !important;
  border-radius: 6px !important;
}

/* -- Small square buttons icon-only arrows etc -- */
.btn-default.btn-icon,
.btn-group .btn[id*="Previous"],
.btn-group .btn[id*="Next"] {
  width:   30px !important;
  padding: 0 !important;
}

/* Primary / success button */
.btn-success,
button.btn-success {
  font-family:      'Inter', sans-serif !important;
  font-size:        12.5px !important;
  font-weight:      500 !important;
  border-radius:    5px !important;
}

.btn-success:hover {
  background-color: var(--acc-h) !important;
}

/* -- 11. Toolbar & Pagination -- */

.lv-toolbar-left {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  flex:        1 1 auto !important;
  flex-wrap:   nowrap !important;
  min-width:   0 !important;
}

.lv-toolbar-right {
  flex:        0 0 auto !important;
  display:     flex !important;
  align-items: center !important;
}

/* -- Select all deselect messages filter message centred flex item -- */
.lv-select-msgs {
  display:     flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex:        1 1 auto !important;
  min-width:   0 !important;
}
.lv-select-msg {
  text-align: center !important;
  width:      100% !important;
}
.lv-select-msg a {
  font-size:   12px !important;
  color:       var(--accent) !important;
  white-space: nowrap !important;
}

/* Filter message */
.lv-toolbar-left > .lv-select-msgs > div,
.lv-filter-msg {
  flex:        1 1 auto !important;
  text-align:  center !important;
  font-size:   12px !important;
  color:       var(--muted) !important;
}
.lv-toolbar-left > .lv-select-msgs > div b,
.lv-filter-msg b {
  color:       var(--text) !important;
  font-weight: 600 !important;
}
.lv-toolbar-left > .lv-select-msgs > div a,
.lv-filter-msg a {
  color:           var(--accent) !important;
  text-decoration: none !important;
}
.lv-toolbar-left > .lv-select-msgs > div a:hover,
.lv-filter-msg a:hover { text-decoration: underline !important; }

/* Toolbar button group */
div.btn-group.listViewActionsContainer {
  display:        inline-flex !important;
  flex-direction: row !important;
  align-items:    center !important;
  gap:            4px !important;
  padding:        0 !important;
}
div.btn-group.listViewActionsContainer > div.btn-group.listViewMassActions {
  display:     inline-flex !important;
  margin-left: 0 !important;
}

/* -- Pagination container flex text can ordered before buttons -- */
.listViewActions {
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  justify-content: flex-end !important;
  gap:             8px !important;
  float:           none !important;
  padding:         2px 0 !important;
}

/* -- text order before buttons -- */
.listViewActions .pageNumbers {
  order:    1 !important;
  float:    none !important;
  position: static !important;
  top:      auto !important;
  margin:   0 !important;
}

/* -- button group order after text -- */
.listViewActions .btn-group.pull-right {
  order: 2 !important;
  float: none !important;
}

/* Page count text */
.pageNumbers {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         3px !important;
  font-size:   11.5px !important;
  font-family: 'Inter', sans-serif !important;
  color:       var(--muted) !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

.pageNumbers .pageNumbersText { font-weight: 500 !important; color: var(--text) !important; }
.pageNumbers .totalNumberOfRecords { color: var(--muted) !important; }

/* -- Page jump dashed distinguish from arrows -- */
#PageJump {
  border-style: dashed !important;
  color:        var(--muted) !important;
}

#PageJump:hover {
  border-style: solid !important;
}

/* Page jump dropdown */
.listViewBasicAction.dropdown-menu {
  min-width:    180px !important;
  padding:      12px 14px !important;
  border-radius: 8px !important;
  border:       1px solid var(--color-border-mid) !important;
  box-shadow:   0 6px 20px rgba(28, 43, 58, 0.12) !important;
  font-family:  'Inter', sans-serif !important;
}

.listview-pagenum {
  font-size:    12px !important;
  color:        var(--muted) !important;
  margin-bottom: 8px !important;
  text-align:   center !important;
}

.listViewPagingInput {
  width:        80px !important;
  height:       28px !important;
  border:       1px solid var(--color-border-mid) !important;
  border-radius: 5px !important;
  font-size:    12px !important;
  font-family:  'Inter', sans-serif !important;
  padding:      0 8px !important;
}

.listViewPagingInputSubmit {
  height:       28px !important;
  padding:      0 10px !important;
  font-size:    12px !important;
  border-radius: 5px !important;
}

/* Search filter row */
.listViewPageDiv .listViewFilterSearch {
  padding:       6px 12px !important;
  background:    #fafbfe !important;
  border-bottom: 1px solid #edf1f8 !important;
}

/* -- 12. Row Action Icons --
   Visual styling lives in the canonical theme-driven controls layer near the end of this file. */
.listViewEntryActions a.hide,
.listViewEntryActions button.hide,
.listViewRecordActions a.hide,
.listViewRecordActions button.hide,
.listViewEntryActions .hide,
.listViewRecordActions .hide {
  display: none !important;
}

.listViewEntryActions .fa,
.listViewRecordActions .fa {
  font-size: 13px !important;
}

/* -- Inline save buttons shown when row edit mode -- */
.btn-group.inline-save .btn-success,
.table-actions .btn-success,
.table-actions .btn-danger {
  display:      inline-flex !important;
  align-items:  center !important;
  justify-content: center !important;
  width:        28px !important;
  height:       28px !important;
  padding:      0 !important;
  border-radius: 5px !important;
}

/* -- 13. Forms, Dropdowns, Panels, Modals -- */

.dropdown-menu {
  background-color: var(--color-card) !important;
  border-radius:    8px !important;
  border:           1px solid var(--line) !important;
  box-shadow:       0 6px 24px rgba(28,43,58,0.13) !important;
  font-family:      var(--font-family) !important;
  font-size:        13px !important;
  padding:          4px 0 !important;
}

.panel, .block {
  border-radius: 8px !important;
  border:        1px solid var(--line) !important;
  box-shadow:    0 1px 6px rgba(0, 0, 0, 0.05) !important;
}



@media (min-width: 0px) and (max-width: 830px) {
  #appnavcontent { padding: 0; }
}


@media print {
  .sidebar-wrapper,
  nav.navbar.app-fixed-navbar { display: none !important; }
  div#page                    { margin-left: 0 !important; }
  .coloredBorderTop           { border-top: none !important; }
  .block, .panel              { box-shadow: none !important; }
}

/* -- Inline row save cancel buttons Shown when row enters quick-edit mode Classes confirmed from DevTools btn-success btn-danger inside table-actions btn-group inline-save -- */


/* Save ✓ — plain icon, no button chrome (class is "button btn-success", not "btn btn-success") */
.table-actions .btn-success:not(.hide),
.btn-group.inline-save .btn-success:not(.hide),
td.listViewRecordActions .btn-success:not(.hide) {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           auto !important;
  min-width:       0 !important;
  height:          auto !important;
  padding:         3px 6px !important;
  border-radius:   0 !important;
  background:      transparent !important;
  border:          none !important;
  color:           var(--color-success) !important;
  font-size:       14px !important;
  box-shadow:      none !important;
  margin:          0 !important;
  transition:      color 0.15s ease !important;
}
.table-actions .btn-success:not(.hide):hover,
.btn-group.inline-save .btn-success:not(.hide):hover {
  background: transparent !important;
  color:      var(--color-success-hover) !important;
}

/* Cancel ✗ — plain icon, no button chrome */
.table-actions .btn-danger:not(.hide),
.btn-group.inline-save .btn-danger:not(.hide),
td.listViewRecordActions .btn-danger:not(.hide) {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           auto !important;
  min-width:       0 !important;
  height:          auto !important;
  padding:         3px 6px !important;
  border-radius:   0 !important;
  background:      transparent !important;
  border:          none !important;
  color:           var(--color-danger) !important;
  font-size:       14px !important;
  box-shadow:      none !important;
  margin:          0 !important;
  transition:      color 0.15s ease !important;
}
.table-actions .btn-danger:not(.hide):hover,
.btn-group.inline-save .btn-danger:not(.hide):hover {
  background: transparent !important;
  color:      #e0243e !important;
}

/* -- List view Search Clear buttons HTML confirmed div class table-actions button class btn btn-success btn-sm data-trigger listSearch button class searchAndClearButton t-btn-sm btn btn-danger hide data-trigger clearListSearch -- */

/* Ensure .hide always wins inside .table-actions too */
.table-actions > button.hide {
  display: none !important;
}

/* -- Search button cell width fix The class inline-search-btn constrains the button width Give enough room show the full Search label -- */
th.inline-search-btn {
  width:     110px !important;
  min-width: 110px !important;
  white-space: nowrap !important;
}

.table-actions {
  display:   flex !important;
  gap:       6px !important;
  align-items: center !important;
}

.table-actions > button[data-trigger="listSearch"],
.table-actions > button[data-trigger="PopupListSearch"] {
  width:     auto !important;
  min-width: 90px !important;
}

/* → moved to detail-view.css: Detail view: dvtCellLabel, dvtCellInfo, detailViewContents */
/* → moved to edit-view.css: Edit view layout: table, fieldLabel, fieldValue */
/* → modal-overlay-footer, save/cancel footer → see overlay.css */

/* Edit view title */
.editViewHeader h4.editHeader {
  font-family:  var(--font-family) !important;
  font-size:    16px !important;
  font-weight:  600 !important;
  color:        var(--text) !important;
}

/* → backdrop, #overlayPage base, #overlayPageContent base, customview-content → see overlay.css */

/* → overlayPageContent.in + overlayPage.in layout & task cards → see overlay.css */

/* -- COMPOSE EMAIL MODAL myModal SendEmailFormStep Selectors verified against actual HTML -- */


.myModal.modal.in {
  background: rgba(10, 18, 30, 0.6) !important;
}

/* -- Dialog shell -- */

/* -- MODALS global applies all vtiger modals -- */

/* -- Backdrop only when modal actually open -- */
.modal.in { background: rgba(15, 25, 40, 0.55) !important; }

/* Dialog */
.modal-dialog {
  border-radius: 12px !important;
  overflow:      hidden !important;
  box-shadow:    0 20px 60px rgba(0,0,0,0.25) !important;
}

/* Content wrapper */
.modal-content {
  border:        none !important;
  border-radius: 12px !important;
  overflow:      hidden !important;
  font-family:   var(--font-family) !important;
}

/* Header */
.modal-header {
  background:    var(--navy) !important;
  padding:       14px 20px !important;
  border-bottom: none !important;
}

.modal-header h4,
.modal-header h3,
.modal-header .modal-title {
  color:       var(--color-card) !important;
  font-size:   15px !important;
  font-weight: 600 !important;
  margin:      0 !important;
  line-height: 32px !important;
  font-family: var(--font-family) !important;
}

.modal-header .close {
  color:       var(--color-card) !important;
  opacity:     0.7 !important;
  font-size:   18px !important;
  margin-top:  6px !important;
  text-shadow: none !important;
}
.modal-header .close:hover { opacity: 1 !important; }


.modal-body {
  background: var(--bg) !important;
  padding:    0px; /*20px 24px !important;*/
  height:     auto !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}
/* QuickCreate resets padding to 0 via .myModal .modal-body */

/* Label text */
.modal-body .col-lg-2 > span,
.modal-body .col-sm-2 > span,
.modal-body label:not(.select2-offscreen):not(.select2-voice_label) {
  font-size:   12px !important;
  font-weight: 500 !important;
  color:       var(--color-text-label) !important;
  font-family: var(--font-family) !important;
}

.modal-body .redColor { color: var(--red) !important; }

/* Cc / Bcc links */
.modal-body #ccLink,
.modal-body #bccLink {
  font-size:   12px !important;
  color:       var(--accent) !important;
  font-weight: 500 !important;
  font-family: var(--font-family) !important;
}

/* Checkboxes */
.modal-body input[type="checkbox"] {
  width:        15px !important;
  height:       15px !important;
  cursor:       pointer !important;
  accent-color: var(--accent) !important;
}

/* CKEditor */
.modal-body .cke_chrome {
  border:        1px solid var(--field-border) !important;
  border-radius: 8px !important;
  overflow:      hidden !important;
  box-shadow:    none !important;
}
.modal-body .cke_top {
  background:    #f1f4f9 !important;
  border-bottom: 1px solid var(--field-border) !important;
  padding:       4px 6px !important;
}
.modal-body .cke_bottom {
  background: #f1f4f9 !important;
  border-top: 1px solid var(--field-border) !important;
}

/* Buttons inside modal body */
.modal-body .btn-default,
.modal-body .btn.btn-small.btn-default {
  height:        30px !important;
  padding:       0 12px !important;
  font-size:     12px !important;
  font-weight:   500 !important;
  border:        1px solid var(--btn-border) !important;
  background:    var(--color-card) !important;
  color:         var(--btn-color) !important;
  border-radius: 6px !important;
  font-family:   var(--font-family) !important;
}
.modal-body .btn-success {
  height:        30px !important;
  padding:       0 14px !important;
  font-size:     12px !important;
  font-weight:   600 !important;
  background:    var(--accent) !important;
  border:        none !important;
  border-radius: 6px !important;
  color:         var(--color-card) !important;
  font-family:   var(--font-family) !important;
}
.modal-body .btn-success:hover { background: var(--acc-h) !important; }

/* -- Global select multi-select handled select section below -- */

/* Footer */
.modal-footer {
  background:     var(--color-card) !important;
  border-top:     1px solid var(--line) !important;
  padding:        12px 20px !important;
  align-items:    center !important;
  flex-direction: row-reverse !important;
  gap:            10px !important;
}

/* Primary action (Send, Save etc.) */
.modal-footer .btn-success {
  height:         36px !important;
  padding:        0 22px !important;
  background:     var(--accent) !important;
  border:         none !important;
  border-radius:  7px !important;
  font-size:      13px !important;
  font-weight:    600 !important;
  font-family:    var(--font-family) !important;
  color:          var(--color-card) !important;
  letter-spacing: 0.01em !important;
}
.modal-footer .btn-success:hover { background: var(--acc-h) !important; }

/* Secondary action (Save Draft etc.) */
.modal-footer .btn-default {
  height:        36px !important;
  padding:       0 18px !important;
  background:    var(--color-card) !important;
  border:        1px solid var(--btn-border) !important;
  border-radius: 7px !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  font-family:   var(--font-family) !important;
  color:         var(--btn-color) !important;
}
.modal-footer .btn-default:hover {
  border-color: var(--accent) !important;
  /*color:        var(--accent) !important;*/
}

/* Cancel link */
.modal-footer .cancelLink,
.modal-footer a[data-dismiss="modal"] {
  font-size:    13px !important;
  color:        var(--color-danger) !important;
  font-family:  var(--font-family) !important;
  font-weight:  500 !important;
  margin-right: auto !important;
}

/* -- SETTINGS SIDEBAR settings-sidebar new TPL class Mirrors main sidebar visual style -- */

/* -- Container sits inside vtiger left column -- */
.settings-sidebar {
  background:     var(--sb-bg);
  border-radius:  0;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  min-height:     calc(100vh - 115px);
  box-shadow:     2px 0 12px rgba(0,0,0,0.10);
  width:          100% !important;   /* always full width  no hover expand */
  min-width:      200px !important;
}

/* -- Always show all groups expanded collapse behaviour -- */
.settings-sidebar__items {
  display:  block !important;
  height:   auto !important;
  overflow: visible !important;
  padding:  2px 0 4px !important;
  border:   none !important;
}

.settings-sidebar__chevron {
  display: none !important;  /* hide arrow since nothing collapses */
}

/* Search */
.settings-sidebar__search {
  padding: 12px 12px 8px;
  flex-shrink: 0;
}

.settings-sidebar__search .search-list {
  width:         100% !important;
  height:        32px !important;
  border:        1px solid rgba(255,255,255,0.12) !important;
  border-radius: 7px !important;
  padding:       0 10px !important;
  font-size:     12px !important;
  font-family:   var(--font-family) !important;
  color:         rgba(255,255,255,0.85) !important;
  background:    rgba(255,255,255,0.07) !important;
  box-shadow:    none !important;
}
.settings-sidebar__search .search-list::placeholder {
  color: rgba(255,255,255,0.35) !important;
}
.settings-sidebar__search .search-list:focus {
  outline:      none !important;
  border-color: var(--sb-accent) !important;
  background:   rgba(255,255,255,0.10) !important;
}

/* Nav scroll area */
.settings-sidebar__nav {
  flex:        1 1 0;
  min-height:  0;
  overflow-y:  auto;
  overflow-x:  hidden;
  padding:     4px 0 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.settings-sidebar__nav::-webkit-scrollbar { width: 4px; }
.settings-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.settings-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

/* Group wrapper */
.settings-sidebar__group {
  margin: 1px 8px;
}

/* Group header */
.settings-sidebar__group-header {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  padding:         9px 10px !important;
  border-radius:   8px !important;
  cursor:          pointer !important;
  text-decoration: none !important;
  transition:      background 0.15s !important;
}

.settings-sidebar__group-header:hover {
  background: rgba(255,255,255,0.07) !important;
}

.settings-sidebar__group-header.active,
.settings-sidebar__group.is-open > .settings-sidebar__group-header {
  background: rgba(11,86,166,0.25) !important;
}

.settings-sidebar__group-label {
  font-size:      11px !important;
  font-weight:    600 !important;
  font-family:    var(--font-family) !important;
  color:          rgba(255,255,255,0.75) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  white-space:    nowrap !important;
  overflow:       hidden !important;
  text-overflow:  ellipsis !important;
}

.settings-sidebar__group-header.active .settings-sidebar__group-label,
.settings-sidebar__group.is-open .settings-sidebar__group-label {
  color: var(--color-card) !important;
}

/* Individual item */
.settings-sidebar__item {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  padding:         7px 10px 7px 20px !important;
  margin:          1px 4px !important;
  border-radius:   6px !important;
  font-size:       12px !important;
  font-family:     var(--font-family) !important;
  font-weight:     400 !important;
  color:           rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  transition:      background 0.12s, color 0.12s !important;
  white-space:     nowrap !important;
  overflow:        hidden !important;
  text-overflow:   ellipsis !important;
}

.settings-sidebar__item:hover {
  background: rgba(255,255,255,0.07) !important;
  color:      rgba(255,255,255,0.9) !important;
}

.settings-sidebar__item.active {
  background: rgba(46,120,255,0.20) !important;
  color:      var(--color-card) !important;
  font-weight: 500 !important;
}

/* Pin icon */
.settings-sidebar__pin {
  width:      13px !important;
  height:     13px !important;
  opacity:    0 !important;
  flex-shrink: 0 !important;
  margin-left: 4px !important;
  transition: opacity 0.15s !important;
}
.settings-sidebar__item:hover .settings-sidebar__pin { opacity: 0.6 !important; }

/* -- Legacy settingsgroup kept for fallback TPL updated -- */
.settingsgroup {
  padding: 0 !important;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar) transparent;
}
.settingsgroup::-webkit-scrollbar { width: 4px; }
.settingsgroup::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 4px; }

.settingsgroup .panel-group { margin-bottom: 0 !important; }
.settingsgroup .panel-default {
  border: none !important; box-shadow: none !important;
  background: transparent !important; margin-bottom: 4px !important;
  border-radius: 8px !important; overflow: hidden !important;
}
.settingsgroup .settingsgroup-accordion {
  background: var(--color-border-light) !important; border-radius: 7px !important;
}
.settingsgroup .settingsgroup-accordion:hover { background: #e4ecf8 !important; }
.settingsgroup .settingsgroup-accordion a {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 10px 14px !important; font-size: 12px !important; font-weight: 600 !important;
  font-family: var(--font-family) !important; color: var(--text) !important;
  text-decoration: none !important; letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}
.settingsgroup .settingsgroup-accordion a .indicator {
  color: var(--accent) !important; font-size: 11px !important; width: 14px !important;
}
.settingsgroup .list-group {
  margin: 0 !important; padding: 4px 0 8px !important;
  background: var(--color-surface-light) !important; border: 1px solid #e8edf5 !important;
  border-top: none !important; border-radius: 0 0 7px 7px !important;
}
.settingsgroup .list-group li { list-style: none !important; padding: 0 !important; }
.settingsgroup .list-group li a.menuItemLabel {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px 8px 28px !important; font-size: 13px !important;
  font-family: var(--font-family) !important; color: #3a4a5c !important;
  text-decoration: none !important; border-radius: 5px !important; margin: 1px 6px !important;
}
.settingsgroup .list-group li a.menuItemLabel:hover {
  background: #e4ecf8 !important; color: var(--accent) !important;
}
.settingsgroup .list-group li a.menuItemLabel.settingsgroup-menu-color {
  background: var(--color-row-selected) !important; color: var(--accent) !important; font-weight: 500 !important;
}

/* -- Settings sidebar always fully visible hover-to-expand behaviour -- */
.settings-sidebar .settings-sidebar__group-label,
.settings-sidebar .settings-sidebar__item span,
.settings-sidebar .settings-sidebar__item {
  opacity:    1 !important;
  visibility: visible !important;
  white-space: normal !important;
}

/* Prevent the main sidebar's span opacity:0 rule from hiding settings labels */
.settings-sidebar span {
  opacity: 1 !important;
}

/* No icon-only collapsed state for settings */
.settings-sidebar__group-header,
.settings-sidebar__item {
  width: 100% !important;
}

/* → .settingsPageDiv .modal-overlay-footer → see overlay.css */
#settingsMenuSearch {
   margin-left: 0px; 
}

/* -- Settings List View action column icons -- */
.settingsPageDiv table#listview-table th[style*="width:25%"],
.settingsPageDiv table#listview-table th[style*="width: 25%"] {
  width: 100px !important;
  min-width: 100px !important;
}
/* Action icons in settings list views */
.settingsPageDiv table#listview-table .listViewEntryValue .fa-pencil,
.settingsPageDiv table#listview-table .listViewEntryValue .fa-trash,
.settingsPageDiv table#listview-table .listViewEntryValue a > i {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           28px !important;
  height:          28px !important;
  border-radius:   6px !important;
  font-size:       12px !important;
  color:           var(--color-text-muted) !important;
  background:      transparent !important;
  transition:      all 0.15s !important;
  cursor:          pointer !important;
}
.settingsPageDiv table#listview-table .listViewEntryValue .fa-pencil:hover,
.settingsPageDiv table#listview-table .listViewEntryValue a > i:hover {
  background: var(--color-primary-tint) !important;
  color:      var(--color-primary) !important;
}
.settingsPageDiv table#listview-table .listViewEntryValue .fa-trash:hover {
  background: rgba(220, 53, 69, 0.1) !important;
  color:      var(--color-danger) !important;
}

#taskManagementContainer .entries {
    border: 0px;
}

/* input/select/textarea.inputElement border handled by global input system in section 13 */
/* -- QUICK CREATE MODAL myModal Calendar Events Only layout rules here all input addon select styles come from the global modal-body rules above -- */

/* -- Dialog sizing -- */
.myModal .modal-dialog.modal-md {
  width:     560px !important;
  max-width: 96vw !important;
  margin:    60px auto !important;
}

/* -- Modal body -- */
.myModal .modal-body {
  padding:    16px !important;
}

/* ============================================================
   QUICK CREATE DROPDOWN MENU (#quickCreateModules)
   ============================================================ */

/* Dropdown container */
#quickCreateModules {
  padding:       0 !important;
  background:    var(--color-card) !important;
}
#quickCreateModules > .col-lg-12 {
  padding: 0 !important;
}
#quickCreateModules > .col-lg-12 > [style*="padding-bottom"] {
  padding-bottom: 0 !important;
}

/* Grid of items */
#quickCreateModules .quickCreateItems,
#quickCreateModules .row.quickCreateItems {
  display:   flex !important;
  flex-wrap: wrap !important;
  gap:       0 !important;
  margin:    0 !important;
  padding:   8px !important;
  background: var(--color-card) !important;
}

/* -- Each item reset Bootstrap columns -- */
#quickCreateModules .quickCreateItem,
#quickCreateModules .quickCreateItem[class*="col-"] {
  width:     33.33% !important;
  max-width: 33.33% !important;
  flex:      0 0 33.33% !important;
  padding:   2px !important;
  float:     none !important;
  display:   block !important;
}

/* Item link */
#quickCreateModules .quickCreateItem a,
#quickCreateModules .quickCreateItem a.quickCreateModule {
  display:       flex !important;
  align-items:   center !important;
  gap:           10px !important;
  padding:       7px 8px !important;
  border-radius: 8px !important;
  color:         var(--color-text) !important;
  text-decoration: none !important;
  font-size:     12.5px !important;
  font-family:   var(--font-family) !important;
  transition:    background 0.15s !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
}
#quickCreateModules .quickCreateItem a:hover {
  background: var(--color-row-hover) !important;
  color:      var(--color-primary) !important;
}

/* -- Icon timeline style colored pills -- */
#quickCreateModules .quickCreateItem a i,
#quickCreateModules .quickCreateItem a [class*="vicon"],
#quickCreateModules .quickCreateItem a > i[class*="vicon"] {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           30px !important;
  height:          30px !important;
  min-width:       30px !important;
  border-radius:   8px !important;
  background:      var(--color-primary-tint) !important;
  color:           var(--color-primary) !important;
  font-size:       13px !important;
  flex-shrink:     0 !important;
  transition:      all 0.15s !important;
}
#quickCreateModules .quickCreateItem a:hover i,
#quickCreateModules .quickCreateItem a:hover [class*="vicon"] {
  background: var(--color-primary) !important;
  color:      var(--color-card) !important;
}

/* Module name text */
#quickCreateModules .quickCreateItem a .quick-create-module {
  font-size:     12.5px !important;
  font-weight:   400 !important;
  color:         inherit !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
}

/* Initials-based icons */
#quickCreateModules .quickCreateItem a > span:first-child:not(.quick-create-module) {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           30px !important;
  height:          30px !important;
  min-width:       30px !important;
  border-radius:   8px !important;
  background:      var(--color-primary-tint) !important;
  color:           var(--color-primary) !important;
  font-size:       10px !important;
  font-weight:     600 !important;
  flex-shrink:     0 !important;
}

/* Document submenu dropdown (.quickcreateMoreDropdown) */
#quickCreateModules .quickcreateMoreDropdown,
.quickcreateMoreDropdown {
  background:    var(--color-card) !important;
  border:        1px solid var(--color-border) !important;
  border-radius: 10px !important;
  box-shadow:    0 8px 24px rgba(0,0,0,0.12) !important;
  padding:       6px 0 !important;
  min-width:     190px !important;
  overflow:      hidden !important;
}
#quickCreateModules .quickcreateMoreDropdown > li,
.quickcreateMoreDropdown > li {
  padding: 0 !important;
  list-style: none !important;
}
#quickCreateModules .quickcreateMoreDropdown > li > a,
.quickcreateMoreDropdown > li > a {
  display:       flex !important;
  align-items:   center !important;
  gap:           10px !important;
  padding:       8px 14px !important;
  font-size:     12.5px !important;
  color:         var(--color-text) !important;
  text-decoration: none !important;
  font-family:   var(--font-family) !important;
  transition:    background 0.15s !important;
}
#quickCreateModules .quickcreateMoreDropdown > li > a:hover,
.quickcreateMoreDropdown > li > a:hover {
  background: var(--color-row-hover) !important;
  color:      var(--color-primary) !important;
}
/* Icons in document submenu */
#quickCreateModules .quickcreateMoreDropdown > li > a img,
.quickcreateMoreDropdown > li > a img {
  width:         20px !important;
  height:        20px !important;
  border-radius: 4px !important;
  margin:        0 !important;
}
#quickCreateModules .quickcreateMoreDropdown > li > a i,
.quickcreateMoreDropdown > li > a i {
  font-size: 14px !important;
  color:     var(--color-primary) !important;
  width:     20px !important;
  text-align: center !important;
}
/* Dropdown header */
#quickCreateModules .quickcreateMoreDropdown .dropdown-header,
.quickcreateMoreDropdown .dropdown-header {
  font-size:      10px !important;
  font-weight:    600 !important;
  color:          var(--color-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding:        6px 14px !important;
}
/* Divider */
#quickCreateModules .quickcreateMoreDropdown > li.divider,
.quickcreateMoreDropdown > li.divider,
#quickCreateModules .quickcreateMoreDropdown > hr {
  margin:     4px 0 !important;
  border-top: 1px solid var(--color-border) !important;
  background: none !important;
}

/* -- Subject field hero input top -- */
.quickCreateContent .nameField.inputElement {
  font-size:   14px !important;
  font-weight: 500 !important;
  height:      40px !important;
  margin:      0 0 16px !important;
  display:     block !important;
}
.quickCreateContent .nameField.inputElement::placeholder {
  color:       var(--muted) !important;
  font-weight: 400 !important;
}

/* -- Date time row layout Actual DOM row col-sm- col-sm- col-sm- col-sm- Bootstrap row just outer shell col-sm- the real flex row -- */
.quickCreateContent .row {
  margin:  0 0 16px !important;
  padding: 0 !important;
}

/* col-sm-12 is the actual flex container holding the two date cols + "To" */
.quickCreateContent .row > .col-sm-12 {
  display:     flex !important;
  align-items: flex-start !important;
  gap:         8px !important;
  flex-wrap:   nowrap !important;
  padding:     0 !important;
  width:       100% !important;
}

/* Left and right date+time column blocks */
.quickCreateContent .col-sm-5 {
  flex:      1 1 0% !important;
  padding:   0 !important;
  min-width: 0 !important;
}

/* Space between the two inputs within each column (date above, time below) */
.quickCreateContent .col-sm-5 > div + div {
  margin-top: 6px !important;
}

/* -- separator label override the inline style line-height left padding-right -- */
.quickCreateContent .muted.col-sm-1 {
  flex:        0 0 auto !important;
  width:       auto !important;
  padding:     0 6px !important;
  left:        auto !important;
  line-height: normal !important;
  font-size:   11px !important;
  font-weight: 600 !important;
  color:       var(--muted) !important;
  text-align:  center !important;
  align-self:  center !important;
  margin-top:  0 !important;
  position:    static !important;
}


/* -- Quick Create: div-based ev-row/ev-col layout (replaces old massEditTable) -- */

/* Strip default Bootstrap row margin/padding from ev-row inside Quick Create */
.quickCreateContent .ev-row {
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* Label inside Quick Create: same style as edit view but slightly compact */
.quickCreateContent .ev-col .fieldLabel {
  font-family:    var(--font-family) !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  color:          rgba(var(--theme-primary-rgb), 0.84) !important;
  margin-bottom:  5px !important;
  padding:        0 !important;
  display:        block !important;
  white-space:    nowrap !important;
  text-transform: none !important;
  background:     transparent !important;
}

/* Value container fills the cell */
.quickCreateContent .ev-col .fieldValue {
  width:      100% !important;
  max-width:  100% !important;
  padding:    0 !important;
  background: transparent !important;
}

/* Layout only — appearance from fields.css */
.quickCreateContent .ev-col .fieldValue input.inputElement:not([type='checkbox']):not([type='radio']),
.quickCreateContent .ev-col .fieldValue textarea.inputElement,
.quickCreateContent .ev-col .fieldValue input.form-control:not(.select2-input) {
  width:     100% !important;
  max-width: 100% !important;
}

/* Reference field wrapper full width */
.quickCreateContent .ev-col .fieldValue .referencefield-wrapper {
  width:   100% !important;
  display: block !important;
}
.quickCreateContent .ev-col .fieldValue .referencefield-wrapper .input-group {
  width:     100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* -- Select containers fill the value cell handled select section below -- */
.myModal .modal-footer .btn-default {
  order: 0 !important;
}
.myModal .modal-footer .cancelLink {
  order:       2 !important;
  font-size:   13px !important;
  font-weight: 500 !important;
  color:       var(--color-danger) !important;
  font-family: var(--font-family) !important;
}

/* → fields.css §8-11: .input-group, .input-group-addon, clearReferenceSelection, readonly */
/* → fields.css §2-7:  input base, textarea, focus, readonly, checkbox, div wrappers */

.modal-content {
    background-color: transparent;
}
/* → fields.css §12: div.input-group.editElement (inline edit — all rules) */


/* moved to edit-view.css: Section card fieldBlockContainer, ev-row, ev-col layout */

/* moved to detail-view.css: dv-row, dv-col layout, edit action pencil */

/* → moved to detail-view.css: Detail view container block + related list containers */
/* -- NATIVE SCROLLBARS thin consistent browser-native styling -- */

/* Kill perfectScrollbar rails (still used in some vtiger panels) */
.ps-scrollbar-x-rail,
.ps-scrollbar-y-rail,
.ps__rail-x,
.ps__rail-y,
.ps__thumb-x,
.ps__thumb-y { display: none !important; }

/* -- Native scrollbar styling thin subtle consistent across all containers -- */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--color-scrollbar) transparent !important;
}
*::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
*::-webkit-scrollbar-track { background: transparent !important; }
*::-webkit-scrollbar-thumb { background: var(--color-scrollbar) !important; border-radius: 4px !important; }
*::-webkit-scrollbar-thumb:hover { background: #a0b8cc !important; }
*::-webkit-scrollbar-corner { background: transparent !important; }

/* Specific containers that need scroll */
/* moved to edit-view.css: editViewContents overflow */
.twitterContainer {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* → moved to detail-view.css: Summary widget containers and comment widget */
/* → moved to edit-view.css: Edit view: fieldBlockContainer padding */

/* → .overlayPageContent + #overlayPage .arrow.show → see overlay.css */

ul.dropdown-menu:has(#themeContainer) {
  padding:          8px !important;
  background-color: #ffffff !important;
  min-width:        0 !important;
  width:            auto !important;
}

div#themeContainer {
  padding: 0 !important;
  margin:  0 !important;
}

div#themeContainer .theme-grid {
  display:               grid !important;
  grid-template-columns: repeat(3, 34px) !important;
  gap:                   8px !important;
}

.theme-box {
  width:         30px !important;
  height:        30px !important;
  border-radius: 5px !important;
  cursor:        pointer !important;
  box-shadow:    0 2px 6px rgba(0,0,0,0.20) !important;
  transition:    transform 0.15s, box-shadow 0.15s !important;
  position:      relative !important;
  border:        2px solid transparent !important;
  padding:       0 !important;
}
.theme-box:hover {
  transform:  scale(1.15) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.30) !important;
}
.theme-box.selected {
  border:     2px solid #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25) !important;
  transform:  scale(1.1) !important;
}
.theme-box.selected::after {
  content:         '✓' !important;
  position:        absolute !important;
  inset:           0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  color:           #ffffff !important;
  font-size:       14px !important;
  font-weight:     700 !important;
  text-shadow:     0 1px 2px rgba(0,0,0,0.4) !important;
}

/* ============================================================
   16.  Dashboard
   ============================================================ */


strong, b, th {
    font-size: var(--font-size-base) !important;
}

/* Professional list view refresh */
.listViewPageDiv.content-area {
  overflow-x: hidden !important;
  padding-bottom: 24px !important;
}

.listViewPageDiv.content-area #listview-actions.lv-toolbar {
  margin: 0 0 18px !important;
  padding: 14px 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(218, 228, 240, 0.95) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05) !important;
}

.listViewPageDiv.content-area #listview-actions .lv-toolbar-left,
.listViewPageDiv.content-area #listview-actions .lv-toolbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.listViewPageDiv.content-area #listview-actions .lv-select-msgs {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.listViewPageDiv.content-area #listview-actions .lv-filter-msg,
.listViewPageDiv.content-area #listview-actions .lv-select-msg a {
  color: var(--muted) !important;
  font-size: 12px !important;
}

.listViewPageDiv.content-area #table-content.table-container {
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: scroll !important;
  margin-top: 0 !important;
  height: calc(100vh - 220px) !important;
  min-height: 500px !important;
  border: 1px solid rgba(220, 230, 242, 0.95) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
  scrollbar-gutter: stable !important;
}

.listViewPageDiv.content-area #table-content.table-container::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.listViewPageDiv.content-area #table-content.table-container::-webkit-scrollbar-thumb {
  background: #cad7e6;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.listViewPageDiv.content-area #table-content.table-container::-webkit-scrollbar-track {
  background: transparent;
}

.listViewPageDiv.content-area td.listViewEntryValue .fieldValue:not(.hide) {
  display: block !important;
}

.listViewPageDiv.content-area td.listViewEntryValue .fieldValue.hide {
  display: none !important;
}

.listViewPageDiv.content-area td.listViewEntryValue .fieldValue .value {
  display: block;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.listViewPageDiv.content-area td.listViewEntryValue a {
  font-weight: 600 !important;
}

.listViewPageDiv.content-area tr.listViewEntries td .picklist-color {
  min-height: 28px !important;
  padding: 0 12px !important;
  color: #41576f;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 26px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  vertical-align: middle !important;
}

.listViewPageDiv.content-area tr.emptyRecordsDiv td {
  padding: 80px 30px !important;
  background: transparent !important;
}

/* Settings list tables should follow the same table system as module list views */
.settingsPageDiv.content-area .listViewPageDiv {
  overflow-x: hidden !important;
  padding-bottom: 24px !important;
}

.settingsPageDiv.content-area .listViewPageDiv #listview-actions.listview-actions-container {
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.settingsPageDiv.content-area .listViewPageDiv #listview-actions > .row,
.settingsPageDiv.content-area .listViewPageDiv #listview-actions .list-content > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.settingsPageDiv.content-area .listViewPageDiv #listview-actions > .row {
  margin-bottom: 12px !important;
}

.settingsPageDiv.content-area .listViewPageDiv #listview-actions > .row > [class*="col-"],
.settingsPageDiv.content-area .listViewPageDiv #listview-actions .list-content > .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.settingsPageDiv.content-area .listViewPageDiv #listview-actions .userFilter {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #d8e4f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.settingsPageDiv.content-area .listViewPageDiv #listview-actions .userFilter .btn {
  min-height: 38px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f7f9fc !important;
  color: #52687d !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.settingsPageDiv.content-area .listViewPageDiv #listview-actions .userFilter .btn + .btn {
  border-left: 1px solid #d8e4f0 !important;
}

.settingsPageDiv.content-area .listViewPageDiv #listview-actions .userFilter .btn.btn-primary,
.settingsPageDiv.content-area .listViewPageDiv #listview-actions .userFilter .btn.active {
  background: #edf4fb !important;
  color: #245d9a !important;
}

.settingsPageDiv.content-area .listViewPageDiv #table-content.table-container {
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: scroll !important;
  margin-top: 0 !important;
  height: calc(100vh - 220px) !important;
  min-height: 500px !important;
  border: 1px solid #dde7f1 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  scrollbar-gutter: stable !important;
}

.settingsPageDiv.content-area .listViewPageDiv #table-content.table-container::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.settingsPageDiv.content-area .listViewPageDiv #table-content.table-container::-webkit-scrollbar-thumb {
  background: #cad7e6;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Settings tables: no overrides needed -- shared :is() rules below handle everything */

.settingsPageDiv.content-area .listViewPageDiv table#listview-table td .fieldValue,
.settingsPageDiv.content-area .listViewPageDiv table#listview-table td .value {
  color: inherit !important;
}

.settingsPageDiv.content-area .listViewPageDiv table#listview-table td a {
  font-weight: 600 !important;
}

.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries td:first-child .table-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries td:first-child .table-actions > a,
.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries td:first-child .table-actions > .dropdown > .dropdown-toggle,
.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries td:first-child .table-actions > .more.dropdown.action > .dropdown-toggle {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: var(--view-control-radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--crm-list-control-bg) !important;
  border: 1px solid var(--crm-list-control-border) !important;
  color: var(--crm-list-control-color) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  text-decoration: none !important;
}
/* Hover/open handled by global icon-action hover rule above */

.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries td:first-child .table-actions > .dropdown,
.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries td:first-child .table-actions > .more.dropdown.action {
  position: relative !important;
}

.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries td:first-child .table-actions .dropdown-menu {
  min-width: 190px !important;
  margin-top: 6px !important;
  padding: 6px 0 !important;
  border-radius: 8px !important;
  border: 1px solid #dbe5ef !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
  overflow: hidden !important;
  z-index: 20 !important;
}

.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries td:first-child .table-actions .dropdown-menu > li {
  list-style: none !important;
  margin: 0 !important;
}

.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries td:first-child .table-actions .dropdown-menu > li > a {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 9px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #31475d !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  white-space: normal !important;
}

.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries td:first-child .table-actions .dropdown-menu > li > a:hover {
  background: rgba(var(--theme-primary-rgb), 0.06) !important;
  color: var(--color-primary-dark) !important;
}

.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.emptyRecordsDiv td {
  padding: 80px 30px !important;
  background: transparent !important;
}

/* -- Settings list view: row hover effect matching common list view -- */
.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries:hover td {
  background: var(--color-row-hover) !important;
}
.settingsPageDiv.content-area .listViewPageDiv table#listview-table tbody tr.listViewEntries:hover td:first-child {
  border-left-color: var(--accent) !important;
}

@media (max-width: 1280px) {
  .listViewPageDiv.content-area #listview-actions.lv-toolbar {
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }

  .listViewPageDiv.content-area #table-content.table-container {
    border-radius: 10px !important;
    height: calc(100vh - 206px) !important;
    min-height: 460px !important;
  }

  .listViewPageDiv.content-area table#listview-table,
  .listViewPageDiv.content-area table.listViewEntriesTable {
    min-width: 860px !important;
  }

  .listViewPageDiv.content-area :is(table#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) thead tr.listViewContentHeader th,
  .listViewPageDiv.content-area :is(table#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) thead tr.listViewHeaders th,
  .listViewPageDiv.content-area tr.listViewEntries td {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 991px) {
  .listViewPageDiv.content-area {
    padding-bottom: 16px !important;
  }

  .listViewPageDiv.content-area #listview-actions.lv-toolbar {
    gap: 10px !important;
  }

  .listViewPageDiv.content-area #table-content.table-container {
    border-radius: 8px !important;
    height: calc(100vh - 186px) !important;
    min-height: 400px !important;
  }

  .listViewPageDiv.content-area table#listview-table,
  .listViewPageDiv.content-area table.listViewEntriesTable {
    min-width: 760px !important;
  }

  .listViewPageDiv.content-area :is(table#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) thead tr.listViewContentHeader th:first-child,
  .listViewPageDiv.content-area :is(table#listview-table, #popupModal table.listViewEntriesTable, .popupModal table.listViewEntriesTable) thead tr.listViewHeaders th:first-child,
  .listViewPageDiv.content-area td.listViewRecordActions {
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
  }
}

/* List View Sheet Refresh */


.listViewPageDiv.content-area #listview-actions.lv-toolbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 14px !important;
  border-radius: 0 !important;
}

.listViewPageDiv.content-area #listview-actions .lv-toolbar-left {
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.listViewPageDiv.content-area .lv-view-switcher {
  position: relative !important;
  z-index: 30 !important;
}

.listViewPageDiv.content-area .list-switcher-toggle {
  min-width: 210px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 4px !important;
  border: 1px solid #d6e1ec !important;
  background: #ffffff !important;
  color: #21384d !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.listViewPageDiv.content-area .lv-view-switcher.open .list-switcher-toggle,
.listViewPageDiv.content-area .list-switcher-toggle:hover,
.listViewPageDiv.content-area .list-switcher-toggle:focus {
  border-color: var(--btn-hover-border) !important;
  background: var(--btn-hover-bg) !important;
  color: var(--btn-hover-color) !important;
  box-shadow: var(--btn-hover-shadow) !important;
}

.listViewPageDiv.content-area .list-switcher-menu {
  position: absolute !important;
  z-index: 1050 !important;
  width: 388px !important;
  margin-top: 6px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  border: 1px solid #dbe5ef !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(13, 27, 46, 0.1) !important;
  overflow: visible !important;
  left: 0 !important;
  right: auto !important;
}

.listViewPageDiv.content-area .list-switcher-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid #ebf1f6 !important;
}

.listViewPageDiv.content-area .list-switcher-tabs > li {
  float: none !important;
  margin: 0 !important;
}

.listViewPageDiv.content-area .list-switcher-tabs > li > a {
  margin: 0 !important;
  padding: 12px 14px !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #6c8094 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.listViewPageDiv.content-area .list-switcher-tabs > li.active > a,
.listViewPageDiv.content-area .list-switcher-tabs > li.active > a:hover,
.listViewPageDiv.content-area .list-switcher-tabs > li.active > a:focus {
  border: none !important;
  border-bottom-color: #2e78ff !important;
  background: transparent !important;
  color: #1e364c !important;
}

.listViewPageDiv.content-area .list-switcher-body {
  padding: 12px !important;
}

.listViewPageDiv.content-area .list-switcher-body > .tab-pane {
  display: none;
}

.listViewPageDiv.content-area .list-switcher-body > .tab-pane.active {
  display: block;
}

.listViewPageDiv.content-area .list-switcher-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}

.listViewPageDiv.content-area .list-switcher-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1f3448 !important;
}

.listViewPageDiv.content-area .list-switcher-create {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  border: 1px solid #d8e2ec !important;
  background: #ffffff !important;
  color: #39536b !important;
  box-shadow: none !important;
}

.listViewPageDiv.content-area .list-switcher-search {
  margin-bottom: 12px !important;
}

.listViewPageDiv.content-area .list-switcher-search .search-list,
.listViewPageDiv.content-area .list-switcher-search .search-tag {
  height: 38px !important;
  border-radius: 4px !important;
  border: 1px solid #d8e2ec !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.listViewPageDiv.content-area #module-filters .scrollContainer {
  max-height: 340px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

.listViewPageDiv.content-area #module-filters .list-group {
  margin-bottom: 14px !important;
}

.listViewPageDiv.content-area #module-filters .lists-header {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #7a8ea3 !important;
}

.listViewPageDiv.content-area #module-filters .lists-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 8px 10px 10px !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #edf2f7 !important;
  transition: background 0.16s ease, box-shadow 0.16s ease !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter:hover {
  background: #f7fbff !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter.active {
  background: #eef6ff !important;
  box-shadow: inset 2px 0 0 #2e78ff !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter .filterName {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #23384d !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter .pull-right {
  flex: 0 0 auto !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter .js-popover-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 4px !important;
  opacity: 0.72 !important;
  cursor: pointer !important;
  transition: background 0.16s ease, opacity 0.16s ease !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter:hover .js-popover-container,
.listViewPageDiv.content-area #module-filters .listViewFilter.active .js-popover-container {
  opacity: 1 !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter .js-popover-container:hover,
.listViewPageDiv.content-area #module-filters .listViewFilter .js-popover-container .activePopover {
  background: #eef4fa !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter .fa-angle-down {
  color: #73879c !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter .fa-ellipsis-h {
  color: #73879c !important;
}

.listViewPageDiv.content-area #module-filters .toggleFilterSize {
  display: inline-block !important;
  margin-top: 4px !important;
  color: #2e78ff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.listViewPageDiv.content-area .list-switcher-footer {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #ecf2f7 !important;
}

.listViewPageDiv.content-area .list-switcher-footer .createFilterLink {
  padding: 0 !important;
  color: #2e78ff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.listViewPageDiv.content-area .list-switcher-tag-wrap {
  min-height: 220px !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid #edf2f7 !important;
  background: #ffffff !important;
  color: #23384d !important;
  cursor: pointer !important;
  transition: background 0.16s ease, box-shadow 0.16s ease !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag:hover {
  background: #f8fbfe !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag.active {
  background: #eef6ff !important;
  box-shadow: inset 2px 0 0 #2e78ff !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .activeToggleIcon {
  color: #7d93a8 !important;
  font-size: 10px !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag.active .activeToggleIcon {
  color: #2e78ff !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tagLabel {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #23384d !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .editTag {
  color: #73879c !important;
  opacity: 0.75 !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag:hover .editTag,
.listViewPageDiv.content-area .list-switcher-tag-list .tag.active .editTag {
  opacity: 1 !important;
}

.listViewPageDiv.content-area .list-switcher-tag-overflow {
  display: block !important;
}

.listViewPageDiv.content-area .list-switcher-tag-overflow .moreListTags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.listViewPageDiv.content-area .list-switcher-tag-overflow .moreTags {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 4px !important;
  color: #2e78ff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.listViewPageDiv.content-area .list-switcher-tag-overflow .moreTags.hide {
  display: none !important;
}

.listViewPageDiv.content-area .list-switcher-empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px !important;
  padding: 20px !important;
  border: 1px dashed #d7e3ef !important;
  border-radius: 0 !important;
  background: #fbfdff !important;
  color: #7a8ea3 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.listViewPageDiv.content-area .list-switcher-empty.hide {
  display: none !important;
}

.listViewPageDiv.content-area #module-filters .popover {
  border: 1px solid #dbe5ef !important;
  border-radius: 4px !important;
  box-shadow: 0 10px 24px rgba(13, 27, 46, 0.1) !important;
  z-index: 1060 !important;
}

.listViewPageDiv.content-area #module-filters .popover .popover-content {
  padding: 8px !important;
}

.listViewPageDiv.content-area #module-filters .popover .listmenu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.listViewPageDiv.content-area #module-filters .popover .listmenu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: #24394e !important;
  text-decoration: none !important;
}

.listViewPageDiv.content-area #module-filters .popover .listmenu > li > a:hover {
  background: #f5f9fd !important;
}

.listViewPageDiv.content-area #table-content.table-container {
  border: 1px solid #dde7f1 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.listViewPageDiv.content-area #table-content.table-container::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 12px !important;
  height: var(--listview-scroll-offset, 0px) !important;
  background: #ffffff !important;
  border-left: 1px solid #e7eef5 !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* → Custom View overlay (#overlayPageContent.in #CustomView) → see overlay.css */

/* Merged list switcher + tag cloud */
.listViewPageDiv.content-area .list-switcher-menu {
  position: absolute !important;
  z-index: 1050 !important;
  width: 396px !important;
}

.listViewPageDiv.content-area .list-switcher-body-single {
  padding: 8px 8px 0 !important;
}

.listViewPageDiv.content-area #module-filters .scrollContainer {
  max-height: none !important;
}

.listViewPageDiv.content-area .list-switcher-menu .ps-scrollbar-x-rail,
.listViewPageDiv.content-area .list-switcher-menu .ps-scrollbar-y-rail,
.listViewPageDiv.content-area .list-switcher-menu .ps-scrollbar-x,
.listViewPageDiv.content-area .list-switcher-menu .ps-scrollbar-y {
  display: none !important;
}

.listViewPageDiv.content-area .list-menu-content {
  display: grid !important;
  gap: 10px !important;
}

.listViewPageDiv.content-area .list-menu-content > .list-group,
.listViewPageDiv.content-area .list-menu-content > .list-switcher-section {
  margin: 0 !important;
}

.listViewPageDiv.content-area .list-menu-content > .list-group {
  border: 0 !important;
  box-shadow: none !important;
}

.listViewPageDiv.content-area .list-group .lists-header,
.listViewPageDiv.content-area .list-switcher-section-title {
  display: block !important;
  margin: 0 0 6px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #6f8398 !important;
  line-height: 1.25 !important;
  border: 1px solid #e4ebf3 !important;
  border-radius: 4px !important;
  background: #f6f9fc !important;
}

.listViewPageDiv.content-area #module-filters #myList .lists-header {
  background: #edf5ff !important;
  border-color: #d8e6f5 !important;
  color: #43607a !important;
}

.listViewPageDiv.content-area #module-filters #sharedList .lists-header {
  background: #f4f7fb !important;
  border-color: #e3eaf1 !important;
  color: #5e7388 !important;
}

.listViewPageDiv.content-area .list-switcher-tag-section .list-switcher-section-title {
  background: #eef8f3 !important;
  border-color: #d8e8df !important;
  color: #4c6b5b !important;
}

.listViewPageDiv.content-area .list-switcher-section-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 3px !important;
  scrollbar-width: thin;
  scrollbar-color: #bccbda transparent;
}

.listViewPageDiv.content-area .list-switcher-list-content {
  max-height: 132px !important;
}

.listViewPageDiv.content-area .list-switcher-tag-content {
  max-height: 146px !important;
}

.listViewPageDiv.content-area .list-switcher-section-content::-webkit-scrollbar {
  width: 6px !important;
}

.listViewPageDiv.content-area .list-switcher-section-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.listViewPageDiv.content-area .list-switcher-section-content::-webkit-scrollbar-thumb {
  background: #bccbda !important;
  border-radius: 999px !important;
}

.listViewPageDiv.content-area .list-switcher-section-content::-webkit-scrollbar-thumb:hover {
  background: #9fb2c6 !important;
}

.listViewPageDiv.content-area .list-switcher-section {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #eaf0f6 !important;
}

.listViewPageDiv.content-area .list-switcher-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

.listViewPageDiv.content-area .list-switcher-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #6f8398 !important;
}

.listViewPageDiv.content-area .list-switcher-tag-search {
  margin-bottom: 8px !important;
}

.listViewPageDiv.content-area .list-switcher-tag-wrap {
  min-height: auto !important;
  display: block !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag {
  width: auto !important;
  max-width: 100% !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  border: 1px solid #d9e3ee !important;
  border-bottom: 1px solid #d9e3ee !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag:hover {
  background: #f7fbff !important;
  border-color: #c8d8ea !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag.active {
  background: #eef5ff !important;
  border-color: #cfe0f5 !important;
  box-shadow: none !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .activeToggleIcon {
  font-size: 9px !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tagLabel {
  max-width: 160px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .editTag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: 2px !important;
  border-radius: 999px !important;
  color: #6f8398 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: all 0.16s ease !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag:hover .editTag,
.listViewPageDiv.content-area .list-switcher-tag-list .tag.active .editTag,
.listViewPageDiv.content-area .list-switcher-tag-list .tag.is-editing .editTag {
  opacity: 1 !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .editTag:hover {
  background: #e8f0fa !important;
  color: #35506b !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag.is-editing {
  width: 100% !important;
  padding: 6px !important;
  border-radius: 8px !important;
  background: #f8fbfe !important;
  border-color: #d7e2ee !important;
}

.listViewPageDiv.content-area .list-switcher-tag-list .tag.is-editing .activeToggleIcon,
.listViewPageDiv.content-area .list-switcher-tag-list .tag.is-editing .tagLabel,
.listViewPageDiv.content-area .list-switcher-tag-list .tag.is-editing > .editTag {
  display: none !important;
}

.listViewPageDiv.content-area .tagInlineEditor {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.listViewPageDiv.content-area .tagInlineEditor .editTagInput {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 30px !important;
  border: 1px solid #d7e2ee !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.listViewPageDiv.content-area .tagInlineSave,
.listViewPageDiv.content-area .tagInlineCancel {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid #d7e2ee !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.listViewPageDiv.content-area .tagInlineSave {
  border-color: #2e78ff !important;
  background: #2e78ff !important;
  color: #ffffff !important;
}

.listViewPageDiv.content-area .tagInlineCancel {
  color: #6f8398 !important;
}

.listViewPageDiv.content-area .list-switcher-tag-overflow {
  width: 100% !important;
}

.listViewPageDiv.content-area .list-switcher-tag-overflow .moreListTags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

.listViewPageDiv.content-area .list-switcher-tag-overflow .moreListTags.hide {
  display: none !important;
}

.listViewPageDiv.content-area .list-switcher-tag-overflow .moreTags {
  margin-top: 0 !important;
}

.listViewPageDiv.content-area .list-switcher-search {
  margin-bottom: 8px !important;
}

.listViewPageDiv.content-area .list-switcher-search .search-list,
.listViewPageDiv.content-area .list-switcher-search .search-tag {
  height: 34px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter {
  gap: 8px !important;
  padding: 7px 6px 7px 8px !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter .filterName {
  font-size: 12.5px !important;
}

.listViewPageDiv.content-area #module-filters .listViewFilter .js-popover-container {
  width: 24px !important;
  height: 24px !important;
}

.listViewPageDiv.content-area .list-switcher-footer {
  margin-top: 8px !important;
  padding: 8px 0 8px !important;
  border-top: 1px solid #e8eef5 !important;
  background: #fbfdff !important;
}

.listViewPageDiv.content-area .list-switcher-footer .createFilterLink {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #d8e4f0 !important;
  border-radius: 6px !important;
  background: #f5f9ff !important;
  color: #2e78ff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}

.listViewPageDiv.content-area .list-switcher-footer .createFilterLink:hover,
.listViewPageDiv.content-area .list-switcher-footer .createFilterLink:focus {
  background: #eef5ff !important;
  border-color: #c2d7ef !important;
  color: #215fcf !important;
}

.listViewPageDiv.content-area .list-switcher-footer .createFilterLink .fa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 0 !important;
  border-radius: 999px !important;
  background: #2e78ff !important;
  color: #ffffff !important;
  font-size: 10px !important;
}


/* ============================================================
   moved to timeline.css
   ============================================================ */


/* Shared notifications */
[data-notify="container"].vt-notification {
  width: min(380px, calc(100vw - 32px)) !important;
  max-width: min(380px, calc(100vw - 32px)) !important;
  min-width: 320px !important;
  padding: 14px 16px 16px !important;
  border: 1px solid var(--color-border) !important;
  border-left: 4px solid var(--color-primary) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  color: var(--color-text) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden !important;
}

[data-notify="container"].vt-notification::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  opacity: 0.95 !important;
}

[data-notify="container"].vt-notification .notificationHeader {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

[data-notify="container"].vt-notification .notificationIconWrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  flex: 0 0 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-primary-tint) !important;
  color: var(--color-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

[data-notify="container"].vt-notification .notificationIconWrap [data-notify="icon"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

[data-notify="container"].vt-notification .notificationTextWrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-top: 2px !important;
}

[data-notify="container"].vt-notification [data-notify="title"] {
  display: block !important;
  margin: 0 !important;
  color: var(--color-text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

[data-notify="container"].vt-notification .notificationBody,
[data-notify="container"].vt-notification [data-notify="message"] {
  margin: 0 !important;
  padding: 0 34px 0 44px !important;
  color: var(--color-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

[data-notify="container"].vt-notification [data-notify="dismiss"].close {
  margin: -2px -4px 0 0 !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  opacity: 0.72 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

[data-notify="container"].vt-notification [data-notify="dismiss"].close:hover {
  background: var(--color-row-hover) !important;
  color: var(--color-text) !important;
  opacity: 1 !important;
}

[data-notify="container"].vt-notification [data-notify="progressbar"] {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  margin: 0 !important;
  background: rgba(15, 23, 42, 0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-notify="container"].vt-notification [data-notify="progressbar"] .progress-bar {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  box-shadow: none !important;
}

[data-notify="container"].vt-notification.vt-notification-success {
  border-left-color: var(--color-success) !important;
}

[data-notify="container"].vt-notification.vt-notification-success::before,
[data-notify="container"].vt-notification.vt-notification-success [data-notify="progressbar"] .progress-bar {
  background: linear-gradient(90deg, var(--color-success) 0%, var(--color-success-hover) 100%) !important;
}

[data-notify="container"].vt-notification.vt-notification-success .notificationIconWrap {
  background: rgba(34, 200, 122, 0.12) !important;
  color: var(--color-success) !important;
}

[data-notify="container"].vt-notification.vt-notification-danger {
  border-left-color: var(--color-danger) !important;
}

[data-notify="container"].vt-notification.vt-notification-danger::before,
[data-notify="container"].vt-notification.vt-notification-danger [data-notify="progressbar"] .progress-bar {
  background: linear-gradient(90deg, var(--color-danger) 0%, #ff6b83 100%) !important;
}

[data-notify="container"].vt-notification.vt-notification-danger .notificationIconWrap {
  background: rgba(255, 64, 96, 0.12) !important;
  color: var(--color-danger) !important;
}

[data-notify="container"].vt-notification.vt-notification-warning {
  border-left-color: var(--color-warning) !important;
}

[data-notify="container"].vt-notification.vt-notification-warning::before,
[data-notify="container"].vt-notification.vt-notification-warning [data-notify="progressbar"] .progress-bar {
  background: linear-gradient(90deg, var(--color-warning) 0%, #ffca63 100%) !important;
}

[data-notify="container"].vt-notification.vt-notification-warning .notificationIconWrap {
  background: rgba(255, 170, 48, 0.14) !important;
  color: #cc7a00 !important;
}

@media (max-width: 767px) {
  [data-notify="container"].vt-notification {
    min-width: 0 !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 13px 14px 15px !important;
  }

  [data-notify="container"].vt-notification .notificationBody,
  [data-notify="container"].vt-notification [data-notify="message"] {
    padding: 0 28px 0 44px !important;
  }
}

/* Workspace customizer */
#helpPageOverlay.uiCustomizerOverlay.in {
  width: 540px !important;
  box-shadow: -18px 0 40px rgba(15, 23, 42, 0.16) !important;
  background: #ffffff !important;
}

.listViewPageDiv.content-area #listview-actions.lv-toolbar,
.relatedContainer .relatedHeader {
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: var(--view-card-radius) !important;
  background: var(--crm-list-surface) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045) !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 30 !important;
  scrollbar-gutter: stable !important;
}

.listViewPageDiv.content-area #listview-actions .lv-toolbar-left,
.relatedContainer .relatedHeader .btn-toolbar.row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

.relatedContainer .relatedHeader .btn-toolbar.row > [class*="col-"] {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}

.relatedContainer .relatedHeader .btn-toolbar.row > [class*="col-"]:first-child {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
}

.relatedContainer .relatedHeader .btn-toolbar.row > [class*="col-"]:last-child {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}

:is(.listViewPageDiv.content-area #listview-actions, .module-action-content, .relatedContainer .relatedHeader)
  .dropdown-menu {
  z-index: 1080 !important;
  border: 1px solid var(--crm-list-border) !important;
  border-radius: var(--view-card-radius) !important;
  background: #ffffff !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16) !important;
}

/* -- Table containers -- */

:is(.listViewPageDiv.content-area, .relatedContainer, #popupModal, .popupModal, .popupEntriesDiv)
  :is(#table-content.table-container, .listViewContentDiv, .relatedContents.table-container, .table-container, .popupEntriesTableContainer, .bottomscroll-div) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: auto !important;
  scrollbar-gutter: stable !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table) {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--crm-list-surface) !important;
  color: var(--color-text) !important;
}

/* -- List/related table header rows -- */

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr:is(.listViewContentHeader, .listViewHeaders) th {
  height: 40px !important;
  padding: 0 14px !important;
  border-top: none !important;
  border-right: 1px solid var(--crm-list-border-soft) !important;
  border-bottom: 1px solid var(--crm-list-border) !important;
  background: var(--crm-list-header-bg) !important;
  color: var(--crm-list-header-color) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  top: 0 !important;
  z-index: 5 !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr:is(.listViewContentHeader, .listViewHeaders) th:first-child {
  width: 156px !important;
  min-width: 156px !important;
  padding: 0 10px !important;
  border-top-left-radius: 0 !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr:is(.listViewContentHeader, .listViewHeaders) th:last-child {
  border-top-right-radius: 0 !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr:is(.listViewContentHeader, .listViewHeaders) th
  a:is(.listViewContentHeaderValues, .noSorting) {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr:is(.listViewContentHeader, .listViewHeaders) th
  :is(.fa-sort, .customsort, .listColumnFilter) {
  color: var(--crm-list-header-color) !important;
  opacity: 0.55 !important;
}

/* -- Search row -- */

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr.searchRow th {
  top: 40px !important;
  height: 48px !important;
  padding: 8px 10px !important;
  background: var(--crm-list-surface) !important;
  border-bottom: 1px solid var(--crm-list-border) !important;
  border-right: 1px solid var(--crm-list-border-soft) !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr.searchRow th:first-child {
  padding: 8px 12px !important;
}

/*:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr.searchRow th :is(input, select) {
  height: 34px !important;
  border-radius: var(--view-control-radius-sm) !important;
  border-color: var(--crm-list-border) !important;
  background: #fbfdff !important;
}*/

/* -- Shared list/related/settings table shorthand --
   :is() collapses all container+table combos into one selector.
   Covers: listViewPageDiv, relatedContainer, and settingsPageDiv tables */

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr.searchRow th .btn {
  min-height: 34px !important;
  border-radius: var(--view-control-radius-sm) !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr.searchRow th .btn-success {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  tr.listViewEntries td {
  min-height: 52px !important;
  padding: 11px 14px !important;
  background: var(--crm-list-surface) !important;
  border-bottom: 1px solid var(--crm-list-border) !important;
  color: var(--color-text) !important;
  font-size: var(--field-font-size) !important;
  vertical-align: middle !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  tr.listViewEntries:nth-child(even) td {
  background: var(--crm-list-surface) !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  tr.listViewEntries:hover td {
  background: var(--crm-list-row-hover) !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  tr.listViewEntries:is(.selectedRow) td,
:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  tr.listViewEntries td.ui-selected {
  background: rgba(var(--theme-primary-rgb), 0.08) !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  tr.listViewEntries td:first-child {
  border-left: 4px solid transparent !important;
  padding-left: 12px !important;
}

:is(.listViewPageDiv.content-area, .relatedContainer, .relatedContainer .relatedContents, .settingsPageDiv.content-area .listViewPageDiv, #popupModal, .popupModal, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  tr.listViewEntries:is(:hover, .selectedRow) td:first-child {
  border-left-color: var(--color-primary) !important;
}

/* Canonical theme-driven controls: one final layer for list, related-list, popup, and detail tab chrome. */
:is(.app-nav .module-action-bar, .module-action-bar, .listViewPageDiv, .listViewContentDiv, #listview-actions, .module-action-content, .relatedContainer, .relatedContents, .relatedHeader, .settingsPageDiv, .popupEntriesDiv)
  :is(.btn, .btn-default, .btn.btn-default, .btn-primary, .btn.btn-primary, .btn-info, .btn.btn-info, .module-buttons, .addButton, .selectRelation, .list-switcher-toggle, .btn-success[data-trigger="listSearch"], .btn-success[data-trigger="relatedListSearch"], .btn-success[data-trigger="PopupListSearch"], button[data-trigger="listSearch"], button[data-trigger="relatedListSearch"], button[data-trigger="PopupListSearch"], .searchAndClearButton[data-trigger="clearListSearch"]):not(.hide),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .table-actions > :is(.btn, .btn-primary, .btn-info, .btn-success):not(.hide),
.detailViewContainer.viewContent :is(.detailViewActionButton, .detailViewPagerButton, .detailTagAddButton):not(.hide),
.detailViewContainer.viewContent .summaryWidgetContainer .widget_header .btn:not(.hide),
.detailViewContainer.viewContent .documentsSummaryWidget > .widget_header .btn:not(.hide),
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer > .widget_header .btn:not(.hide),
:is(button[data-trigger="listSearch"], button[data-trigger="relatedListSearch"], button[data-trigger="PopupListSearch"], .searchAndClearButton[data-trigger="clearListSearch"]):not(.hide) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--crm-list-control-border) !important;
  border-radius: var(--view-control-radius-sm) !important;
  background: var(--crm-list-control-bg) !important;
  color: var(--crm-list-control-color) !important;
  box-shadow: var(--crm-list-control-shadow) !important;
  font-family: var(--font-family) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

:is(.app-nav .module-action-bar, .module-action-bar, .listViewPageDiv, .listViewContentDiv, #listview-actions, .module-action-content, .relatedContainer, .relatedContents, .relatedHeader, .settingsPageDiv, .popupEntriesDiv)
  :is(.btn, .btn-default, .btn.btn-default, .btn-primary, .btn.btn-primary, .btn-info, .btn.btn-info, .module-buttons, .addButton, .selectRelation, .list-switcher-toggle, .btn-success[data-trigger="listSearch"], .btn-success[data-trigger="relatedListSearch"], .btn-success[data-trigger="PopupListSearch"], button[data-trigger="listSearch"], button[data-trigger="relatedListSearch"], button[data-trigger="PopupListSearch"], .searchAndClearButton[data-trigger="clearListSearch"]):not(.hide):is(:hover, :focus, :active, .active),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .table-actions > :is(.btn, .btn-primary, .btn-info, .btn-success):not(.hide):is(:hover, :focus, :active, .active),
:is(.app-nav .module-action-bar, .module-action-bar, .listViewPageDiv, .listViewContentDiv, #listview-actions, .module-action-content, .relatedContainer, .relatedContents, .relatedHeader, .settingsPageDiv, .popupEntriesDiv)
  :is(.open, .btn-group.open) > :is(.btn, .btn-default, .btn.btn-default, .btn-primary, .btn.btn-primary, .btn-info, .btn.btn-info, .module-buttons, .addButton, .selectRelation, .list-switcher-toggle).dropdown-toggle:not(.hide),
.detailViewContainer.viewContent :is(.detailViewActionButton, .detailViewPagerButton, .detailTagAddButton):not(.hide):is(:hover, :focus, :active, .active),
.detailViewContainer.viewContent .summaryWidgetContainer .widget_header .btn:not(.hide):is(:hover, :focus, :active, .active),
.detailViewContainer.viewContent .documentsSummaryWidget > .widget_header .btn:not(.hide):is(:hover, :focus, :active, .active),
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer > .widget_header .btn:not(.hide):is(:hover, :focus, :active, .active),
.detailViewContainer.viewContent :is(.open, .btn-group.open) > :is(.btn, .btn-primary, .btn-info, .detailViewActionButton, .detailViewPagerButton, .detailTagAddButton).dropdown-toggle:not(.hide),
:is(button[data-trigger="listSearch"], button[data-trigger="relatedListSearch"], button[data-trigger="PopupListSearch"], .searchAndClearButton[data-trigger="clearListSearch"]):not(.hide):is(:hover, :focus, :active) {
  border-color: var(--crm-list-control-hover-border) !important;
  background: var(--crm-list-control-hover-bg) !important;
  color: var(--crm-list-control-hover-color) !important;
  box-shadow: var(--crm-list-control-hover-shadow) !important;
}

:is(.app-nav .module-action-bar, .module-action-bar, .listViewPageDiv, .listViewContentDiv, #listview-actions, .module-action-content, .relatedContainer, .relatedContents, .relatedHeader, .settingsPageDiv, .popupEntriesDiv)
  :is(.btn, .btn-default, .btn.btn-default, .btn-primary, .btn.btn-primary, .btn-info, .btn.btn-info, .module-buttons, .addButton, .selectRelation, .list-switcher-toggle, button[data-trigger="listSearch"], button[data-trigger="relatedListSearch"], button[data-trigger="PopupListSearch"], .searchAndClearButton[data-trigger="clearListSearch"])
  :is(i, .fa, [class*="vicon"], [class*="glyphicon"], [class*="icon"], svg),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .table-actions > :is(.btn, .btn-primary, .btn-info, .btn-success)
  :is(i, .fa, [class*="vicon"], [class*="glyphicon"], [class*="icon"], svg),
.detailViewContainer.viewContent :is(.detailViewActionButton, .detailViewPagerButton, .detailTagAddButton, .summaryWidgetContainer .widget_header .btn, .documentsSummaryWidget > .widget_header .btn, #relatedActivities > .summaryWidgetContainer > .widget_header .btn)
  :is(i, .fa, [class*="vicon"], [class*="glyphicon"], [class*="icon"], svg),
:is(button[data-trigger="listSearch"], button[data-trigger="relatedListSearch"], button[data-trigger="PopupListSearch"], .searchAndClearButton[data-trigger="clearListSearch"])
  :is(i, .fa, [class*="vicon"], [class*="glyphicon"], [class*="icon"], svg) {
  color: inherit !important;
  fill: currentColor !important;
}

:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr:is(.listViewContentHeader, .listViewHeaders) th {
  background: var(--crm-list-header-bg) !important;
  color: var(--crm-list-header-color) !important;
  font-family: var(--font-family) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  thead tr:is(.listViewContentHeader, .listViewHeaders) th
  :is(a, .listViewContentHeaderValues, .noSorting, .customsort, .fa-sort, .listColumnFilter) {
  color: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
}

:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  tr.searchRow :is(th, td)
  :is(.btn-success, button[data-trigger="listSearch"], button[data-trigger="relatedListSearch"], button[data-trigger="PopupListSearch"], .searchAndClearButton[data-trigger="clearListSearch"]):not(.hide) {
  min-height: 34px !important;
  border-color: var(--crm-list-control-border) !important;
  background: var(--crm-list-control-bg) !important;
  color: var(--crm-list-control-color) !important;
  box-shadow: var(--crm-list-control-shadow) !important;
}

:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv)
  :is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  tr.searchRow :is(th, td)
  :is(.btn-success, button[data-trigger="listSearch"], button[data-trigger="relatedListSearch"], button[data-trigger="PopupListSearch"], .searchAndClearButton[data-trigger="clearListSearch"]):not(.hide):is(:hover, :focus, :active) {
  border-color: var(--crm-list-control-hover-border) !important;
  background: var(--crm-list-control-hover-bg) !important;
  color: var(--crm-list-control-hover-color) !important;
  box-shadow: var(--crm-list-control-hover-shadow) !important;
}

:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv)
  :is(.table-actions.listViewRowActions, td.listViewRecordActions, tr.listViewEntries td)
  :is(.quickView, .markStar, .listViewMoreMenuToggle, .actionImages a, .table-actions > a, .table-actions > .dropdown > .dropdown-toggle, .table-actions > .more.dropdown.action > .dropdown-toggle):not(.hide),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .listViewEntryActions > a:not(.hide),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .listViewEntryActions > button:not(.hide),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .listViewRecordActions .listViewRowActions > span > a:not(.hide),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .listViewRecordActions .listViewRowActions > .more.dropdown.action > .dropdown-toggle:not(.hide),
:is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  :is(.quickView, .markStar, .listViewMoreMenuToggle):not(.hide) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border: 1px solid var(--crm-list-control-border) !important;
  border-radius: var(--view-control-radius-sm) !important;
  background: var(--crm-list-control-bg) !important;
  color: var(--crm-list-control-color) !important;
  fill: currentColor !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: var(--crm-list-control-shadow) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv)
  :is(.table-actions.listViewRowActions, td.listViewRecordActions, tr.listViewEntries td)
  :is(.quickView, .markStar, .listViewMoreMenuToggle, .actionImages a, .table-actions > a, .table-actions > .dropdown > .dropdown-toggle, .table-actions > .more.dropdown.action > .dropdown-toggle):not(.hide):is(:hover, :focus, :active),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .listViewEntryActions > a:not(.hide):is(:hover, :focus, :active),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .listViewEntryActions > button:not(.hide):is(:hover, :focus, :active),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .listViewRecordActions .listViewRowActions > span > a:not(.hide):is(:hover, :focus, :active),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv) .listViewRecordActions .listViewRowActions > .more.dropdown.action > .dropdown-toggle:not(.hide):is(:hover, :focus, :active),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv)
  :is(.listViewMoreMenu.open, .dropdown.open, .more.dropdown.action.open) > :is(.listViewMoreMenuToggle, .dropdown-toggle),
:is(table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  :is(.quickView, .markStar, .listViewMoreMenuToggle):not(.hide):is(:hover, :focus, :active) {
  border-color: var(--crm-list-control-hover-border) !important;
  background: var(--crm-list-control-hover-bg) !important;
  color: var(--crm-list-control-hover-color) !important;
  box-shadow: var(--crm-list-control-hover-shadow) !important;
}

:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv, table#listview-table, table.listViewEntriesTable, table.table, table.listview-table, table.workflow-table)
  :is(.quickView, .markStar, .listViewMoreMenuToggle, .actionImages a, .table-actions > a, .table-actions > .dropdown > .dropdown-toggle, .table-actions > .more.dropdown.action > .dropdown-toggle)
  :is(i, .fa, [class*="vicon"], [class*="glyphicon"], [class*="icon"], svg),
:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv, .popupEntriesDiv)
  :is(.listViewEntryActions > a, .listViewEntryActions > button, .listViewRecordActions .listViewRowActions > span > a, .listViewRecordActions .listViewRowActions > .more.dropdown.action > .dropdown-toggle, .table-actions > .more.dropdown.action > .dropdown-toggle)
  :is(i, .fa, [class*="vicon"], [class*="glyphicon"], [class*="icon"], svg) {
  color: inherit !important;
  fill: currentColor !important;
}

:is(.listViewPageDiv, .listViewContentDiv, .relatedContainer, .relatedContents, .settingsPageDiv)
  :is(.table-actions.listViewRowActions, td.listViewRecordActions, tr.listViewEntries td, table#listview-table)
  .markStar.active {
  border-color: #f1d47a !important;
  background: #fff7da !important;
  color: #c58b11 !important;
}

/* → moved to detail-view.css: Detail view container viewContent tab rules */
.related-tabs.row .nav > li {
    width: auto;
}

.listview-table-norecords .table-actions, .listview-table .table-actions {
	width:auto;
}

/* → #overlayPageContent.in form#EditView → see overlay.css */


/* ── SELECT2 ──────────────────────────────────────────────────────────────── */
/* Rounded corners to match other input fields */
.select2-container .select2-choice {
  border-radius: 6px !important;
}
.select2-container.select2-dropdown-open .select2-choice {
  border-radius: 6px 6px 0 0 !important;  /* flat bottom when open */
}

/* Highlighted option uses the app primary colour */
.select2-results .select2-highlighted,
.select2-results .select2-highlighted .select2-result-label {
  background: var(--color-primary) !important;
  color:      var(--color-card) !important;
}


/* ── Inventory line-item Modifiers (ShopVOX-style full-width panel) ──────
   Rendered as a separate <tr class="lineItemModifiersRow"> immediately
   after each main line-item <tr>. The <td colspan="100"> spans the entire
   table width so the panel reads as a clean breakout below the row. */

tr.lineItemModifiersRow > td.lineItemModifiersCell {
  background: var(--bg-alt, #f5f7fa) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--line, #e2e6ec) !important;
  padding: 12px 16px 14px !important;
}

/* Fieldset-style: the head ("MODIFIERS" + optional Total Area summary)
   straddles the top border of the card, like a <legend>. The card itself
   has top padding to keep its content clear of the lifted head. */
.lineItemModifiers {
  position: relative;
  background: var(--color-card, #ffffff);
  border: 1px solid var(--line, #e2e6ec);
  border-radius: var(--view-card-radius, 6px);
  padding: 22px 16px 14px;
  margin-top: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.lineItemModifiers__head {
  position: absolute;
  top: -10px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  border-bottom: 0;
  pointer-events: none; /* let clicks fall through the gaps */
}
/* Both the title and the totals sit on the border line — give each its
   own card-coloured backdrop so the line is masked behind them, leaving
   visible border segments to either side. */
.lineItemModifiers__title,
.lineItemModifiers__totals {
  background: var(--color-card, #ffffff);
  padding: 0 8px;
  line-height: 1;
  pointer-events: auto;
}
.lineItemModifiers__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-dark, #2c3e50);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lineItemModifiers__totals {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--muted);
}
.lineItemModifiers__totalsItem label {
  font-weight: 600;
  color: var(--color-text-label, #4a5568);
  margin: 0 6px 0 0;
}
.lineItemModifiers__totalsItem .totalareaDisplay {
  color: var(--text);
  font-weight: 600;
}
.lineItemModifiers__totalsItem .muted {
  color: var(--muted);
  margin-left: 2px;
}

.lineItemModifiers__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
/* Each pricing-type group lays its own fields out horizontally so Length /
   Height / Total Area sit side-by-side instead of stacking. */
.lineItemModifiers__group {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
}
.lineItemModifiers__group.hide { display: none; }
.lineItemModifiers__field {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 120px;
}
.lineItemModifiers__field .measure-label {
  display: block !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  margin: 0 0 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}
.lineItemModifiers__field .measure-input {
  width: 110px !important;
  font-size: var(--field-font-size) !important;
  color: var(--text) !important;
  padding-right: 30px !important;
}
.lineItemModifiers__field .measure-readonly {
  background: var(--bg-alt, #f4f6fa) !important;
  color: var(--muted) !important;
  cursor: default !important;
}
.lineItemModifiers__unit {
  position: absolute;
  right: 8px;
  bottom: 7px;
  font-size: 10.5px;
  color: var(--muted);
  pointer-events: none;
}

/* Read-only display variant used on the Detail view — same field-shape as
   the editable inputs on Edit, but rendered as a static value chip so it
   visually aligns with the label/unit positioning. */
.lineItemModifiers__field--readonly .measure-value {
  display: inline-block;
  min-width: 110px;
  padding: 6px 30px 6px 8px;
  border: 1px solid var(--line, #e2e6ec);
  border-radius: 4px;
  background: var(--bg-alt, #f4f6fa);
  color: var(--text);
  font-size: var(--field-font-size);
  font-weight: 600;
  line-height: 1.3;
}



/* ── List-view action icon buttons ────────────────────────────────────────
   Direct rules (end of file = highest cascade position) so they win over
   any theme or vtiger defaults, regardless of :is() matching. ----------- */
td.listViewRecordActions .table-actions a,
td.listViewRecordActions .table-actions span.dropdown-toggle {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           28px !important;
  height:          28px !important;
  min-width:       28px !important;
  padding:         0 !important;
  border:          1px solid var(--crm-list-control-border) !important;
  border-radius:   var(--view-control-radius-sm) !important;
  background:      var(--crm-list-control-bg) !important;
  color:           var(--crm-list-control-color) !important;
  cursor:          pointer !important;
  text-decoration: none !important;
  box-shadow:      var(--crm-list-control-shadow) !important;
  transition:      background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}
td.listViewRecordActions .table-actions a:hover,
td.listViewRecordActions .table-actions span.dropdown-toggle:hover {
  border-color:    var(--crm-list-control-hover-border) !important;
  background:      var(--crm-list-control-hover-bg) !important;
  color:           var(--crm-list-control-hover-color) !important;
  box-shadow:      var(--crm-list-control-hover-shadow) !important;
  text-decoration: none !important;
}
/* star active state */
td.listViewRecordActions .table-actions a.markStar.active {
  border-color: #f1d47a !important;
  background:   #fff7da !important;
  color:        #c58b11 !important;
}
/* icons inside the buttons inherit the button's colour */
td.listViewRecordActions .table-actions a i,
td.listViewRecordActions .table-actions span.dropdown-toggle i {
  color:       inherit !important;
  font-size:   13px !important;
  line-height: 1 !important;
}


tr.listViewEntries td .picklist-color {
  display:     inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}


.table-actions .searchAndClearButton.btn.btn-danger:not(.hide), .table-actions .searchAndClearButton[data-trigger="clearListSearch"]:not(.hide) {
  width:      auto !important;
  height:     auto !important;
  min-height: 32px !important;
  padding:    0 12px !important;
  gap:        6px !important;
}
.table-actions .searchAndClearButton.btn.btn-danger:not(.hide):hover, .table-actions .searchAndClearButton[data-trigger="clearListSearch"]:not(.hide):hover {
  background:   var(--crm-list-control-hover-bg) !important;
  border-color: var(--crm-list-control-hover-border) !important;
  color:        var(--crm-list-control-hover-color) !important;
  box-shadow:   var(--crm-list-control-hover-shadow) !important;
}


.select2-container .select2-choice {
  background:        var(--field-bg, #fff) !important;
  background-image:  none !important;
  border-color:      var(--field-border, #d4dae8) !important;
  color:             var(--text) !important;
  height:            34px !important;
  border-radius:     var(--view-control-radius-sm, 6px) !important;
  box-shadow:        none !important;
}

/* Arrow chevron strip */
.select2-container .select2-choice .select2-arrow {
  background:        transparent !important;
  background-image:  none !important;
  border-left-color: var(--field-border, #d4dae8) !important;
}
.select2-container .select2-choice .select2-arrow b {
  background-position: 2px 6px !important; /* keep the sprite arrow glyph */
}

/*.select2-drop {
  background:    var(--color-card, #fff) !important;
  color:         var(--text) !important;
  border-color:  var(--field-border, #d4dae8) !important;
  border-radius: 0 0 var(--view-control-radius-sm, 6px) var(--view-control-radius-sm, 6px) !important;
  box-shadow:    0 6px 24px rgba(28, 43, 58, 0.12) !important;
}*/

/*.select2-drop.select2-drop-above {
  border-color:  var(--field-border, #d4dae8) !important;
  border-radius: var(--view-control-radius-sm, 6px) var(--view-control-radius-sm, 6px) 0 0 !important;
  box-shadow:    0 -4px 16px rgba(28, 43, 58, 0.10) !important;
}*/

.select2-search input {
  background:       var(--field-bg, #fff) !important;
  background-image: none !important;
  border-color:     var(--field-border, #d4dae8) !important;
  color:            var(--text) !important;
  font-family:      var(--font-family) !important;
  font-size:        13px !important;
  border-radius:    4px !important;
  min-height:       32px !important;
  padding:          5px 10px !important;
  box-shadow:       none !important;
}

/* Kill the active/open highlight that select2.css and select2-bootstrap.css
   apply on both single- and multi-choice widgets. We don't want any extra
   ring or coloured border when the dropdown is opened — keep the field
   looking like a normal input. */
.select2-container-active .select2-choice,
.select2-container-active .select2-choices,
.select2-container.select2-dropdown-open .select2-choice,
.select2-container.select2-dropdown-open .select2-choices,
.select2-container.select2-drop-above.select2-dropdown-open .select2-choice,
.select2-container.select2-drop-above.select2-dropdown-open .select2-choices {
  border-color: var(--field-border, #d4dae8) !important;
  box-shadow:   none !important;
  outline:      none !important;
}
.select2-drop-active,
.select2-drop.select2-drop-above.select2-drop-active {
  border-color:     var(--field-border, #d4dae8) !important;
  border-top-color: var(--field-border, #d4dae8) !important;
  box-shadow:       none !important;
}


.select2-result-label {
  color:       var(--text) !important;
  font-family: var(--font-family) !important;
  font-size:   13px !important;
}

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error {
  background: var(--color-card, #fff) !important;
  color:      var(--muted) !important;
  font-family: var(--font-family) !important;
  font-size:  13px !important;
}

/* ── Multi-select: choices container (.select2-choices) ─────────────────── */
.select2-container-multi .select2-choices {
  background:       var(--field-bg, #fff) !important;
  background-image: none !important;
  border-color:     var(--field-border, #d4dae8) !important;
  border-radius:    var(--view-control-radius-sm, 6px) !important;
  min-height:       34px !important;
  box-shadow:       none !important;
}
.select2-container-multi.select2-container-active .select2-choices {
  border-color: var(--field-border, #d4dae8) !important;
  box-shadow:   none !important;
  outline:      none !important;
}

/* Matches native vtiger look: light gray bg, border, "× label" layout.
   18px LEFT padding is required — the close button sprite sits at left:3px. */
.select2-container-multi .select2-choices .select2-search-choice {
  background:       #f4f4f4 !important;
  background-image: none !important;
  border:           1px solid #d0d0d0 !important;
  color:            var(--text, #333) !important;
  border-radius:    3px !important;
  box-shadow:       none !important;
  font-family:      var(--font-family) !important;
  font-size:        12px !important;
  line-height:      1.4 !important;
  padding:          3px 5px 3px 18px !important;
  margin:           3px 0 3px 5px !important;
}
.select2-container-multi .select2-choices .select2-search-choice-focus {
  background:   #e8e8e8 !important;
  border-color: #aaa !important;
}


.fieldLabel {
  font-family:    var(--font-family) !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  color:          rgba(var(--theme-primary-rgb), 0.84) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height:    1.35 !important;
  /*margin-bottom:  6px !important;*/
  padding:        0 !important;
  display:        block !important;
  white-space:    nowrap !important;
  width:          auto !important;
  min-width:      unset !important;
  background:     transparent !important;
  vertical-align: unset !important;
  text-align:     left !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .fieldValue,
.detailViewContainer.viewContent .fieldBlockContainer .fieldValue .value,
.detailViewContainer.viewContent .fieldBlockContainer .fieldValue .value * {
  font-family:    var(--font-family) !important;
  font-size:      12px !important;
  line-height: 1.3 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}


/* -- Hidden default -- */
#helpPageOverlay { display: none !important; }

/* -- Visible when opened -- */
#helpPageOverlay.in {
  display:        flex !important;
  flex-direction: column !important;
  width:          480px !important;
  height:         100vh !important;
  position:       fixed !important;
  top:            0 !important;
  right:          0 !important;
  z-index:        1099 !important;
  background:     var(--color-card) !important;
  border-left:    1px solid var(--color-border) !important;
  box-shadow:     -8px 0 40px rgba(0, 0, 0, 0.15) !important;
  padding:        0 !important;
  overflow:       hidden !important;
}

/* -- Responsive breakpoints -- */
@media (max-width: 1200px) {
  #helpPageOverlay.in { width: 420px !important; }
}
@media (max-width: 768px) {
  #helpPageOverlay.in { width: 100vw !important; }
}

/* -- Clean-up pass: ensure panel body uses card/border tokens, not hardcoded colours -- */

/* Panel body + scrollable area */
#helpPageOverlay.in {
  background:   var(--color-card) !important;
  border-left:  1px solid var(--color-border) !important;
  box-shadow:   -4px 0 24px rgba(0, 0, 0, 0.10) !important;
}





/* ============================================================
   ===========  INLINED FROM fields.css  =====================
   (was loaded as a separate <link> from Header.tpl)
   @charset stripped — only the file-leading @charset is honoured.
   ============================================================ */


/* ============================================================
   FIELDS.CSS — Canonical form-field appearance
   ============================================================
   Single source of truth for all .inputElement / .input-group /
   .form-control styling.  Load order in Header.tpl:

       style.css → fields.css → detail-view.css → edit-view.css

   Context-specific LAYOUT (width, flex-basis, table cell padding)
   lives in detail-view.css / edit-view.css.  This file only owns
   the visual appearance so that every input looks identical in
   edit-view, quick-create, detail inline-edit and modals.

   CSS custom properties used
   --field-border      border colour (resting)
   --field-focus       border colour (focused)
   --field-bg          alias → var(--color-card)
   --field-value       text colour (alias → var(--text))
   --field-font-size   13px
   --font-family       brand font stack
   --text              primary text
   --muted             secondary / label text
   --accent            interactive blue
   --ok                green (success / create)
   --red               danger / cancel
   --line              subtle divider
   --color-card        card / white surface
   --color-surface-light  read-only background
   --color-surface-input  addon background
   --color-surface-muted  icon-button background
   ============================================================ */


/* ── 1. Bootstrap .form-control override ────────────────────────────────── */

.form-control {
  border-color:  var(--field-border) !important;
  border-radius: 6px !important;
  font-family:   var(--font-family) !important;
  font-size:     13px !important;
  color:         var(--field-value) !important;
  background:    var(--color-card) !important;
}
.form-control:focus {
  border-color: var(--field-focus) !important;
  box-shadow:   0 0 0 3px rgba(11, 86, 166, 0.10) !important;
  outline:      none !important;
}


/* ── 2. Universal input appearance ──────────────────────────────────────── */
/* Primary hook is .inputElement.  The long type= list covers vtiger         */
/* elements rendered without the class (datepickers, search bars, etc.).    */

/* Excluded contexts (Selectors-Level-4 `:not()` with descendant
   combinators — Chrome 88+, Firefox 84+, Safari 9+):
     - `.colorpicker input`  → jQuery colorpicker's RGB/HSB/hex inputs
        are `<input type="text" size="3" maxlength="3">` that would
        overflow the picker's compact layout if forced to 32px height.
     - `.lp-field input`     → the login page (`.lp-*` system) has its
        own field chrome; the universal rule was painting a 32px input
        with our field-border on top of the login design. */
input.inputElement:not([type="checkbox"]):not([type="radio"]):not(.colorpicker input):not(.lp-field input),
input[type="text"]:not(.select2-input):not(.select2-focusser):not(.colorpicker input):not(.lp-field input),
input[type="email"]:not(.colorpicker input):not(.lp-field input),
input[type="number"]:not(.colorpicker input):not(.lp-field input),
input[type="tel"]:not(.colorpicker input):not(.lp-field input),
input[type="url"]:not(.colorpicker input):not(.lp-field input),
input[type="password"]:not(.colorpicker input):not(.lp-field input),
input[type="search"]:not(.colorpicker input):not(.lp-field input),
input.dateField,
input.timepicker-default,
input.ui-timepicker-input,
input.listSearchContributor {
  height:        32px !important;
  border:        1px solid var(--field-border) !important;
  border-radius: 6px !important;
  padding:       5px 10px !important;
  font-size:     13px !important;
  font-family:   var(--font-family) !important;
  color:         var(--text) !important;
  background:    var(--color-card) !important;
  box-shadow:    none !important;
  box-sizing:    border-box !important;
  outline:       none !important;
}


/* ── 3. Textarea ─────────────────────────────────────────────────────────── */

textarea.inputElement {
  height:        auto !important;
  min-height:    60px !important;
  padding:       6px 10px !important;
  font-size:     13px !important;
  font-family:   var(--font-family) !important;
  color:         var(--text) !important;
  background:    var(--color-card) !important;
  border:        1px solid var(--field-border) !important;
  border-radius: 6px !important;
  box-shadow:    none !important;
  box-sizing:    border-box !important;
  resize:        vertical !important;
  outline:       none !important;
}


/* ── 4. Focus ring ───────────────────────────────────────────────────────── */




/* ── 5. Readonly / disabled ──────────────────────────────────────────────── */

input.inputElement[readonly]:not(.autoComplete),
textarea.inputElement[readonly] {
  color:      var(--text) !important;
  background: var(--color-surface-light) !important;
  cursor:     default !important;
}
input.inputElement:disabled,
textarea.inputElement:disabled {
  background: var(--color-surface-light) !important;
  color:      var(--color-text-label) !important;
  opacity:    1 !important;
  cursor:     not-allowed !important;
}


/* ── 6. Checkbox / radio (never restyle) ─────────────────────────────────── */

input[type="checkbox"],
input[type="radio"] {
  height:        15px !important;
  width:         15px !important;
  border:        none !important;
  border-radius: 3px !important;
  accent-color:  var(--accent) !important;
  cursor:        pointer !important;
  padding:       0 !important;
  box-shadow:    none !important;
}


/* ── 7. div wrappers that carry .inputElement ────────────────────────────── */
/* Bootstrap adds border/bg to generic divs — strip it for wrapper divs.    */

div.inputElement,
div.input-group.inputElement {
  border:     none !important;
  padding:    0 !important;
  background: transparent !important;
}


/* ── 8. .input-group layout ──────────────────────────────────────────────── */

.input-group {
  display:     flex !important;
  align-items: stretch !important;
  flex-wrap:   nowrap !important;
  width:       100% !important;
}

/* Input inside group: flat right edge, flush with addon.
   Only applies to non-last inputs so the LAST input in a multi-input group
   (e.g. the end-date field in .input-daterange) keeps its visible right border. */
.input-group:has(.input-group-addon:not(.input-group-addon-save):not(.input-group-addon-cancel)) input:not(.select2-input):not(.select2-focusser):not(.select2-offscreen):not(:last-child) {
  border-right:               none !important;
  border-top-right-radius:    0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius:     6px !important;
  border-bottom-left-radius:  6px !important;
  flex:                       1 1 auto !important;
  min-width:                  0 !important;
  width:                      auto !important;
}
/* Last input in the group (only fires in multi-input groups like .input-daterange —
   in a normal [input][addon] group the addon, not the input, is :last-child).
   Right side gets a visible border + radius; left side is flush to the preceding addon. */
.input-group:has(.input-group-addon:not(.input-group-addon-save):not(.input-group-addon-cancel)) input:not(.select2-input):not(.select2-focusser):not(.select2-offscreen):last-child {
  border-right:               1px solid var(--field-border) !important;
  border-top-right-radius:    6px !important;
  border-bottom-right-radius: 6px !important;
  border-left:                none !important;   /* flush to the "to" addon — no double border */
  border-top-left-radius:     0 !important;      /* square left corner, no rounding */
  border-bottom-left-radius:  0 !important;
  flex:                       1 1 auto !important;
  min-width:                  0 !important;
  width:                      auto !important;
}


/* ── 9. .input-group-addon ───────────────────────────────────────────────── */
/* Excludes inline-edit save/cancel spans which are styled separately (§12) */

.input-group .input-group-addon:not(.inlineAjaxSave):not(.inlineAjaxCancel) {
  display:                    flex !important;
  align-items:                center !important;
  justify-content:            center !important;
  flex-shrink:                0 !important;
  width:                      32px !important;
  min-width:                  32px !important;
  max-width:                  32px !important;
  height:                     32px !important;
  padding:                    0 !important;
  border:                     1px solid var(--field-border) !important;
  border-left:                none !important;
  border-top-left-radius:     0 !important;
  border-bottom-left-radius:  0 !important;
  border-top-right-radius:    6px !important;
  border-bottom-right-radius: 6px !important;
  background:                 var(--color-surface-input) !important;
  color:                      var(--muted) !important;
  cursor:                     pointer !important;
  font-size:                  13px !important;
  box-sizing:                 border-box !important;
  transition:                 background 0.15s, color 0.15s, border-color 0.15s !important;
}
.input-group .input-group-addon:not(.inlineAjaxSave):not(.inlineAjaxCancel):hover {
  background:   var(--accent) !important;
  color:        var(--color-card) !important;
  border-color: var(--accent) !important;
}
/* Middle addon in a multi-addon chain */
.input-group .input-group-addon:not(.inlineAjaxSave):not(.inlineAjaxCancel):not(:last-child) {
  border-top-right-radius:    0 !important;
  border-bottom-right-radius: 0 !important;
}
/* Date-range picker "to" label: no left border so it flows seamlessly from the start input.
   Specificity must beat the general addon rule (0,4,0), so we mirror its :not() guards.    */
.input-group.input-daterange .input-group-addon:not(.inlineAjaxSave):not(.inlineAjaxCancel) {
  border-left: none !important;
}
.input-group.input-daterange .input-group-addon:not(.inlineAjaxSave):not(.inlineAjaxCancel):hover {
  border-left: none !important;
}
/* Create-record addon — green hover */
.input-group .input-group-addon.createReferenceRecord:hover,
.input-group .input-group-addon[title="Create"]:hover {
  background:   var(--ok) !important;
  color:        var(--color-card) !important;
  border-color: var(--ok) !important;
}


/* ── 10. Clear-reference (×) link ────────────────────────────────────────── */

.input-group a.clearReferenceSelection {
  display:         none !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  width:           28px !important;
  min-width:       28px !important;
  height:          32px !important;
  font-size:       14px !important;
  font-weight:     600 !important;
  color:           var(--muted) !important;
  text-decoration: none !important;
  border-left:     1px solid var(--field-border) !important;
  background:      transparent !important;
  transition:      color 0.15s, background 0.15s !important;
  cursor:          pointer !important;
  padding:         0 !important;
  line-height:     1 !important;
}
.input-group a.clearReferenceSelection:not(.hide) { display: flex !important; }
.input-group a.clearReferenceSelection:hover {
  color:      var(--red) !important;
  background: rgba(255, 64, 96, 0.08) !important;
}


/* ── 11. Readonly reference field (value already chosen) ─────────────────── */

.input-group input[readonly].inputElement,
.input-group input[aria-invalid="false"][readonly] {
  color:      var(--text) !important;
  background: var(--color-surface-light) !important;
  cursor:     default !important;
}


/* ── 12. INLINE EDIT — div.input-group.editElement ──────────────────────── */
/* Rendered when the user clicks the pencil icon in detail view.            */
/* DOM: span.edit > div.input-group.editElement                             */
/*        > input.inputElement | select.inputElement | textarea.inputElement */
/*        > div.input-save-wrap > span.inlineAjaxSave + span.inlineAjaxCancel */

div.input-group.editElement {
  display:     flex !important;
  align-items: center !important;
  flex-wrap:   nowrap !important;
  gap:         6px !important;
  width:       100% !important;
  max-width:   100% !important;
  overflow:    visible !important;
  border:      none !important;
  padding:     0 !important;
  background:  transparent !important;
  box-shadow:  none !important;
  box-sizing:  border-box !important;
}
/* Textarea variant: wrap so save buttons appear on their own line */
div.input-group.editElement:has(textarea) {
  flex-wrap:   wrap !important;
  align-items: flex-start !important;
}

/* Text / number / tel / email input */
div.input-group.editElement input.inputElement:not([type="checkbox"]):not(.dateField) {
  flex:          1 1 0% !important;
  min-width:     0 !important;
  width:         0 !important;
  height:        32px !important;
  border-radius: 6px !important;
  padding:       0 10px !important;
  font-size:     var(--field-font-size) !important;
  font-family:   var(--font-family) !important;
  color:         var(--text) !important;
  background:    var(--color-card) !important;
  outline:       none !important;
  box-sizing:    border-box !important;
}

/* Date / datetime — outer wrapper div becomes a flex child */
div.input-group.editElement > div:has(> div.input-group.date),
div.input-group.editElement > div:has(> div.input-group.datetime) {
  display:   flex !important;
  flex:      1 1 0% !important;
  min-width: 0 !important;
}


/* Calendar-icon addon */


/* Select (before Select2 initialises) */
div.input-group.editElement > select.inputElement {
  flex:          1 1 0% !important;
  width:         0 !important;
  min-width:     0 !important;
  height:        32px !important;
  border:        1.5px solid var(--accent) !important;
  border-radius: 6px !important;
  padding:       0 8px !important;
  font-size:     var(--field-font-size) !important;
  font-family:   var(--font-family) !important;
  color:         var(--text) !important;
  background:    var(--color-card) !important;
  box-shadow:    0 0 0 3px rgba(46, 120, 255, 0.08) !important;
  box-sizing:    border-box !important;
  appearance:    auto !important;
}

/* Reference field — outer wrapper div */
div.input-group.editElement > div:has(.autoComplete) {
  flex:      1 1 0% !important;
  min-width: 0 !important;
  width:     0 !important;
  display:   flex !important;
}
/* Reference field — inner styled group */
div.input-group.editElement > div:has(.autoComplete) > div.input-group {
  display:       flex !important;
  flex:          1 1 0% !important;
  min-width:     0 !important;
  width:         100% !important;
  align-items:   center !important;
}



/* Textarea */
div.input-group.editElement textarea.inputElement {
  flex:          0 0 100% !important;
  width:         100% !important;
  min-width:     0 !important;
  min-height:    80px !important;
  border:        1.5px solid var(--accent) !important;
  border-radius: 6px !important;
  padding:       8px 10px !important;
  font-size:     var(--field-font-size) !important;
  font-family:   var(--font-family) !important;
  color:         var(--text) !important;
  background:    var(--color-card) !important;
  box-shadow:    0 0 0 3px rgba(46, 120, 255, 0.08) !important;
  outline:       none !important;
  box-sizing:    border-box !important;
  resize:        vertical !important;
}
div.input-group.editElement:has(textarea) .input-save-wrap {
  flex:       0 0 auto !important;
  margin-top: 6px !important;
}

/* Checkbox */
div.input-group.editElement input[type="checkbox"].inputElement {
  flex:         0 0 auto !important;
  width:        16px !important;
  height:       16px !important;
  margin:       0 4px 0 0 !important;
  border:       none !important;
  accent-color: var(--accent) !important;
  cursor:       pointer !important;
  box-shadow:   none !important;
  align-self:   center !important;
}

/* Hidden inputs take no space */
div.input-group.editElement input[type="hidden"] {
  display: none !important;
  width:   0 !important;
  flex:    none !important;
}

/* Save / cancel button row */
div.input-group.editElement .input-save-wrap {
  display:     flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  gap:         6px !important;
  border:      none !important;
  background:  transparent !important;
  padding:     0 !important;
  width:       auto !important;
  height:      auto !important;
}

/* Save / cancel icon buttons — plain icons, no button chrome */
div.input-group.editElement .inlineAjaxSave,
div.input-group.editElement .inlineAjaxCancel,
div.input-group.editElement .input-save-wrap .input-group-addon {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  width:           auto !important;
  min-width:       0 !important;
  max-width:       none !important;
  height:          auto !important;
  padding:         2px 5px !important;
  border:          none !important;
  border-radius:   0 !important;
  cursor:          pointer !important;
  font-size:       14px !important;
  transition:      color 0.15s ease, opacity 0.15s ease !important;
  line-height:     1 !important;
  background:      transparent !important;
  box-shadow:      none !important;
}
div.input-group.editElement .inlineAjaxSave              { color: var(--ok)  !important; }
div.input-group.editElement .inlineAjaxSave .fa,
div.input-group.editElement .inlineAjaxSave i            { color: inherit !important; font-size: 13px !important; }
div.input-group.editElement .inlineAjaxSave:hover        { color: #1aad68 !important; opacity: 1 !important; }

div.input-group.editElement .inlineAjaxCancel            { color: var(--red) !important; }
div.input-group.editElement .inlineAjaxCancel .fa,
div.input-group.editElement .inlineAjaxCancel i          { color: inherit !important; font-size: 13px !important; }
div.input-group.editElement .inlineAjaxCancel:hover      { color: #e0243e !important; opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   §13 · Tax fields (uitype 83) — label + checkbox + percentage input
   ═══════════════════════════════════════════════════════════════════════════ */

/* Checkbox sits inline with the label text, vertically centred */
.ev-col .fieldLabel input[type="checkbox"].taxes {
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  top: -1px;
}

/* The taxLabel text matches the standard muted label colour */
.ev-col .fieldLabel .taxLabel {
  color: var(--color-text-muted, #6c757d);
  font-size: inherit;
  vertical-align: middle;
}

/* Percentage input inside the fieldValue takes full available width */
.ev-col .fieldValue input.inputElement.show,
.ev-col .fieldValue input.inputElement.hide {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Detail-view: muted em-dash for disabled taxes */
.dv-col .fieldValue .muted {
  color: var(--color-text-muted, #9aa0a6);
  font-style: normal;
}


/* ============================================================
   ===========  INLINED FROM timeline.css  ===================
   (was loaded as a separate <link> from Header.tpl)
   ============================================================ */

/* ============================================================
   timeline.css  -  vtiger CRM Omnir skin
   Unified timeline / activity feed styles:
     - Base:          recentActivitiesContainer + updates_timeline
     - Detail view:   detailUpdatesFeed / detailUpdatesTimeline
     - Quick preview: quickPreviewUpdatesTimeline
     - Dashboard:     historyWidgetTimelineModern + historyWidgetEntry
     - Calendar:      dashboardActivityList
   ============================================================ */

/* ============================================================
   1. BASE: recentActivitiesContainer + updates_timeline
   ============================================================ */

/* Center the timeline in detail view */
.recentActivitiesContainer {
  max-width: 750px !important;
  margin:    0 auto !important;
}

.recentActivitiesContainer,
.quickPreview [id$="recentActivitiesContainer"] {
  padding:    0 !important;
  background: var(--color-card) !important;
}

/* History container */
.history {
  padding: 0 !important;
}

/* -- Timeline list -- */
.updates_timeline {
  list-style: none !important;
  padding:    0 !important;
  margin:     0 !important;
  position:   static !important;
}
/* Kill ALL vtiger timeline pseudo-elements */
.updates_timeline::before,
.updates_timeline::after,
ul.updates_timeline::before,
ul.updates_timeline::after,
.history .updates_timeline::before,
.history .updates_timeline::after,
.updates_timeline > li::before {
  display:    none !important;
  content:    none !important;
}
/* -- after hidden use icon pseudo-elements instead -- */
.updates_timeline > li::after {
  display: none !important;
  content: none !important;
}

/* -- Vertical line segments drawn the icon before above and after below -- */
.updates_timeline > li > .update_icon::before,
.updates_timeline > li .update_icon::before {
  content:    '' !important;
  display:    block !important;
  position:   absolute !important;
  left:       50% !important;
  transform:  translateX(-50%) !important;
  bottom:     100% !important;
  height:     999px !important;
  width:      2px !important;
  background: var(--color-border) !important;
  z-index:    -1 !important;
}
.updates_timeline > li > .update_icon::after,
.updates_timeline > li .update_icon::after {
  content:    '' !important;
  display:    block !important;
  position:   absolute !important;
  left:       50% !important;
  transform:  translateX(-50%) !important;
  top:        100% !important;
  height:     999px !important;
  width:      2px !important;
  background: var(--color-border) !important;
  z-index:    -1 !important;
}

/* -- First entry line above -- */
.updates_timeline > li:first-child > .update_icon::before,
.updates_timeline > li:first-child .update_icon::before {
  display: none !important;
}
/* -- Last entry line below keep line above -- */
.updates_timeline > li:last-child > .update_icon::after,
.updates_timeline > li:last-child .update_icon::after {
  display: none !important;
}
/* -- Single entry lines all -- */
.updates_timeline > li:only-child > .update_icon::before,
.updates_timeline > li:only-child > .update_icon::after,
.updates_timeline > li:only-child .update_icon::before,
.updates_timeline > li:only-child .update_icon::after {
  display: none !important;
}
/* -- More button lines -- */
.updates_timeline > li#more_button > .update_icon::before,
.updates_timeline > li#more_button > .update_icon::after,
.updates_timeline > li#more_button .update_icon::before,
.updates_timeline > li#more_button .update_icon::after {
  display: none !important;
}
/* -- Entry just before more button line below only when more_button exists -- */
.updates_timeline > li:nth-last-child(2):has(+ #more_button) > .update_icon::after {
  display: none !important;
}

/* -- Each timeline row also covers History widget row entry clearfix rows -- */
.updates_timeline > li,
.dashBoardContainer .dashboardWidgetContent .row.entry.clearfix {
  display:       flex !important;
  align-items:   flex-start !important;
  gap:           14px !important;
  padding:       14px 0 !important;
  border-bottom: none !important;
  margin:        0 !important;
  position:      relative !important;
  float:         none !important;
  width:         auto !important;
  overflow:      hidden !important;
}
.updates_timeline > li:last-child,
.dashBoardContainer .dashboardWidgetContent .row:last-child {
  border-bottom: none !important;
}

/* Time */
.updates_timeline > li > time,
.updates_timeline > li > .update_time {
  flex:        0 0 75px !important;
  width:       75px !important;
  font-size:   var(--font-size-sm) !important;
  color:       var(--color-text-muted) !important;
  text-align:  right !important;
  line-height: 1.3 !important;
  display:     block !important;
  padding:     8px 0 0 0 !important;
  margin:      0 !important;
  float:       none !important;
  position:    static !important;
  order:       0 !important;
}
.updates_timeline > li > time small {
  font-size: inherit !important;
  color:     inherit !important;
}

/* -- Widget icon pills Vtiger puts class entryIcon every icon inside widgets use that single class the anchor for all icon styling assumptions about parent class names nesting depth -- */

/* -- 1. Row -- */
.dashBoardContainer .dashboardWidgetContent div:has(> span:has(> .entryIcon)) {
  display:       flex !important;
  align-items:   center !important;
  gap:           12px !important;
  padding:       8px 0 !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  margin:        0 !important;
  float:         none !important;
  width:         auto !important;
  overflow:      visible !important;
}
.dashBoardContainer .dashboardWidgetContent div:has(> span:has(> .entryIcon)):last-child {
  border-bottom: none !important;
}

/* 2. Kill vtiger's .entryIcon offset/size overrides */
.dashBoardContainer .entryIcon {
  position:    static !important;
  top:         auto !important;
  left:        auto !important;
  right:       auto !important;
  bottom:      auto !important;
  padding:     0 !important;
  margin:      0 !important;
  font-size:   15px !important;
  line-height: 1 !important;
  width:       auto !important;
  height:      auto !important;
  color:       inherit !important;
  background:  transparent !important;
}

/* -- 3. Span wrapping -- */
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon) {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex:            0 0 34px !important;
  width:           34px !important;
  height:          34px !important;
  min-width:       34px !important;
  border-radius:   9px !important;
  background:      var(--color-primary-tint) !important;
  color:           var(--color-primary) !important;
  margin:          0 !important;
  padding:         0 !important;
  float:           none !important;
  position:        static !important;
  line-height:     1 !important;
  transition:      background 0.18s, color 0.18s !important;
}

/* -- 4. Content -- */
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon) ~ div {
  flex:        1 1 auto !important;
  min-width:   0 !important;
  font-size:   var(--font-size-sm) !important;
  font-family: var(--font-family) !important;
  color:       var(--color-text) !important;
  line-height: var(--line-height-base) !important;
  padding:     0 !important;
  margin:      0 !important;
  float:       none !important;
  position:    static !important;
}

/* -- 5. Timestamp -- */
.dashBoardContainer .dashboardWidgetContent div:has(> span:has(> .entryIcon)) > .pull-right,
.dashBoardContainer .dashboardWidgetContent div:has(> span:has(> .entryIcon)) > p {
  float:       none !important;
  flex:        0 0 auto !important;
  font-size:   var(--font-size-sm) !important;
  color:       var(--color-text-muted) !important;
  white-space: nowrap !important;
  padding:     0 !important;
  margin:      0 0 0 auto !important;
  align-self:  center !important;
}

/* -- 6. Row hover -- */
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon) {
  background: var(--color-primary) !important;
  color:      #ffffff !important;
}

/* 7. Per-icon colour variants */

/* -- Comment chat teal -- */
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon[class*="vicon-comment"]),
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon[class*="vicon-chat"]) {
  background: rgba(34, 200, 122, 0.12) !important;
  color:      #16a37a !important;
}
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon[class*="vicon-comment"]),
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon[class*="vicon-chat"]) {
  background: #16a37a !important;
  color:      #ffffff !important;
}

/* -- Document file amber -- */
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon[class*="vicon-document"]),
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon.fa-file),
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon.fa-paperclip) {
  background: rgba(240, 180, 41, 0.13) !important;
  color:      #b07d00 !important;
}
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon[class*="vicon-document"]),
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon.fa-file),
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon.fa-paperclip) {
  background: #b07d00 !important;
  color:      #ffffff !important;
}

/* -- Contact person violet -- */
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon[class*="vicon-contact"]),
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon[class*="vicon-user"]),
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon[class*="vicon-account"]),
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon.fa-user) {
  background: rgba(139, 92, 246, 0.12) !important;
  color:      #6d28d9 !important;
}
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon[class*="vicon-contact"]),
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon[class*="vicon-user"]),
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon[class*="vicon-account"]),
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon.fa-user) {
  background: #6d28d9 !important;
  color:      #ffffff !important;
}

/* -- Calendar task event orange -- */
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon[class*="vicon-calendar"]),
.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon[class*="vicon-task"]) {
  background: rgba(255, 170, 48, 0.12) !important;
  color:      #c47700 !important;
}
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon[class*="vicon-calendar"]),
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon[class*="vicon-task"]) {
  background: #c47700 !important;
  color:      #ffffff !important;
}

.updates_timeline .update_info h5 {
  margin:      0 0 2px !important;
  font-size:   12.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align:  left !important;
}
.updates_timeline .update_info h5 .field-name {
  font-weight: 600 !important;
}
.updates_timeline .update_info .updateInfoContainer {
  font-size:   11.5px !important;
  color:       var(--color-text-muted) !important;
  line-height: 1.5 !important;
  margin-top:  2px !important;
  text-align:  left !important;
}
.updates_timeline .update_info .updateInfoContainer em {
  font-style:  normal !important;
  color:       var(--color-primary) !important;
  font-weight: 500 !important;
}
.updates_timeline .update_info .updateInfoContainer .field-name {
  font-weight: 500 !important;
  color:       var(--color-text) !important;
}

/* Icon internals */
.updates_timeline .update_icon .update_image,
.updates_timeline .update_icon i,
.updates_timeline .update_icon [class*="vicon"] {
  font-size:     14px !important;
  color:         var(--color-primary) !important;
  line-height:   1 !important;
  width:         auto !important;
  height:        auto !important;
  min-width:     auto !important;
  background:    transparent !important;
  border-radius: 0 !important;
  display:       inline !important;
  position:      static !important;
}
.updates_timeline .update_icon .update_image span,
.updates_timeline .update_icon .update_image svg,
.updates_timeline .update_icon .update_image img {
  width:   16px !important;
  height:  16px !important;
  display: block !important;
  filter:  none !important;
}

/* Icon colour variants */
.updates_timeline .update_icon.bg-info-modcomments {
  background: rgba(46, 120, 255, 0.10) !important;
}
.updates_timeline .update_icon.bg-info-modcomments i { color: var(--color-primary) !important; }
.updates_timeline .update_icon[class*="bg-info-calendar"],
.updates_timeline .update_icon[class*="bg-info-events"] {
  background: rgba(34, 200, 122, 0.10) !important;
}
.updates_timeline .update_icon[class*="bg-info-calendar"] i,
.updates_timeline .update_icon[class*="bg-info-events"] i { color: var(--color-success) !important; }
.updates_timeline .update_icon.bg-info {
  background: rgba(122, 142, 163, 0.12) !important;
}
.updates_timeline .update_icon.bg-info i { color: var(--color-text-muted) !important; }

/* Links */
.updates_timeline .update_info a {
  color:           var(--color-primary) !important;
  text-decoration: none !important;
  font-weight:     500 !important;
}
.updates_timeline .update_info a:hover { text-decoration: underline !important; }
.updates_timeline .update_info strong,
.updates_timeline .update_info b {
  font-weight: 600 !important;
  color:       var(--color-text) !important;
}
.updates_timeline .update_info .muted,
.updates_timeline .update_info small,
.updates_timeline .update_info .font-x-small {
  font-size: 11px !important;
  color:     var(--color-text-muted) !important;
}

/* More button */
.updates_timeline > li#more_button {
  justify-content: center !important;
  padding:         12px 20px !important;
}
.updates_timeline > li#more_button > .update_icon {
  width:      auto !important;
  height:     auto !important;
  min-width:  0 !important;
  flex:       0 0 auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow:   visible !important;
}
.updates_timeline #more_button button,
.updates_timeline #more_button a {
  font-size:     12px !important;
  font-weight:   500 !important;
  font-family:   var(--font-family) !important;
  color:         var(--color-primary) !important;
  background:    var(--color-card) !important;
  border:        1px solid var(--color-border) !important;
  border-radius: 7px !important;
  padding:       6px 20px !important;
  cursor:        pointer !important;
  display:       inline-flex !important;
  align-items:   center !important;
  box-shadow:    var(--btn-shadow) !important;
}
.updates_timeline #more_button button:hover,
.updates_timeline #more_button a:hover {
  background:   var(--color-row-hover) !important;
  border-color: var(--color-primary) !important;
}

/* -- Fallback media objects used some timeline variants -- */
.quickPreview .modal-body .media {
  display:       flex !important;
  align-items:   flex-start !important;
  gap:           14px !important;
  padding:       14px 20px !important;
  border-bottom: 1px solid var(--color-border) !important;
  margin:        0 !important;
}
.quickPreview .modal-body .media:last-child {
  border-bottom: none !important;
}
.quickPreview .modal-body .media .media-left,
.quickPreview .modal-body .media > .pull-left {
  float:      none !important;
  flex-shrink: 0 !important;
  padding:    0 !important;
}
.quickPreview .modal-body .media .media-left img,
.quickPreview .modal-body .media > .pull-left img {
  width:         36px !important;
  height:        36px !important;
  border-radius: 8px !important;
  object-fit:    contain !important;
  padding:       6px !important;
  background:    var(--color-primary-tint) !important;
}
.quickPreview .modal-body .media .media-body {
  flex:        1 1 auto !important;
  min-width:   0 !important;
  font-size:   12.5px !important;
  font-family: var(--font-family) !important;
  color:       var(--color-text) !important;
  line-height: 1.5 !important;
}

/* ============================================================
   2. DETAIL VIEW: detailUpdatesFeed / detailUpdatesTimeline
   ============================================================ */

/* ============================================================
   Moved from style.css: Detail view updates timeline (detailUpdatesFeed)
   ============================================================ */
/* Detail view updates timeline */
.detailUpdatesFeed {
  max-width: 980px !important;
  margin: 0 auto !important;
  background: transparent !important;
}

.detailUpdatesFeed .detailUpdatesFeed {
  max-width: none !important;
  margin: 0 !important;
}

.detailUpdatesBody {
  padding: 4px 0 14px !important;
}

.detailUpdatesTimeline {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.detailUpdatesDayMarker {
  position: relative !important;
  margin: 0 !important;
  padding: 18px 0 10px 166px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6f8398 !important;
}

.detailUpdatesDayMarker::before {
  content: "" !important;
  position: absolute !important;
  left: 120px !important;
  top: 20px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #2ac07b !important;
  box-shadow: 0 0 0 4px #ffffff !important;
  z-index: 2 !important;
}

.detailUpdatesDayMarker::after {
  content: "" !important;
  position: absolute !important;
  left: 125px !important;
  top: 30px !important;
  bottom: -4px !important;
  width: 2px !important;
  background: linear-gradient(180deg, rgba(42, 192, 123, 0.22) 0%, rgba(36, 93, 154, 0.08) 100%) !important;
}

.detailUpdatesItem {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 92px 48px minmax(0, 1fr) !important;
  column-gap: 16px !important;
  padding: 12px 0 16px !important;
  margin: 0 !important;
  background: transparent !important;
}

.detailUpdatesItem::before {
  content: "" !important;
  position: absolute !important;
  left: 125px !important;
  top: -4px !important;
  bottom: -4px !important;
  width: 2px !important;
  background: rgba(36, 93, 154, 0.12) !important;
}

.detailUpdatesDayMarker + .detailUpdatesItem::before {
  top: -8px !important;
}

.detailUpdatesIconRail {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: center !important;
}

.detailUpdatesIcon {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #eef5ff 0%, #dce9ff 100%) !important;
  box-shadow: 0 10px 18px rgba(46, 120, 255, 0.08) !important;
  overflow: hidden !important;
}

.detailUpdatesIcon--photo {
  background: #e9eff7 !important;
}

.detailUpdatesIcon .update_image,
.detailUpdatesIcon i,
.detailUpdatesIcon [class*="vicon"],
.detailUpdatesIcon span {
  font-size: 16px !important;
  line-height: 1 !important;
  color: #2e78ff !important;
}

.detailUpdatesIcon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.detailUpdatesIcon.bg-info-calendar,
.detailUpdatesIcon.bg-info-events {
  background: linear-gradient(180deg, #effff7 0%, #dbf9ea 100%) !important;
}

.detailUpdatesIcon.bg-info-calendar i,
.detailUpdatesIcon.bg-info-events i,
.detailUpdatesIcon.bg-info-calendar span,
.detailUpdatesIcon.bg-info-events span {
  color: #1ca96f !important;
}

.detailUpdatesContent {
  min-width: 0 !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.detailUpdatesItem:last-of-type .detailUpdatesContent {
  border-bottom-color: transparent !important;
}

.detailUpdatesTitleRow {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.detailUpdatesTitle {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #203447 !important;
  font-weight: 600 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.detailUpdatesRelativeTime {
  flex: 0 0 auto !important;
  font-size: 11px !important;
  color: #7c90a6 !important;
  white-space: nowrap !important;
}

.detailUpdatesTime {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  padding-top: 2px !important;
  color: #7c90a6 !important;
  text-align: right !important;
}

.detailUpdatesTimeValue {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #526b84 !important;
  line-height: 1.2 !important;
}

.detailUpdatesTimeMeta {
  font-size: 10.5px !important;
  line-height: 1.3 !important;
}

.detailUpdatesMeta {
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.detailUpdatesMeta--single {
  gap: 0 !important;
}

.detailUpdatesMetaLine,
.detailUpdatesMeta--single {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #66788e !important;
}

.detailUpdatesMetaLine .field-name,
.detailUpdatesTitle .field-name {
  color: #203447 !important;
  font-weight: 700 !important;
}

.detailUpdatesMetaLine em,
.detailUpdatesMeta--single em {
  font-style: normal !important;
  color: #245d9a !important;
  font-weight: 500 !important;
}

.detailUpdatesMeta a,
.detailUpdatesTitle a {
  color: #245d9a !important;
  text-decoration: none !important;
}

.detailUpdatesMeta a:hover,
.detailUpdatesTitle a:hover {
  text-decoration: underline !important;
}

.detailUpdatesMore {
  padding: 10px 0 0 164px !important;
}

.detailUpdatesMore .btn {
  background: linear-gradient(180deg, #f6faff 0%, #ffffff 100%) !important;
  border: 1px solid #cfdeec !important;
  border-radius: 10px !important;
  color: #245d9a !important;
  padding: 7px 14px !important;
}

/* ============================================================
   3. QUICK PREVIEW: quickPreviewUpdatesTimeline (QuickPreviewRecentActivities.tpl)
   ============================================================ */

.quickPreview .recentActivitiesContainer,
.quickPreview [id$="recentActivitiesContainer"] {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  background: #ffffff !important;
}

.quickPreview .quickPreviewTimelineFeed,
.quickPreview [id$="recentActivitiesContainer"] {
  padding: 0 !important;
}

/* Quick preview updates timeline */
.quickPreview .quickPreviewTimelineFeed {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
}

.quickPreview .quickPreviewTimelineBody {
  padding: 6px 16px 10px !important;
}

.quickPreview .quickPreviewUpdatesTimeline {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.quickPreview .quickPreviewUpdatesDayMarker {
  position: relative !important;
  margin: 0 !important;
  padding: 12px 0 8px 36px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #74879b !important;
}

.quickPreview .quickPreviewUpdatesDayMarker::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 14px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #29c07a !important;
  box-shadow: 0 0 0 4px #ffffff !important;
  z-index: 2 !important;
}

.quickPreview .quickPreviewUpdatesDayMarker::after {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 24px !important;
  bottom: -4px !important;
  width: 2px !important;
  background: linear-gradient(180deg, rgba(41, 192, 122, 0.18) 0%, rgba(36, 93, 154, 0.1) 100%) !important;
}

.quickPreview .quickPreviewUpdatesItem {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  padding: 8px 0 12px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

.quickPreview .quickPreviewUpdatesItem::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: -4px !important;
  bottom: -4px !important;
  width: 2px !important;
  background: rgba(36, 93, 154, 0.12) !important;
}

.quickPreview .quickPreviewUpdatesDayMarker + .quickPreviewUpdatesItem::before {
  top: -10px !important;
}

.quickPreview .quickPreviewUpdatesItem:last-of-type::before {
  bottom: 16px !important;
}

.quickPreview .quickPreviewUpdatesIconWrap {
  position: relative !important;
  z-index: 2 !important;
}

.quickPreview .quickPreviewUpdatesIcon {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%) !important;
  box-shadow: 0 8px 14px rgba(46, 120, 255, 0.08) !important;
  overflow: hidden !important;
}

.quickPreview .quickPreviewUpdatesIcon .update_image,
.quickPreview .quickPreviewUpdatesIcon i,
.quickPreview .quickPreviewUpdatesIcon [class*="vicon"],
.quickPreview .quickPreviewUpdatesIcon span {
  font-size: 13px !important;
  line-height: 1 !important;
  color: #2e78ff !important;
}

.quickPreview .quickPreviewUpdatesIcon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.quickPreview .quickPreviewUpdatesIcon--photo {
  background: #e9eff7 !important;
}

.quickPreview .quickPreviewUpdatesIcon.bg-info-modcomments {
  background: linear-gradient(180deg, #eef4ff 0%, #dfeaff 100%) !important;
}

.quickPreview .quickPreviewUpdatesIcon.bg-info-calendar,
.quickPreview .quickPreviewUpdatesIcon.bg-info-events {
  background: linear-gradient(180deg, #edfff7 0%, #dbf9eb 100%) !important;
}

.quickPreview .quickPreviewUpdatesIcon.bg-info-calendar i,
.quickPreview .quickPreviewUpdatesIcon.bg-info-events i,
.quickPreview .quickPreviewUpdatesIcon.bg-info-calendar span,
.quickPreview .quickPreviewUpdatesIcon.bg-info-events span {
  color: #1fab6f !important;
}

.quickPreview .quickPreviewUpdatesContent {
  min-width: 0 !important;
  padding: 0 0 0 0 !important;
}

.quickPreview .quickPreviewUpdatesHeaderRow {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.quickPreview .quickPreviewUpdatesTitle {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.42 !important;
  font-weight: 600 !important;
  color: #203447 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.quickPreview .quickPreviewUpdatesTime {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  color: #8a9bad !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.quickPreview .quickPreviewUpdatesTime small {
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
}

.quickPreview .quickPreviewUpdatesMeta {
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.quickPreview .quickPreviewUpdatesMeta--single {
  gap: 0 !important;
}

.quickPreview .quickPreviewUpdatesMetaLine,
.quickPreview .quickPreviewUpdatesMeta--single {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #66788e !important;
}

.quickPreview .quickPreviewUpdatesMetaLine .field-name {
  color: #203447 !important;
  font-weight: 600 !important;
}

.quickPreview .quickPreviewUpdatesMetaLine em,
.quickPreview .quickPreviewUpdatesMeta--single em {
  font-style: normal !important;
  color: #245d9a !important;
  font-weight: 500 !important;
}

.quickPreview .quickPreviewUpdatesMeta a,
.quickPreview .quickPreviewUpdatesMeta strong {
  color: #245d9a !important;
}

.quickPreview .quickPreviewUpdatesMore {
  padding: 8px 0 0 40px !important;
}

.quickPreview .quickPreviewUpdatesMore .btn {
  background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%) !important;
  border: 1px solid #cfdeec !important;
  color: #245d9a !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
}

/* ============================================================
   4. DASHBOARD: historyWidgetTimeline + historyWidgetTimelineModern
      CALENDAR:  dashboardActivityList / calendarActivitiesWidgetContent
   ============================================================ */

/* Unified history/activity icons to match quick create icon pills */
.dashBoardContainer .dashboardWidgetContent,
.HistoryContainer,
.history {
  --history-quick-icon-size: 30px;
  --history-quick-icon-radius: 8px;
  --history-quick-icon-bg: var(--color-primary-tint);
  --history-quick-icon-fg: var(--color-primary);
}

:is(
  .dashBoardContainer .dashboardWidgetContent .row.entry.clearfix > [class*="col-"]:first-child > span,
  .dashBoardContainer .dashboardWidgetContent .row.entry.clearfix > .pull-left:first-child > span,
  .HistoryContainer .updates_timeline > li:not(#more_button) > .update_icon,
  .history .updates_timeline > li:not(#more_button) > .update_icon,
  .updates_timeline > li:not(#more_button) > .update_icon
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--history-quick-icon-size, 30px) !important;
  height: var(--history-quick-icon-size, 30px) !important;
  min-width: var(--history-quick-icon-size, 30px) !important;
  max-width: var(--history-quick-icon-size, 30px) !important;
  border-radius: var(--history-quick-icon-radius, 8px) !important;
  background: var(--history-quick-icon-bg, var(--color-primary-tint)) !important;
  color: var(--history-quick-icon-fg, var(--color-primary)) !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
  line-height: 1 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

:is(
  .dashBoardContainer .dashboardWidgetContent .row.entry.clearfix > [class*="col-"]:first-child > span,
  .dashBoardContainer .dashboardWidgetContent .row.entry.clearfix > .pull-left:first-child > span,
  .HistoryContainer .updates_timeline > li:not(#more_button) > .update_icon,
  .history .updates_timeline > li:not(#more_button) > .update_icon,
  .updates_timeline > li:not(#more_button) > .update_icon
) > :is(i, svg, img, .custom-module, [class*="vicon-"], .entryIcon) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: currentColor !important;
  fill: currentColor !important;
  font-size: 13px !important;
  line-height: 1 !important;
  object-fit: contain !important;
}

:is(
  .dashBoardContainer .dashboardWidgetContent .row.entry.clearfix > [class*="col-"]:first-child > span,
  .dashBoardContainer .dashboardWidgetContent .row.entry.clearfix > .pull-left:first-child > span,
  .HistoryContainer .updates_timeline > li:not(#more_button) > .update_icon,
  .history .updates_timeline > li:not(#more_button) > .update_icon,
  .updates_timeline > li:not(#more_button) > .update_icon
) > .custom-module {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

:is(
  .dashBoardContainer .dashboardWidgetContent .row.entry.clearfix:hover > [class*="col-"]:first-child > span,
  .dashBoardContainer .dashboardWidgetContent .row.entry.clearfix:hover > .pull-left:first-child > span,
  .HistoryContainer .updates_timeline > li:not(#more_button):hover > .update_icon,
  .history .updates_timeline > li:not(#more_button):hover > .update_icon,
  .updates_timeline > li:not(#more_button):hover > .update_icon
) {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

/* Unified professional activity timeline layout for dashboard, detail view, and quick preview */
:is(
  .historyWidgetContent,
  .recentActivitiesContainer .history,
  .quickPreview .history,
  .HistoryContainer,
  .history
) {
  --activity-line-color: rgba(36, 93, 154, 0.12);
  --activity-icon-column: 38px;
  --activity-time-column: 72px;
  --activity-row-gap: 12px;
  --activity-row-padding: 10px;
}

.historyWidgetContent {
  padding-top: 6px !important;
}

.historyWidgetTimeline {
  padding: 2px 0 0 !important;
}

:is(
  .historyWidgetTimeline > .row.entry.clearfix,
  .recentActivitiesContainer .updates_timeline > li:not(#more_button),
  .quickPreview .updates_timeline > li:not(#more_button),
  .history .updates_timeline > li:not(#more_button)
) {
  display: grid !important;
  grid-template-columns: var(--activity-icon-column) minmax(0, 1fr) var(--activity-time-column) !important;
  column-gap: var(--activity-row-gap) !important;
  align-items: start !important;
  padding: var(--activity-row-padding) 0 !important;
  margin: 0 !important;
  width: auto !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(36, 93, 154, 0.08) !important;
  position: relative !important;
}

:is(
  .historyWidgetTimeline > .row.entry.clearfix:last-of-type,
  .recentActivitiesContainer .updates_timeline > li:not(#more_button):last-child,
  .quickPreview .updates_timeline > li:not(#more_button):last-child,
  .history .updates_timeline > li:not(#more_button):last-child
) {
  border-bottom-color: transparent !important;
}

:is(
  .historyWidgetTimeline > .row.entry.clearfix,
  .recentActivitiesContainer .updates_timeline > li:not(#more_button),
  .quickPreview .updates_timeline > li:not(#more_button),
  .history .updates_timeline > li:not(#more_button)
)::before {
  content: "" !important;
  position: absolute !important;
  left: calc((var(--activity-icon-column) / 2) - 1px) !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(180deg, transparent 0, var(--activity-line-color) 16px, var(--activity-line-color) calc(100% - 16px), transparent 100%) !important;
  z-index: 0 !important;
}

:is(
  .historyWidgetTimeline > .row.entry.clearfix:first-of-type,
  .recentActivitiesContainer .updates_timeline > li:not(#more_button):first-child,
  .quickPreview .updates_timeline > li:not(#more_button):first-child,
  .history .updates_timeline > li:not(#more_button):first-child
)::before {
  background: linear-gradient(180deg, transparent 0, transparent 18px, var(--activity-line-color) 18px, var(--activity-line-color) calc(100% - 16px), transparent 100%) !important;
}

:is(
  .historyWidgetTimeline > .row.entry.clearfix:last-of-type,
  .recentActivitiesContainer .updates_timeline > li:not(#more_button):last-child,
  .quickPreview .updates_timeline > li:not(#more_button):last-child,
  .history .updates_timeline > li:not(#more_button):last-child
)::before {
  background: linear-gradient(180deg, transparent 0, var(--activity-line-color) 16px, var(--activity-line-color) 50%, transparent 50%, transparent 100%) !important;
}

:is(
  .historyWidgetTimeline > .row.entry.clearfix:only-child,
  .recentActivitiesContainer .updates_timeline > li:not(#more_button):only-child,
  .quickPreview .updates_timeline > li:not(#more_button):only-child,
  .history .updates_timeline > li:not(#more_button):only-child
)::before {
  display: none !important;
}

.recentActivitiesContainer .updates_timeline > li:not(#more_button) > .update_icon::before,
.recentActivitiesContainer .updates_timeline > li:not(#more_button) > .update_icon::after,
.quickPreview .updates_timeline > li:not(#more_button) > .update_icon::before,
.quickPreview .updates_timeline > li:not(#more_button) > .update_icon::after,
.history .updates_timeline > li:not(#more_button) > .update_icon::before,
.history .updates_timeline > li:not(#more_button) > .update_icon::after {
  display: none !important;
}

.historyWidgetTimeline > .row.entry.clearfix > .historyEntryMedia,
.historyWidgetTimeline > .row.entry.clearfix > [class*="col-"]:first-child,
.historyWidgetTimeline > .row.entry.clearfix > .pull-left:first-child,
.recentActivitiesContainer .updates_timeline > li:not(#more_button) > .update_icon,
.quickPreview .updates_timeline > li:not(#more_button) > .update_icon,
.history .updates_timeline > li:not(#more_button) > .update_icon {
  grid-column: 1 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 1px 0 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.historyWidgetTimeline > .row.entry.clearfix > .historyEntryContent,
.historyWidgetTimeline > .row.entry.clearfix > [class*="col-"]:nth-child(2),
.historyWidgetTimeline > .row.entry.clearfix > .pull-left:nth-child(2),
.recentActivitiesContainer .updates_timeline > li:not(#more_button) > .update_info,
.quickPreview .updates_timeline > li:not(#more_button) > .update_info,
.history .updates_timeline > li:not(#more_button) > .update_info {
  grid-column: 2 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  padding: 1px 0 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.historyWidgetTimeline > .row.entry.clearfix > .historyEntryTime,
.historyWidgetTimeline > .row.entry.clearfix > p.pull-right,
.historyWidgetTimeline > .row.entry.clearfix > p.muted,
.recentActivitiesContainer .updates_timeline > li:not(#more_button) > time,
.recentActivitiesContainer .updates_timeline > li:not(#more_button) > .update_time,
.quickPreview .updates_timeline > li:not(#more_button) > time,
.quickPreview .updates_timeline > li:not(#more_button) > .update_time,
.history .updates_timeline > li:not(#more_button) > time,
.history .updates_timeline > li:not(#more_button) > .update_time {
  grid-column: 3 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  text-align: right !important;
  justify-self: end !important;
  align-self: start !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  color: var(--color-text-muted) !important;
  white-space: normal !important;
  opacity: 0.88 !important;
}

.historyWidgetTimeline > .row.entry.clearfix > .historyEntryTime small,
.recentActivitiesContainer .updates_timeline > li:not(#more_button) > time small,
.recentActivitiesContainer .updates_timeline > li:not(#more_button) > .update_time small,
.quickPreview .updates_timeline > li:not(#more_button) > time small,
.quickPreview .updates_timeline > li:not(#more_button) > .update_time small,
.history .updates_timeline > li:not(#more_button) > time small,
.history .updates_timeline > li:not(#more_button) > .update_time small {
  display: inline-block !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.historyWidgetTimeline .row.entry.clearfix > .historyEntryContent > div:first-child,
.historyWidgetTimeline .row.entry.clearfix > .historyEntryContent > div:first-child > div:first-child,
.recentActivitiesContainer .updates_timeline .update_info > div:first-child,
.recentActivitiesContainer .updates_timeline .update_info > h5:first-child,
.quickPreview .updates_timeline .update_info > div:first-child,
.quickPreview .updates_timeline .update_info > h5:first-child,
.history .updates_timeline .update_info > div:first-child,
.history .updates_timeline .update_info > h5:first-child {
  margin-top: 0 !important;
}

.historyWidgetTimeline .row.entry.clearfix .historyEntryContent,
.historyWidgetTimeline .row.entry.clearfix .historyEntryContent div,
.recentActivitiesContainer .updates_timeline .update_info,
.quickPreview .updates_timeline .update_info,
.history .updates_timeline .update_info {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

.historyWidgetTimeline .row.entry.clearfix .historyEntryContent > div + div,
.recentActivitiesContainer .updates_timeline .update_info > div + div,
.quickPreview .updates_timeline .update_info > div + div,
.history .updates_timeline .update_info > div + div {
  margin-top: 3px !important;
}

.historyWidgetTimeline .row.entry.clearfix .historyEntryContent b,
.historyWidgetTimeline .row.entry.clearfix .historyEntryContent strong,
.recentActivitiesContainer .updates_timeline .update_info .field-name,
.quickPreview .updates_timeline .update_info .field-name,
.history .updates_timeline .update_info .field-name {
  color: var(--color-text) !important;
  font-weight: 600 !important;
}

.historyWidgetTimeline .row.entry.clearfix .historyEntryContent a,
.recentActivitiesContainer .updates_timeline .update_info a,
.quickPreview .updates_timeline .update_info a,
.history .updates_timeline .update_info a {
  color: #245d9a !important;
  text-decoration: none !important;
}

.historyWidgetTimeline .row.entry.clearfix .historyEntryContent a:hover,
.recentActivitiesContainer .updates_timeline .update_info a:hover,
.quickPreview .updates_timeline .update_info a:hover,
.history .updates_timeline .update_info a:hover {
  text-decoration: underline !important;
}

.historyWidgetTimeline .row.entry.clearfix .historyEntryContent i,
.recentActivitiesContainer .updates_timeline .update_info em,
.quickPreview .updates_timeline .update_info em,
.history .updates_timeline .update_info em {
  color: #5f6f86 !important;
}

.historyWidgetTimeline .row.entry.clearfix:hover,
.recentActivitiesContainer .updates_timeline > li:not(#more_button):hover,
.quickPreview .updates_timeline > li:not(#more_button):hover,
.history .updates_timeline > li:not(#more_button):hover {
  background: linear-gradient(90deg, rgba(36, 93, 154, 0.03) 0, rgba(36, 93, 154, 0.01) 55%, transparent 100%) !important;
}

/* Calendar activity widgets: overdue / upcoming */
.calendarActivitiesWidgetContent {
  padding-top: 6px !important;
}

.dashboardActivityList {
  padding: 2px 0 0 !important;
}

.dashboardActivityList > .dashboardActivityRow {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 78px !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(36, 93, 154, 0.08) !important;
  position: relative !important;
  overflow: visible !important;
}

.dashboardActivityList > .dashboardActivityRow:last-of-type {
  border-bottom-color: transparent !important;
}

.dashboardActivityList > .dashboardActivityRow:hover {
  background: linear-gradient(90deg, rgba(36, 93, 154, 0.03) 0, rgba(36, 93, 154, 0.01) 55%, transparent 100%) !important;
}

.dashboardActivityList > .dashboardActivityRow > .dashboardActivityMedia {
  grid-column: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 34px !important;
  position: relative !important;
}

.dashboardActivityList > .dashboardActivityRow > .dashboardActivityMedia > span {
  margin: 0 !important;
}

.dashboardActivityList > .dashboardActivityRow > .dashboardActivityBody {
  grid-column: 2 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 !important;
}

.dashboardActivityList > .dashboardActivityRow > .dashboardActivityTime {
  grid-column: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  justify-self: end !important;
  align-self: center !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: var(--color-text-muted) !important;
  white-space: nowrap !important;
  opacity: 0.88 !important;
}

.dashboardActivityList > .dashboardActivityRow > .dashboardActivityTime small {
  display: inline-block !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.dashboardActivitySummary {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 34px !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  color: var(--color-text) !important;
}

.dashboardActivitySummary a {
  color: #245d9a !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.dashboardActivitySummary a:hover {
  text-decoration: underline !important;
}

.dashboardActivityEmpty {
  padding: 6px 0 0 !important;
}

.dashboardActivityMore {
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 10px !important;
}

.dashboardActivityMore a {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #245d9a !important;
  text-decoration: none !important;
}

.dashboardActivityMore a:hover {
  text-decoration: underline !important;
}

.dashBoardContainer .dashboardWidgetContent span:has(> .entryIcon[class*="vicon-meeting"]) {
  background: rgba(46, 120, 255, 0.12) !important;
  color: #2e78ff !important;
}

.dashboardActivityList > .dashboardActivityRow:hover .dashboardActivityMedia > span:has(> .entryIcon[class*="vicon-meeting"]),
.dashBoardContainer .dashboardWidgetContent div:hover > span:has(> .entryIcon[class*="vicon-meeting"]) {
  background: #2e78ff !important;
  color: #ffffff !important;
}

/* moved to detail-view.css: Quick preview panel and helpPageOverlay.in */

/* moved to detail-view.css: Detail view updates timeline (detailUpdatesFeed) */

/* Dashboard history widget */
.historyWidgetContent {
  padding: 6px 0 0 !important;
}

.historyWidgetTimelineModern {
  padding: 4px 14px 10px !important;
}

.historyWidgetDayMarker {
  position: relative !important;
  margin: 0 !important;
  padding: 10px 0 6px 34px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #74879b !important;
}

.historyWidgetDayMarker::before {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 12px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #2ac07b !important;
  box-shadow: 0 0 0 4px #ffffff !important;
  z-index: 2 !important;
}

.historyWidgetDayMarker::after {
  content: "" !important;
  position: absolute !important;
  left: 13px !important;
  top: 22px !important;
  bottom: -2px !important;
  width: 2px !important;
  background: linear-gradient(180deg, rgba(42, 192, 123, 0.2) 0%, rgba(36, 93, 154, 0.08) 100%) !important;
}

.historyWidgetEntry {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  padding: 8px 0 12px !important;
  margin: 0 !important;
}

.historyWidgetEntry::before {
  content: "" !important;
  position: absolute !important;
  left: 13px !important;
  top: -4px !important;
  bottom: -4px !important;
  width: 2px !important;
  background: rgba(36, 93, 154, 0.11) !important;
}

.historyWidgetDayMarker + .historyWidgetEntry::before {
  top: -8px !important;
}

.historyWidgetEntryIconWrap {
  position: relative !important;
  z-index: 2 !important;
}

.historyWidgetEntryIcon {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #eef5ff 0%, #dce9ff 100%) !important;
  box-shadow: 0 8px 14px rgba(46, 120, 255, 0.08) !important;
}

.historyWidgetEntryIcon i,
.historyWidgetEntryIcon [class*="vicon"],
.historyWidgetEntryIcon span {
  font-size: 13px !important;
  line-height: 1 !important;
  color: #2e78ff !important;
}

.historyWidgetEntryMain {
  min-width: 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.historyWidgetEntry:last-of-type .historyWidgetEntryMain {
  border-bottom-color: transparent !important;
}

.historyWidgetEntryTop {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.historyWidgetEntryTitle {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: #203447 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.historyWidgetEntryTitle .field-name {
  font-weight: 700 !important;
}

.historyWidgetEntryTime {
  flex: 0 0 auto !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  color: #8598ad !important;
  white-space: nowrap !important;
}

.historyWidgetEntryMeta {
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.historyWidgetEntryMetaLine {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: #67798e !important;
}

.historyWidgetEntryMetaLine .field-name {
  color: #203447 !important;
  font-weight: 600 !important;
}

.historyWidgetEntryMetaLine em {
  font-style: normal !important;
  color: #47586d !important;
}

.historyWidgetEntryTitle a,
.historyWidgetEntryMetaLine a {
  color: #245d9a !important;
  text-decoration: none !important;
}

.historyWidgetEntryTitle a:hover,
.historyWidgetEntryMetaLine a:hover {
  text-decoration: underline !important;
}

.historyWidgetMoreRow {
  padding: 8px 0 0 42px !important;
}

.historyWidgetMoreRow .load-more {
  color: #245d9a !important;
  font-weight: 600 !important;
}


/* ============================================================
   ===========  INLINED FROM view.css  =======================
   (formerly detail-view.css + edit-view.css — see section
   markers below for the boundary between them.)
   @charset stripped — only the file-leading @charset is honoured.
   ============================================================ */


/* ============================================================
   VTIGER CRM - VIEW STYLES (merged)
   Combines detail-view.css + edit-view.css into a single file.
   Cascade order preserved: detail-view first, then edit-view
   (matches the chain documented in fields.css:9 →
    style.css → fields.css → detail-view → edit-view).
   No duplicate selectors found between the two files —
   they target distinct namespaces (.detailViewContainer vs
   .editViewContents), so this is purely a concatenation.
   ============================================================ */

/* ============================================================
   ===========  SECTION 1: DETAIL VIEW  =======================
   (formerly detail-view.css)
   ============================================================ */

.detailViewContainer.viewContent > .content-area,
.detailViewContainer.viewContent > .detailview-content-shell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.detailViewContainer.viewContent .detailview-header-shell {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  padding: 28px 30px 24px !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06) !important;
  margin-bottom: 18px !important;
}

.detailViewContainer.viewContent .detailview-header {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.detailViewContainer.viewContent .detailview-header-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

.detailViewContainer.viewContent .detailViewIdentityColumn,
.detailViewContainer.viewContent .detailViewButtoncontainer {
  margin-bottom: 0 !important;
}

.detailViewContainer.viewContent .detailRecordHeader {
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  min-width: 0 !important;
}

.detailViewContainer.viewContent .detailRecordImage {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 18px 35px rgba(var(--theme-primary-rgb), 0.18) !important;
}

.detailViewContainer.viewContent .detailRecordImage img,
.detailViewContainer.viewContent .detailRecordImage .summaryImg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.detailViewContainer.viewContent .detailRecordImage .name {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  color: #ffffff !important;
}

.detailViewContainer.viewContent .detailRecordBasicInfo {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding-top: 2px !important;
}

.detailViewContainer.viewContent .detailRecordTitleRow,
.detailViewContainer.viewContent .detailRecordTitleRow h4 {
  margin: 0 !important;
}

.detailViewContainer.viewContent .detailRecordTitleRow h4 {
  font-size: 31px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #1f3347 !important;
}

.detailViewContainer.viewContent .detailRecordTitleRow .salutation {
  color: #7b90a5 !important;
  font-weight: 600 !important;
}

.detailViewContainer.viewContent .detailRecordMeta {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.detailViewContainer.viewContent .detailRecordFieldRow {
  margin: 0 !important;
}

.detailViewContainer.viewContent .detailRecordFieldValue {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.detailViewContainer.viewContent .detailRecordFieldValue > .value,
.detailViewContainer.viewContent .detailRecordFieldValue > .value a {
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: #51687f !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.detailViewContainer.viewContent .detailRecordFieldValue > .value a {
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailRecordFieldValue .action {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-left: 4px !important;
}

.detailViewContainer.viewContent .detailRecordMapRow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
  color: #7188a0 !important;
}

.detailViewContainer.viewContent .detailRecordMapRow .fa {
  color: var(--color-primary) !important;
}

.detailViewContainer.viewContent .detailRecordMapRow a {
  color: var(--color-primary-dark) !important;
  font-weight: 600 !important;
}

.detailViewContainer.viewContent .detailViewButtoncontainer {
  display: flex !important;
  justify-content: flex-end !important;
}

.detailViewContainer.viewContent .detailViewActionsToolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

.detailViewContainer.viewContent .detailViewPrimaryActions,
.detailViewContainer.viewContent .detailViewPager {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.detailViewContainer.viewContent .detailViewPrimaryActions > .btn,
.detailViewContainer.viewContent .detailViewPager > .btn {
  margin-left: 0 !important;
}

.detailViewContainer.viewContent .detailViewActionButton {
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: var(--view-card-radius-md) !important;
  border: 1px solid var(--btn-border) !important;
  background: var(--btn-bg) !important;
  color: var(--btn-color) !important;
  font-weight: 600 !important;
  box-shadow: var(--btn-shadow) !important;
}

.detailViewContainer.viewContent .detailViewActionButton:hover,
.detailViewContainer.viewContent .detailViewActionButton:focus {
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-border) !important;
  color: var(--btn-hover-color) !important;
  box-shadow: var(--btn-hover-shadow) !important;
}

.detailViewContainer.viewContent .detailViewFollowButton {
  min-width: 126px !important;
  border-color: rgba(var(--theme-primary-rgb), 0.18) !important;
  background: rgba(var(--theme-primary-rgb), 0.08) !important;
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailViewFollowButton .starredStatus,
.detailViewContainer.viewContent .detailViewFollowButton .unstarredStatus {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailViewFollowButton.active .starredStatus {
  display: flex !important;
}

.detailViewContainer.viewContent .detailViewFollowButton:not(.active) .unstarredStatus {
  display: flex !important;
}

.detailViewContainer.viewContent .detailViewFollowButton .fa-star,
.detailViewContainer.viewContent .detailViewFollowButton .fa-star-o {
  color: var(--color-primary) !important;
}

.detailViewContainer.viewContent .detailViewActionMenu {
  min-width: 220px !important;
  margin-top: 10px !important;
  padding: 8px !important;
  border-radius: var(--view-card-radius-lg) !important;
  border: 1px solid #dde6ef !important;
  box-shadow: 0 24px 40px rgba(15, 23, 42, 0.12) !important;
}

.detailViewContainer.viewContent .detailViewActionMenu > li > a {
  border-radius: var(--view-card-radius-sm) !important;
  padding: 10px 12px !important;
  color: #334a60 !important;
  font-weight: 500 !important;
}

.detailViewContainer.viewContent .detailViewActionMenu > li > a:hover {
  background: #f5f9fd !important;
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailViewHeaderMetaRow {
  margin: 0 0 18px !important;
}

.detailViewContainer.viewContent .detailTagContainer {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--view-card-radius) !important;
  padding: 16px 18px !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05) !important;
}

.detailViewContainer.viewContent .detailTagToolbar {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.detailViewContainer.viewContent .detailTagToolbarHeader {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.detailViewContainer.viewContent .detailTagToolbarCopy {
  min-width: 0 !important;
}

.detailViewContainer.viewContent .detailTagSectionLabel {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #7a90a7 !important;
}

.detailViewContainer.viewContent .detailTagSectionHint {
  display: block !important;
  margin-top: 5px !important;
  font-size: 13px !important;
  color: #5e748b !important;
}

.detailViewContainer.viewContent .detailTagAddButton {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: var(--view-card-radius) !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  background: rgba(var(--theme-primary-rgb), 0.08) !important;
  color: var(--color-primary-dark) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 18px rgba(var(--theme-primary-rgb), 0.12) !important;
}

.detailViewContainer.viewContent .detailTagAddButton:hover {
  background: rgba(var(--theme-primary-rgb), 0.14) !important;
  border-color: rgba(var(--theme-primary-rgb), 0.24) !important;
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailTagContents {
  display: block !important;
}

.detailViewContainer.viewContent .detailTagList {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
}

.detailViewContainer.viewContent .detailTagEmptyState,
.detailShowAllModal .detailTagEmptyState,
.viewAllTagsContainer .detailTagEmptyState {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px dashed #d6e1ec !important;
  border-radius: 999px !important;
  background: #f8fbfe !important;
  color: #7c90a3 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.detailViewContainer.viewContent .detailTagEmptyState.hide,
.detailShowAllModal .detailTagEmptyState.hide,
.viewAllTagsContainer .detailTagEmptyState.hide,
.detailViewContainer.viewContent .detailTagList .moreTags.hide {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagList .tag,
.detailShowAllModal .tag,
.viewAllTagsContainer .tag,
.detailTagPopover .tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 0 10px 0 12px !important;
  border: 1px solid #d9e4ef !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.detailViewContainer.viewContent .detailTagList .tag.active,
.detailShowAllModal .tag.active,
.viewAllTagsContainer .tag.active {
  background: #eef5ff !important;
  border-color: #cfe0f4 !important;
}

.detailViewContainer.viewContent .detailTagList .tagState,
.detailShowAllModal .tagState,
.viewAllTagsContainer .tagState,
.detailTagPopover .tagState {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  flex: 0 0 12px !important;
}

.detailViewContainer.viewContent .detailTagList .activeToggleIcon,
.detailShowAllModal .activeToggleIcon,
.viewAllTagsContainer .activeToggleIcon,
.detailTagPopover .activeToggleIcon {
  font-size: 9px !important;
  color: var(--color-primary) !important;
}

.detailViewContainer.viewContent .detailTagList .tagLabel,
.detailShowAllModal .tagLabel,
.viewAllTagsContainer .tagLabel,
.detailTagPopover .tagLabel {
  max-width: 190px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #2d4359 !important;
}

.detailViewContainer.viewContent .detailTagList .editTag,
.detailViewContainer.viewContent .detailTagList .deleteTag,
.detailShowAllModal .editTag,
.detailShowAllModal .deleteTag,
.viewAllTagsContainer .editTag,
.viewAllTagsContainer .deleteTag {
  width: 22px !important;
  height: 22px !important;
  border-radius: var(--view-control-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
  font-size: 11px !important;
  color: #6f8296 !important;
  opacity: 0 !important;
  transition: opacity 0.16s ease, background 0.16s ease, color 0.16s ease !important;
}

.detailViewContainer.viewContent .detailTagList .tag:hover .editTag,
.detailViewContainer.viewContent .detailTagList .tag:hover .deleteTag,
.detailViewContainer.viewContent .detailTagList .tag.active .editTag,
.detailViewContainer.viewContent .detailTagList .tag.active .deleteTag,
.detailShowAllModal .tag:hover .editTag,
.detailShowAllModal .tag:hover .deleteTag,
.viewAllTagsContainer .tag:hover .editTag,
.viewAllTagsContainer .tag:hover .deleteTag {
  opacity: 1 !important;
}

.detailViewContainer.viewContent .detailTagList .editTag:hover,
.detailShowAllModal .editTag:hover,
.viewAllTagsContainer .editTag:hover {
  background: #ecf3fa !important;
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailTagList .deleteTag:hover,
.detailShowAllModal .deleteTag:hover,
.viewAllTagsContainer .deleteTag:hover {
  background: #fff1f2 !important;
  color: #e04f5f !important;
}

.detailViewContainer.viewContent .detailTagList .moreTags {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: var(--color-primary-dark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.detailViewContainer.viewContent .detailTagList .moreTags:hover {
  background: #e4efff !important;
}

.detailTagModalCard,
.detailTagViewAllModal {
  border: 0 !important;
  border-radius: var(--view-card-radius-4xl) !important;
  overflow: hidden !important;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18) !important;
}

.detailTagModalCard .modal-header,
.detailTagViewAllModal .modal-header {
  border-bottom: 0 !important;
  padding: 22px 24px 0 !important;
}

.detailTagModalCard .modal-title,
.detailTagViewAllModal .modal-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1f3448 !important;
}

.detailTagModalCard .modal-body,
.detailTagViewAllModal .modal-body {
  padding: 24px !important;
}

.detailTagModalLayout {
  display: flex !important;
  flex-wrap: wrap !important;
}

.detailTagModalColumn {
  display: flex !important;
}

.detailTagModalSection {
  width: 100% !important;
  min-height: 100% !important;
  padding: 18px !important;
  border: 1px solid #e0e9f2 !important;
  border-radius: var(--view-card-radius-2xl) !important;
  background: linear-gradient(180deg, #f9fbfe 0%, #f5f8fc 100%) !important;
}

.detailTagModalSectionHeader {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.detailTagModalTitle {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #253b51 !important;
}

.detailTagModalSubtitle {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  color: #73869a !important;
}

.detailTagModalGroup {
  margin-bottom: 16px !important;
}

.detailTagFieldLabel {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #8094a8 !important;
}

.detailTagCurrentScroll {
  max-height: 220px !important;
  overflow: auto !important;
}

.detailTagModalCurrentList {
  min-height: 132px !important;
  padding: 12px !important;
  border: 1px solid #d9e3ee !important;
  border-radius: var(--view-card-radius-lg) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.detailTagDropdown .currentTagSelector,
.detailTagCreateInput,
.detailTagEditorField input {
  width: 100% !important;
  height: 44px !important;
  border: 1px solid #d9e3ee !important;
  border-radius: var(--view-card-radius) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 0 14px !important;
  color: #30485d !important;
}

.detailTagDropdown .currentTagSelector:focus,
.detailTagCreateInput:focus,
.detailTagEditorField input:focus {
  border-color: rgba(var(--theme-primary-rgb), 0.35) !important;
  box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.12) !important;
}

.detailTagMenu {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 8px !important;
  border: 1px solid #dce5ef !important;
  border-radius: var(--view-card-radius-lg) !important;
  box-shadow: 0 24px 40px rgba(15, 23, 42, 0.12) !important;
}

.detailTagMenuScroll {
  max-height: 260px !important;
  overflow: auto !important;
}

.detailTagMenu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.detailTagMenu .tag-item {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.detailTagMenu .tag-item > a {
  display: block !important;
  margin-left: 0 !important;
  padding: 6px !important;
  border-radius: var(--view-card-radius) !important;
  text-decoration: none !important;
}

.detailTagMenu .tag-item > a:hover {
  background: #edf4fb !important;
}

.detailTagMenu .tag {
  width: 100% !important;
  justify-content: flex-start !important;
}

.detailTagVisibilityBox {
  padding: 12px 14px !important;
  border: 1px solid #dce5ef !important;
  border-radius: var(--view-card-radius) !important;
  background: #ffffff !important;
}

.detailTagVisibilityLabel,
.detailTagEditorCheckbox {
  color: #365069 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.detailTagInfoBlock {
  margin-bottom: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.14) !important;
  border-radius: var(--view-card-radius-lg) !important;
  background: linear-gradient(180deg, rgba(var(--theme-primary-rgb), 0.06) 0%, rgba(var(--theme-primary-rgb), 0.02) 100%) !important;
  color: #55718b !important;
}

.detailTagInfoTitle {
  margin: 0 0 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #244057 !important;
}

.detailTagInfoBlock > div + div {
  margin-top: 10px !important;
}

.detailTagModalCard .modal-footer,
.detailTagViewAllModal .modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 0 24px 24px !important;
  border-top: 0 !important;
}

.detailTagModalCard .modal-footer .btn,
.detailTagViewAllModal .modal-footer .btn {
  min-width: 124px !important;
  height: 42px !important;
  border-radius: var(--view-card-radius) !important;
}

.detailTagPopover {
  border: 0 !important;
  border-radius: var(--view-card-radius) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10) !important;
}

.detailTagPopover .arrow {
  display: none !important;
}

.detailTagPopover form {
  margin: 0 !important;
}

.detailTagPopover .popover-content {
  padding: 0 !important;
}

.detailViewContainer.viewContent .related-tabs .navbar {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--tab-shell-radius) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05) !important;
  padding: 6px !important;
}

.detailViewContainer.viewContent .related-tabs .nav-tabs {
  gap: 10px !important;
  padding: 0 !important;
  align-items: center !important;
}

.detailViewContainer.viewContent .related-tabs .nav-tabs > :is(li, li.tab-item) > a {
  padding: 0 16px !important;
  border-radius: var(--tab-chip-radius) !important;
  background: #f7fafe !important;
  color: #647a90 !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .related-tabs .nav-tabs > :is(li, li.tab-item) > a:hover {
  background: #f1f6fb !important;
  border-color: #d0ddea !important;
  color: #36506a !important;
}

.detailViewContainer.viewContent .related-tabs .nav-tabs > :is(li.active, li.tab-item.active) > a,
.detailViewContainer.viewContent .related-tabs .nav-tabs > :is(li.active, li.tab-item.active) > a:hover {
  background: rgba(var(--theme-primary-rgb), 0.12) !important;
  color: var(--color-primary-dark) !important;
  border-color: rgba(var(--theme-primary-rgb), 0.2) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--theme-primary-rgb), 0.08) !important;
}

.detailViewContainer.viewContent .related-tabs .tab-label,
.detailViewContainer.viewContent .related-tabs .tab-label strong {
  font-size: 13px !important;
  font-weight: 700 !important;
}

.detailViewContainer.viewContent .detailViewContentBody {
  margin-top: 18px !important;
}

.detailViewContainer.viewContent #customtabs {
  margin-top: 0 !important;
}

.detailViewContainer.viewContent #customtabs > .related-tabs .nav-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
}

.detailViewContainer.viewContent #customtabs > .related-tabs .nav-tabs::after {
  display: none !important;
}

.detailViewContainer.viewContent #customtabs > .related-tabs .nav-tabs > li {
  float: none !important;
  margin: 0 !important;
}

.detailViewContainer.viewContent #customtabs > .related-tabs .nav-tabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 1px solid #dbe5ef !important;
  border-top: 1px solid #dbe5ef !important;
  border-radius: var(--tab-chip-radius) !important;
  background: #f7fafe !important;
  color: #6a8096 !important;
  top: auto !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent #customtabs > .related-tabs .nav-tabs > li > a:hover {
  background: #f0f6fb !important;
  border-color: #ccd9e7 !important;
  color: #35506a !important;
  padding-top: 0 !important;
}

.detailViewContainer.viewContent #customtabs > .related-tabs .nav-tabs > li.active > a,
.detailViewContainer.viewContent #customtabs > .related-tabs .nav-tabs > li.active > a:is(:focus, :hover) {
  background: rgba(var(--theme-primary-rgb), 0.12) !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  color: var(--color-primary-dark) !important;
  border-radius: var(--tab-chip-radius) !important;
  padding-top: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(var(--theme-primary-rgb), 0.06) !important;
}

.detailViewContainer.viewContent #customtabs .tab-label strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.detailViewContainer.viewContent #customtabs .tab-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 991px) {
  .detailViewContainer.viewContent .detailview-header-shell {
    padding: 22px 18px 18px !important;
  }

  .detailViewContainer.viewContent .detailViewButtoncontainer {
    margin-top: 18px !important;
    justify-content: flex-start !important;
  }

  .detailViewContainer.viewContent .detailViewActionsToolbar {
    justify-content: flex-start !important;
  }

  .detailViewContainer.viewContent .detailTagToolbarHeader {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .detailViewContainer.viewContent .detailTagInlinePanel {
    max-width: none !important;
    width: 100% !important;
  }

  .detailViewContainer.viewContent .detailTagInlineFieldRow {
    flex-wrap: wrap !important;
  }

  .detailViewContainer.viewContent .detailTagInlineSave {
    flex: 1 1 auto !important;
  }

  .detailViewContainer.viewContent .fieldBlockContainer .dv-col + .dv-col {
    border-left: 0 !important;
  }

  .detailViewContainer.viewContent .fieldBlockContainer .dv-col {
    border-top: 1px solid #eef3f8 !important;
  }

  .detailViewContainer.viewContent .fieldBlockContainer .dv-row:first-child .dv-col:first-child {
    border-top: 0 !important;
  }
}

@media (max-width: 767px) {
  .detailViewContainer.viewContent .detailRecordHeader {
    flex-direction: column !important;
  }

  .detailViewContainer.viewContent .detailRecordTitleRow h4 {
    font-size: 25px !important;
  }

  .detailTagModalCard .modal-body,
  .detailTagViewAllModal .modal-body {
    padding: 18px !important;
  }

  .detailTagModalCard .modal-footer,
  .detailTagViewAllModal .modal-footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  .detailTagModalCard .modal-footer .btn,
  .detailTagViewAllModal .modal-footer .btn {
    width: 100% !important;
  }
}

/* ============================================================
   Detail View Workspace Layout Refresh
   ============================================================ */

.detailViewContainer.viewContent {
  padding: 0 18px 26px !important;
}

.detailViewContainer.viewContent .detailViewWorkspace {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
}

.detailViewContainer.viewContent .detailViewSidebarArea,
.detailViewContainer.viewContent .detailViewMainArea {
  float: none !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  min-width: 0 !important;
}

.detailViewContainer.viewContent .detailViewMainArea {
  flex: 1 1 calc(100% - 360px) !important;
  width: calc(100% - 360px) !important;
  max-width: calc(100% - 360px) !important;
}

.detailViewContainer.viewContent .detailview-header-row,
.detailViewContainer.viewContent .detailViewHeaderMetaRow {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.detailViewContainer.viewContent .detailview-header-row {
  display: block !important;
}

.detailViewContainer.viewContent .detailRecordHeader {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 18px !important;
}

.detailViewContainer.viewContent .detailRecordImage {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  border-radius: var(--view-card-radius-3xl) !important;
}

.detailViewContainer.viewContent .detailRecordBasicInfo {
  width: 100% !important;
  gap: 12px !important;
}

.detailViewContainer.viewContent .detailRecordTitleRow h4 {
  font-size: 28px !important;
  line-height: 1.12 !important;
}

.detailViewContainer.viewContent .detailRecordMeta {
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailRecordFieldRow {
  display: block !important;
}

.detailViewContainer.viewContent .detailRecordFieldValue {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailRecordFieldValue > .value,
.detailViewContainer.viewContent .detailRecordFieldValue > .value a {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.detailViewContainer.viewContent .detailRecordMapRow {
  margin-top: 6px !important;
}

.detailViewContainer.viewContent .detailViewHeaderMetaRow {
  margin: 18px 0 0 !important;
}

.detailViewContainer.viewContent .detailTagContainer {
  padding: 18px !important;
  border-radius: var(--view-card-radius-xl) !important;
  border: 0 !important;
  background: #f7fbff !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailTagToolbar {
  gap: 12px !important;
}

.detailViewContainer.viewContent .detailTagToolbarHeader {
  align-items: center !important;
}

.detailViewContainer.viewContent .detailTagSectionHint {
  margin-top: 4px !important;
}

.detailViewContainer.viewContent .detailTagAddButton {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: var(--view-card-radius) !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailTagList {
  min-height: 0 !important;
}

.detailViewContainer.viewContent .detailTagInlinePanel {
  max-width: none !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.detailViewContainer.viewContent .detailViewMainArea .detailview-content-shell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.detailViewContainer.viewContent .detailViewActionBarRow {
  margin: 0 0 16px !important;
}

.detailViewContainer.viewContent .detailViewActionBarRow .detailViewButtoncontainer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.detailViewContainer.viewContent .detailViewActionsToolbar {
  width: 100% !important;
  margin-top: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--view-card-radius-2xl) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05) !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.detailViewContainer.viewContent .detailViewPrimaryActions {
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

.detailViewContainer.viewContent .detailViewPager {
  margin-left: auto !important;
}

.detailViewContainer.viewContent .detailViewPagerButton {
  width: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
}

.detailViewContainer.viewContent .detailViewTabsNavbar .navbar-header {
  display: none !important;
}

.detailViewContainer.viewContent .detailViewTabsCollapse {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailViewTopTabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  margin: 0 !important;
  float: none !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li {
  float: none !important;
  margin: 0 !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: var(--view-card-radius-md) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #6a8095 !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li > a:hover {
  background: #f4f8fc !important;
  border-color: #dde6ef !important;
  color: #294157 !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li.active > a,
.detailViewContainer.viewContent .detailViewTopTabs > li.active > a:hover {
  background: rgba(var(--theme-primary-rgb), 0.1) !important;
  border-color: rgba(var(--theme-primary-rgb), 0.2) !important;
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailViewContentBody {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .blockData {
  display: block !important;
}
/* Allow JS block-toggle to hide blockData via .hide class (higher specificity beats the rule above) */
.detailViewContainer.viewContent .fieldBlockContainer .blockData.hide {
  display: none !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .dv-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  margin: 0 !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .dv-col {
  display:        flex !important;
  flex-direction: column !important;
  flex:           0 0 50% !important;
  width:          50% !important;
  max-width:      50% !important;
  min-width:      0 !important;
  min-height:     112px !important;
  box-sizing:     border-box !important;
}
/* Full-width fields must override the 50% above */
.detailViewContainer.viewContent .fieldBlockContainer .dv-col.dv-col-full {
  flex:      0 0 100% !important;
  width:     100% !important;
  max-width: 100% !important;
}
/* Nested dv-row inside dv-row (template bug edge-case): force it to
   take a full row so it doesn't act as just another 50% column */
.detailViewContainer.viewContent .fieldBlockContainer .dv-row > .dv-row {
  flex:      0 0 100% !important;
  width:     100% !important;
  max-width: 100% !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .fieldValue {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .fieldValue .action {
  float: none !important;
  position: static !important;
  margin-left: 0 !important;
}

@media (max-width: 991px) {
  .detailViewContainer.viewContent {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .detailViewContainer.viewContent .detailViewWorkspace {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .detailViewContainer.viewContent .detailViewSidebarArea,
  .detailViewContainer.viewContent .detailViewMainArea {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .detailViewContainer.viewContent .detailViewSidebarArea {
    position: static !important;
    top: auto !important;
    margin-bottom: 18px !important;
  }

  .detailViewContainer.viewContent .detailViewActionsToolbar,
  .detailViewContainer.viewContent .detailViewPrimaryActions {
    justify-content: flex-start !important;
  }

  .detailViewContainer.viewContent .detailSubTabsList {
    gap: 18px !important;
  }
}

/* ============================================================
   Detail View Workspace Polish
   ============================================================ */

.detailViewContainer.viewContent .detailViewMainArea {
  width: calc(100% - 380px) !important;
  max-width: calc(100% - 380px) !important;
}

.detailViewContainer.viewContent .detailRecordHeader {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.detailViewContainer.viewContent .detailRecordImage {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  border-radius: var(--view-card-radius-2xl) !important;
}

.detailViewContainer.viewContent .detailRecordTitleRow .recordLabel,
.detailViewContainer.viewContent .detailRecordTitleRow .recordLabel span {
  display: inline !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.detailViewContainer.viewContent .detailRecordTitleRow h4 {
  font-size: 30px !important;
  line-height: 1.16 !important;
}

.detailViewContainer.viewContent .detailRecordMeta {
  gap: 7px !important;
}

.detailViewContainer.viewContent .detailRecordFieldValue > .value,
.detailViewContainer.viewContent .detailRecordFieldValue > .value a {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.detailViewContainer.viewContent .detailTagContainer {
  margin-top: 8px !important;
  padding: 14px 14px 12px !important;
  border: 1px solid #edf2f7 !important;
  border-radius: var(--view-card-radius-lg) !important;
  background: #fbfdff !important;
}

.detailViewContainer.viewContent .detailTagSectionLabel {
  margin-bottom: 2px !important;
}

.detailViewContainer.viewContent .detailTagSectionHint {
  font-size: 12px !important;
}

.detailViewContainer.viewContent .detailTagToolbarHeader {
  gap: 10px !important;
}

.detailViewContainer.viewContent .detailTagAddButton {
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

.detailViewContainer.viewContent .detailTagList .tag,
.detailViewContainer.viewContent .detailTagEmptyState,
.detailViewContainer.viewContent .detailTagList .moreTags {
  min-height: 32px !important;
}

.detailViewContainer.viewContent .detailViewActionBarRow {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 12px !important;
}

.detailViewContainer.viewContent .detailViewActionsToolbar {
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 10px !important;
}

.detailViewContainer.viewContent .detailViewPrimaryActions {
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.detailViewContainer.viewContent .detailViewPager {
  flex: 0 0 auto !important;
}

.detailViewContainer.viewContent .detailViewActionButton {
  height: 40px !important;
  padding: 0 15px !important;
  border-radius: var(--view-card-radius) !important;
  font-size: 13px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

.detailViewContainer.viewContent .fieldBlockContainer {
  border-radius: var(--view-card-radius-lg) !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .fieldBlockHeader {
  padding: 16px 20px !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .dv-col {
  flex:      0 0 50% !important;
  width:     50% !important;
  max-width: 50% !important;
  min-height: 92px !important;
  padding: 16px 20px !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .fieldLabel {
  margin-bottom: 7px !important;
}

@media (max-width: 991px) {
  .detailViewContainer.viewContent .detailViewActionsToolbar {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .detailViewContainer.viewContent .detailViewPrimaryActions {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
  }

  .detailViewContainer.viewContent .detailViewTopTabsIconStart {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .detailViewContainer.viewContent .detailViewTopTabsIconStart::before {
    display: none !important;
  }
}

/* ============================================================
   Detail View Density And Clarity Tuning
   ============================================================ */

.detailViewContainer.viewContent .detailRecordHeader {
  gap: 14px !important;
}

.detailViewContainer.viewContent .detailRecordImage {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: var(--view-card-radius-lg) !important;
}

.detailViewContainer.viewContent .detailRecordTitleRow h4 {
  font-size: 27px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
}

.detailViewContainer.viewContent .detailRecordFieldValue > .value,
.detailViewContainer.viewContent .detailRecordFieldValue > .value a {
  font-size: 13px !important;
  line-height: 1.38 !important;
}

.detailViewContainer.viewContent .detailRecordMapRow a {
  font-size: 13px !important;
}

.detailViewContainer.viewContent .detailTagContainer {
  margin-top: 6px !important;
  padding: 12px !important;
}

.detailViewContainer.viewContent .detailTagToolbar {
  gap: 10px !important;
}

.detailViewContainer.viewContent .detailTagToolbarHeader {
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailTagSectionHint {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.detailViewContainer.viewContent .detailTagAddButton {
  min-height: 34px !important;
  padding: 0 11px !important;
}

.detailViewContainer.viewContent .detailTagList .tag,
.detailViewContainer.viewContent .detailTagEmptyState,
.detailViewContainer.viewContent .detailTagList .moreTags {
  min-height: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.detailViewContainer.viewContent .detailViewActionBarRow {
  margin-bottom: 10px !important;
}

.detailViewContainer.viewContent .detailViewActionsToolbar {
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailViewPrimaryActions,
.detailViewContainer.viewContent .detailViewPager {
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailViewActionButton {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: var(--view-card-radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.detailViewContainer.viewContent .detailViewPagerButton {
  width: 36px !important;
  min-width: 36px !important;
}

.detailViewContainer.viewContent .summary-table td.fieldValue,
.detailViewContainer.viewContent .summary-table td.fieldValue .value,
.detailViewContainer.viewContent .summary-table td.fieldValue .value *,
.detailViewContainer.viewContent .summary-table td.fieldValue a {
  font-size: 14px !important;
  line-height: 1.38 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}

.detailViewContainer.viewContent .summary-table td.fieldValue .action {
  margin-left: 4px !important;
}

.detailViewContainer.viewContent .summary-table tr.summaryViewEntries td {
  vertical-align: top !important;
}

.detailViewContainer.viewContent .fieldBlockContainer {
  border-radius: var(--view-card-radius) !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .fieldBlockHeader {
  padding: 14px 18px !important;
  font-size: 12px !important;
}

.detailViewContainer.viewContent .fieldBlockContainer .dv-col {
  flex:      0 0 50% !important;
  width:     50% !important;
  max-width: 50% !important;
  min-height: 68px !important;
  padding: 10px 16px !important;
}


.detailViewContainer.viewContent .fieldBlockContainer .fieldLabel {
  margin-bottom: 4px !important;
}


.detailViewContainer.viewContent .summaryWidgetContainer .widget_header .btn,
.detailViewContainer.viewContent #relatedActivities .widget_header .btn {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: var(--view-control-radius) !important;
}

.detailViewContainer.viewContent .widgetContainer_comments textarea.commentcontent,
.detailViewContainer.viewContent .widgetContainer_comments .commentcontent {
  min-height: 60px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
}

.detailViewContainer.viewContent .widgetContainer_comments .addCommentBlock .btn-primary.saveComment,
.detailViewContainer.viewContent .widgetContainer_comments .addCommentBlock a.btn-primary,
.detailViewContainer.viewContent .widgetContainer_comments .addCommentBlock button.btn-primary:not(.fileUploadBtn),
.detailViewContainer.viewContent .widgetContainer_comments .fileUploadBtn.btn.btn-sm.btn-primary,
.detailViewContainer.viewContent .widgetContainer_comments .fileUploadContainer .btn-primary {
  height: 28px !important;
  font-size: 11px !important;
  border-radius: var(--view-control-radius) !important;
}

@media (max-width: 1199px) {
  .detailViewContainer.viewContent .detailSummaryPrimaryColumn,
  .detailViewContainer.viewContent .detailSummarySecondaryColumn {
    width: 100% !important;
  }
}

/* ============================================================
   Detail View Tabs And Sidebar Alignment
   ============================================================ */

.detailViewContainer.viewContent .detailViewTabsShell,
.detailViewContainer.viewContent .detailViewTabsNavbar,
.detailViewContainer.viewContent .detailViewTabsCollapse,
.detailViewContainer.viewContent .detailViewTopTabs,
.detailViewContainer.viewContent .detailViewTopTabs > li,
.detailViewContainer.viewContent .detailViewTopTabs > li > a {
  overflow: visible !important;
}

@media (max-width: 991px) {
  .detailViewContainer.viewContent .detailViewSidebarArea {
    margin-top: 0 !important;
  }
}

/* ============================================================
   Detail View Begin-Style Cleanup
   ============================================================ */

.detailViewContainer.viewContent {
  padding-bottom: 18px !important;
}

.detailViewContainer.viewContent .detailRecordHeader {
  gap: 12px !important;
}

.detailViewContainer.viewContent .detailRecordImage {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: var(--view-card-radius-sm) !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailRecordImage .name {
  font-size: 22px !important;
}

.detailViewContainer.viewContent .detailRecordTitleRow h4 {
  font-size: 24px !important;
  line-height: 1.2 !important;
}

.detailViewContainer.viewContent .detailRecordMeta {
  gap: 4px !important;
}

.detailViewContainer.viewContent .detailRecordFieldRow {
  margin-bottom: 1px !important;
}

.detailViewContainer.viewContent .detailRecordFieldValue,
.detailViewContainer.viewContent .detailRecordFieldValue > .value,
.detailViewContainer.viewContent .detailRecordFieldValue > .value a {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.detailViewContainer.viewContent .detailRecordMapRow {
  margin-top: 8px !important;
}

.detailViewContainer.viewContent .detailTagContainer {
  margin-top: 12px !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #edf2f7 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailTagToolbar {
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailTagToolbarHeader {
  align-items: center !important;
  gap: 10px !important;
}

.detailViewContainer.viewContent .detailTagToolbarCopy {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.detailViewContainer.viewContent .detailTagSectionLabel {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #203446 !important;
}

.detailViewContainer.viewContent .detailTagSectionHint {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagAddButton {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 9px !important;
  border-radius: var(--view-control-radius-sm) !important;
  background: #f5f8fc !important;
  border: 1px solid #dfe8f1 !important;
  color: #2f5d92 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.detailViewContainer.viewContent .detailTagAddButton .fa {
  font-size: 11px !important;
}

.detailViewContainer.viewContent .detailTagAddButtonText {
  display: inline !important;
}

.detailViewContainer.viewContent .detailTagList {
  gap: 6px !important;
}

.detailViewContainer.viewContent .detailTagList .tagState,
.detailShowAllModal .tagState,
.viewAllTagsContainer .tagState,
.detailTagPopover .tagState {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagList .tag,
.detailShowAllModal .tag,
.viewAllTagsContainer .tag,
.detailTagPopover .tag,
.detailViewContainer.viewContent .detailTagEmptyState,
.detailViewContainer.viewContent .detailTagList .moreTags {
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: var(--view-control-radius-sm) !important;
  border: 1px solid #e5ecf3 !important;
  background: #f3f6fa !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailTagList .tag {
  gap: 6px !important;
  padding-right: 8px !important;
}

.detailViewContainer.viewContent .detailTagList .tag.active,
.detailShowAllModal .tag.active,
.viewAllTagsContainer .tag.active {
  background: #edf5ff !important;
  border-color: #d8e7f8 !important;
}

.detailViewContainer.viewContent .detailTagList .tagLabel,
.detailShowAllModal .tagLabel,
.viewAllTagsContainer .tagLabel,
.detailTagPopover .tagLabel {
  max-width: 128px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.detailViewContainer.viewContent .detailTagList .editTag,
.detailViewContainer.viewContent .detailTagList .deleteTag,
.detailShowAllModal .editTag,
.detailShowAllModal .deleteTag,
.viewAllTagsContainer .editTag,
.viewAllTagsContainer .deleteTag {
  width: 16px !important;
  height: 16px !important;
  border-radius: var(--view-card-radius-xs) !important;
  font-size: 9px !important;
}

.detailViewContainer.viewContent .detailTagList .moreTags,
.detailViewContainer.viewContent .detailTagEmptyState {
  color: #6d8196 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.detailViewContainer.viewContent .detailViewActionBarRow {
  margin-bottom: 8px !important;
}

.detailViewContainer.viewContent .detailViewActionsToolbar {
  gap: 6px !important;
}

.detailViewContainer.viewContent .detailViewPrimaryActions,
.detailViewContainer.viewContent .detailViewPager {
  gap: 6px !important;
}

.detailViewContainer.viewContent .detailViewActionButton {
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: var(--view-control-radius-sm) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailViewPagerButton {
  width: 32px !important;
  min-width: 32px !important;
}

/*.detailViewContainer.viewContent .detailViewTabsShell {
  margin-bottom: 10px !important;
}*/

.detailViewContainer.viewContent .detailSubTabsShell {
  margin-top: 0 !important;
}

.detailViewContainer.viewContent .detailSubTabsNav {
  margin-bottom: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--tab-shell-radius) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05) !important;
}

.detailViewContainer.viewContent #customtabs > .detailSubTabsNav .detailSubTabsList,
.detailViewContainer.viewContent .detailSubTabsList {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.detailViewContainer.viewContent .detailSubTabsList > li {
  float: none !important;
  margin: 0 !important;
}

.detailViewContainer.viewContent #customtabs > .detailSubTabsNav .detailSubTabsList > li > a,
.detailViewContainer.viewContent .detailSubTabsList > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: var(--view-control-radius) !important;
  background: var(--control-icon-bg) !important;
  color: var(--control-icon-color) !important;
  box-shadow: none !important;
  top: auto !important;
  line-height: 1 !important;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease !important;
}

.detailViewContainer.viewContent #customtabs > .detailSubTabsNav .detailSubTabsList > li > a:hover,
.detailViewContainer.viewContent .detailSubTabsList > li > a:hover {
  background: var(--color-primary-dark) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.detailViewContainer.viewContent #customtabs > .detailSubTabsNav .detailSubTabsList > li.active > a,
.detailViewContainer.viewContent #customtabs > .detailSubTabsNav .detailSubTabsList > li.active > a:hover,
.detailViewContainer.viewContent #customtabs > .detailSubTabsNav .detailSubTabsList > li.active > a:focus,
.detailViewContainer.viewContent .detailSubTabsList > li.active > a,
.detailViewContainer.viewContent .detailSubTabsList > li.active > a:hover,
.detailViewContainer.viewContent .detailSubTabsList > li.active > a:focus {
  background: var(--color-primary-dark) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent #customtabs > .detailSubTabsNav .detailSubTabsList .tab-label,
.detailViewContainer.viewContent .detailSubTabsList .tab-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  white-space: nowrap !important;
  color: inherit !important;
}

.detailViewContainer.viewContent #customtabs > .detailSubTabsNav .detailSubTabsList .tab-label strong,
.detailViewContainer.viewContent .detailSubTabsList .tab-label strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* Detail View Header Alignment */
.detailViewContainer.viewContent .detailViewSidebarArea {
  flex: 0 0 380px !important;
  width: 380px !important;
  max-width: 380px !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
}

.detailViewContainer.viewContent .detailViewSidebarShell {
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e4ebf3 !important;
  border-radius: var(--view-card-radius) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
}

.detailViewContainer.viewContent .detailViewHeaderTopRow {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  margin: 0 0 16px !important;
  overflow: visible !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap,
.detailViewContainer.viewContent .detailViewHeaderActionsWrap {
  float: none !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  min-width: 0 !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap {
  flex: 0 0 380px !important;
  width: 380px !important;
  max-width: 380px !important;
  padding-top: 6px !important;
}

.detailViewContainer.viewContent .detailViewHeaderActionsWrap {
  flex: 1 1 calc(100% - 380px) !important;
  width: calc(100% - 380px) !important;
  max-width: calc(100% - 380px) !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailViewIdentityColumn,
.detailViewContainer.viewContent .detailViewHeaderActionsWrap .detailViewButtoncontainer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailViewIdentityColumn {
  float: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: -2px !important;
}

.detailViewContainer.viewContent .detailViewHeaderActionsWrap .detailViewButtoncontainer {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordHeader {
  align-items: flex-start !important;
  min-height: 72px !important;
  overflow: visible !important;
  gap: 14px !important;
  padding-top: 2px !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordBasicInfo {
  padding-top: 0 !important;
  min-width: 0 !important;
  gap: 6px !important;
}

@media (max-width: 991px) {
  .detailViewContainer.viewContent .detailViewHeaderTopRow {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .detailViewContainer.viewContent .detailViewHeaderIdentityWrap,
  .detailViewContainer.viewContent .detailViewHeaderActionsWrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .detailViewContainer.viewContent .detailViewHeaderIdentityWrap {
    margin-bottom: 10px !important;
  }
}

/* ============================================================
  Detail View Final Card Alignment
  ============================================================ */

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordImage {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: var(--view-card-radius-lg) !important;
  background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.18) 0%, rgba(var(--theme-primary-rgb), 0.06) 100%) !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordBasicInfo {
  min-width: 0 !important;
  gap: 6px !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordTitleRow h4 {
  font-size: 18px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-text) !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordFieldValue,
.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordFieldValue > .value,
.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordFieldValue > .value a {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordMapRow {
  margin-top: 4px !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordMapRow a {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordImage .name,
.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordImage img,
.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordImage .summaryImg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordImage .name {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-primary-dark) !important;
  font-size: 24px !important;
}

.detailViewContainer.viewContent .detailViewHeaderIdentityWrap .detailRecordTitleRow .salutation {
  color: #6d8298 !important;
}

.detailViewContainer.viewContent .detailViewHeaderActionsWrap .detailViewButtoncontainer,
.detailViewContainer.viewContent .detailViewHeaderActionsWrap .detailViewActionsToolbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.detailViewContainer.viewContent .detailViewHeaderActionsWrap .detailViewActionsToolbar {
  margin-top: 0 !important;
  margin-left: auto !important;
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailViewHeaderActionsWrap .detailViewPrimaryActions,
.detailViewContainer.viewContent .detailViewHeaderActionsWrap .detailViewPager {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailViewHeaderActionsWrap .detailViewActionButton,
.detailViewContainer.viewContent .detailViewHeaderActionsWrap .detailViewPagerButton {
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: var(--view-card-radius-sm) !important;
}

.detailViewContainer.viewContent .detailViewContentBody > .left-block,
.detailViewContainer.viewContent .detailViewContentBody > .detailSummaryPrimaryColumn {
  float: none !important;
  flex: 0 0 34% !important;
  width: 34% !important;
  max-width: 34% !important;
  padding: 0 !important;
}

.detailViewContainer.viewContent .detailViewContentBody > .middle-block,
.detailViewContainer.viewContent .detailViewContentBody > .right-block,
.detailViewContainer.viewContent .detailViewContentBody > .detailSummarySecondaryColumn {
  float: none !important;
  flex: 1 1 calc(66% - 18px) !important;
  width: calc(66% - 18px) !important;
  max-width: calc(66% - 18px) !important;
  padding: 0 !important;
}

.detailViewContainer.viewContent #relatedActivities {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.detailViewContainer.viewContent .summaryView,
.detailViewContainer.viewContent .summaryWidgetContainer,
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer,
.detailViewContainer.viewContent .fieldBlockContainer {
  background: #ffffff !important;
  border: 1px solid #e4ebf3 !important;
  border-radius: var(--view-card-radius) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
}

.detailViewContainer.viewContent .summaryView,
.detailViewContainer.viewContent .summaryWidgetContainer,
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer,
.detailViewContainer.viewContent .fieldBlockContainer {
  margin-bottom: 18px !important;
}

.detailViewContainer.viewContent .summaryViewHeader {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 50px !important;
  padding: 12px 14px 12px 18px !important;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(var(--theme-primary-rgb), 0.12) 0%, rgba(var(--theme-primary-rgb), 0.04) 100%) !important;
  border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.16) !important;
  color: var(--color-primary-dark) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.detailViewContainer.viewContent .summaryWidgetContainer > [class*="widgetContainer_"] > .widget_header,
.detailViewContainer.viewContent .documentsSummaryWidget > .widget_header,
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer > .widget_header,
.detailViewContainer.viewContent .fieldBlockContainer > .fieldBlockHeader,
.detailViewContainer.viewContent .detailTagToolbarHeader {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 50px !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(var(--theme-primary-rgb), 0.12) 0%, rgba(var(--theme-primary-rgb), 0.04) 100%) !important;
  border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.16) !important;
  color: var(--color-primary-dark) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.detailViewContainer.viewContent .summaryViewHeader h4,
.detailViewContainer.viewContent .summaryWidgetContainer > [class*="widgetContainer_"] > .widget_header h4,
.detailViewContainer.viewContent .documentsSummaryWidget > .widget_header h4,
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer > .widget_header h4,
.detailViewContainer.viewContent .fieldBlockContainer > .fieldBlockHeader,
.detailViewContainer.viewContent .detailTagSectionLabel {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--color-primary-dark) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.detailViewContainer.viewContent .summaryWidgetContainer > [class*="widgetContainer_"] > .widget_header .pull-right,
.detailViewContainer.viewContent .documentsSummaryWidget > .widget_header .pull-right,
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer > .widget_header .pull-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  margin-top: 0 !important;
  float: none !important;
}

.detailViewContainer.viewContent .summaryWidgetContainer > [class*="widgetContainer_"] > .widget_header .pull-left,
.detailViewContainer.viewContent .documentsSummaryWidget > .widget_header .pull-left,
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer > .widget_header .pull-left {
  float: none !important;
}

.detailViewContainer.viewContent .summaryWidgetContainer > [class*="widgetContainer_"] > .widget_header .toggleButton,
.detailViewContainer.viewContent .documentsSummaryWidget > .widget_header .toggleButton,
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer > .widget_header .toggleButton {
  color: rgba(var(--theme-primary-rgb), 0.72) !important;
  margin-right: 2px !important;
}

.detailViewContainer.viewContent .summaryWidgetContainer > [class*="widgetContainer_"] > .widget_header .btn,
.detailViewContainer.viewContent .documentsSummaryWidget > .widget_header .btn,
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer > .widget_header .btn,
.detailViewContainer.viewContent .detailTagAddButton {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: var(--view-control-radius) !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  background: rgba(var(--theme-primary-rgb), 0.04) !important;
  color: var(--color-primary-dark) !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .summaryViewFields,
.detailViewContainer.viewContent .summaryWidgetContainer .widget_contents,
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer > .widget_contents {
  background: #ffffff !important;
  padding: 0 !important;
  /*margin:5px;*/
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldsList {
  display: flex !important;
  flex-direction: column !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldRow {
  display: grid !important;
  grid-template-columns: minmax(132px, 38%) minmax(0, 1fr) !important;
  align-items: stretch !important;
  border-top: 1px solid var(--color-border-light) !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldRow:first-child {
  border-top: 0 !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldLabel {
  min-width: 0 !important;
  padding: 12px 16px !important;
  background: rgba(var(--theme-primary-rgb), 0.035) !important;
  border-right: 1px solid var(--color-border-light) !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldLabel label,
.detailViewContainer.viewContent .summaryViewFields .summaryFieldLabel .muted,
.detailViewContainer.viewContent .summaryViewFields .summaryFieldLabel label.muted,
.detailViewContainer.viewContent .summaryViewFields .summaryFieldLabel label.textOverflowEllipsis,
.detailViewContainer.viewContent .summaryViewFields .summaryFieldLabel label.muted.textOverflowEllipsis {
  display: block !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  font-family: var(--font-family) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(var(--theme-primary-rgb), 0.84) !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue {
  min-width: 0 !important;
  padding: 12px 16px 12px 12px !important;
  background: #ffffff !important;
  overflow: visible !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValueInner {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .value,
.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .value a,
.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .value * {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.45 !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .edit {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .edit.hide {
  display: none !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .edit:not(.hide) {
  display: block !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .edit:not(.hide) .input-group.editElement {
  width: 100% !important;
  max-width: 100% !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .edit:not(.hide) .input-save-wrap {
  display: flex !important;
  margin-left: 2px !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .action {
  flex: 0 0 auto !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  align-self: flex-start !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldRow:hover .summaryFieldValue .action {
  display: inline-flex !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .action:has(.editAction.hide) {
  display: none !important;
}

.detailViewContainer.viewContent .summaryViewFields .summaryFieldValue .action .editAction {
  margin: 0 !important;
}

@media (max-width: 767px) {
  .detailViewContainer.viewContent .summaryViewFields .summaryFieldRow {
    grid-template-columns: 1fr !important;
  }

  .detailViewContainer.viewContent .summaryViewFields .summaryFieldLabel {
    border-right: 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
    padding-bottom: 8px !important;
  }

  .detailViewContainer.viewContent .summaryViewFields .summaryFieldValue {
    padding-top: 10px !important;
  }
}

.detailViewContainer.viewContent #relatedActivities .activityEntries {
  padding: 14px 16px !important;
}

.detailViewContainer.viewContent #relatedActivities .activityEntries .module-icon {
  flex: 0 0 40px !important;
  width: 40px !important;
}

.detailViewContainer.viewContent #relatedActivities .activityEntries .module-icon [class*="vicon-"] {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--view-card-radius-sm) !important;
}

.detailViewContainer.viewContent .widgetContainer_comments .commentTitle,
.detailViewContainer.viewContent .widgetContainer_comments .recentCommentsHeader {
  padding: 14px 16px !important;
  margin: 0 !important;
  background: #ffffff !important;
}

.detailViewContainer.viewContent .widgetContainer_comments .recentCommentsHeader {
  border-top: 1px solid var(--color-border-light) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}

.detailViewContainer.viewContent .widgetContainer_comments .recentCommentsHeader h4 {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .widgetContainer_comments .commentsBody {
  background: #ffffff !important;
}

.detailViewContainer.viewContent .detailTagToolbar {
  background: #ffffff !important;
}

.detailViewContainer.viewContent .detailTagContents {
  padding: 12px 16px 14px !important;
}

.detailViewContainer.viewContent .detailTagList {
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailTagChip,
.detailViewContainer.viewContent .tag,
.detailViewContainer.viewContent .detailTagPendingChip {
  border-radius: 999px !important;
}

@media (max-width: 1199px) {
  .detailViewContainer.viewContent .detailViewContentBody > .left-block,
  .detailViewContainer.viewContent .detailViewContentBody > .middle-block,
  .detailViewContainer.viewContent .detailViewContentBody > .right-block,
  .detailViewContainer.viewContent .detailViewContentBody > .detailSummaryPrimaryColumn,
  .detailViewContainer.viewContent .detailViewContentBody > .detailSummarySecondaryColumn {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* ============================================================
  Detail View Header Fields + Tag Editor Polish
  ============================================================ */

.detailViewContainer.viewContent .detailViewHeaderFieldsPanel {
  margin: 0 0 14px !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.16) !important;
  border-radius: var(--view-card-radius) !important;
  overflow: hidden !important;
  background: var(--color-card) !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldsPanelHeader {
  padding: 10px 14px !important;
  background: linear-gradient(180deg, rgba(var(--theme-primary-rgb), 0.10) 0%, rgba(var(--theme-primary-rgb), 0.04) 100%) !important;
  border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.12) !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldsPanelTitle {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldsList {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 14px 14px !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldsForm {
  margin: 0 !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldsEditableList {
  padding: 6px 0 !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldRow {
  margin: 0 !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldRow:last-child {
  border-bottom: 0 !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldValue {
  width: 100% !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldMeta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldName {
  display: block !important;
  min-width: 0 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(var(--theme-primary-rgb), 0.88) !important;
  line-height: 1.2 !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldDisplay {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldDisplay > .value,
.detailViewContainer.viewContent .detailViewHeaderFieldDisplay > .value a {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--color-text) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldDisplay > .edit:not(.hide) {
  flex: 1 1 auto !important;
  display: block !important;
  min-width: 0 !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldDisplay > .edit:not(.hide) .input-group.editElement {
  width: 100% !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldDisplay > .edit:not(.hide) .inputElement,
.detailViewContainer.viewContent .detailViewHeaderFieldDisplay > .edit:not(.hide) select,
.detailViewContainer.viewContent .detailViewHeaderFieldDisplay > .edit:not(.hide) textarea {
  width: 100% !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldValue .action {
  margin-left: auto !important;
  position: static !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease, visibility 0.18s ease !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldValue .action:has(.editAction.hide) {
  display: none !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldRow:hover .detailViewHeaderFieldValue .action,
.detailViewContainer.viewContent .detailViewHeaderFieldRow:focus-within .detailViewHeaderFieldValue .action {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldRow:has(.detailViewHeaderFieldDisplay > .edit:not(.hide)) .detailViewHeaderFieldValue .action {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldValue .editAction.hide {
  display: none !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldValue .editAction:not(.hide) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 12px !important;
  color: var(--color-primary) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldValue .editAction:not(.hide):hover {
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldChip {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.16) !important;
  background: rgba(var(--theme-primary-rgb), 0.08) !important;
  color: var(--color-primary-dark) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldChipLabel {
  display: inline-block !important;
  white-space: nowrap !important;
}

.detailViewContainer.viewContent .detailTagContainer {
  margin-top: 0 !important;
}

.detailViewContainer.viewContent .detailTagToolbar {
  border: 1px solid rgba(var(--theme-primary-rgb), 0.16) !important;
  border-radius: var(--view-card-radius) !important;
  background: var(--color-card) !important;
  overflow: visible !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}

.detailViewContainer.viewContent .detailTagToolbarHeader {
  padding: 10px 12px 6px !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

.detailViewContainer.viewContent .detailTagSectionLabel {
  color: var(--color-primary-dark) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.detailViewContainer.viewContent .detailTagContents {
  position: relative !important;
  padding: 0 12px 12px !important;
  overflow: visible !important;
}

.detailViewContainer.viewContent .detailTagDisplayState {
  display: block !important;
}

.detailViewContainer.viewContent .detailTagContainer.is-editing .detailTagDisplayState {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagChipRow {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-height: 32px !important;
}

.detailViewContainer.viewContent .detailTagList {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-height: 32px !important;
}

.detailViewContainer.viewContent .detailTagList .tag,
.detailViewContainer.viewContent .detailTagEmptyState,
.detailViewContainer.viewContent .detailTagList .moreTags {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.15) !important;
  border-radius: 999px !important;
  background: rgba(var(--theme-primary-rgb), 0.07) !important;
  color: var(--color-primary-dark) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailTagList .tagState {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagEmptyState {
  border-style: dashed !important;
  background: #ffffff !important;
  color: rgba(var(--theme-primary-rgb), 0.86) !important;
}

.detailViewContainer.viewContent .detailTagList .moreTags {
  background: #ffffff !important;
  text-decoration: none !important;
}

.detailViewContainer.viewContent .detailTagList .moreTags:hover {
  background: rgba(var(--theme-primary-rgb), 0.08) !important;
}

.detailViewContainer.viewContent .detailTagList .tagLabel {
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.detailViewContainer.viewContent .detailTagList .editTag,
.detailViewContainer.viewContent .detailTagList .deleteTag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  opacity: 0 !important;
  color: rgba(var(--theme-primary-rgb), 0.75) !important;
  transition: opacity 0.16s ease, color 0.16s ease !important;
}

.detailViewContainer.viewContent .detailTagList .tag:hover .editTag,
.detailViewContainer.viewContent .detailTagList .tag:hover .deleteTag,
.detailViewContainer.viewContent .detailTagList .tag.active .editTag,
.detailViewContainer.viewContent .detailTagList .tag.active .deleteTag,
.detailViewContainer.viewContent .detailTagList .editTag[aria-describedby] {
  opacity: 1 !important;
}

.detailViewContainer.viewContent .detailTagTriggerWrap {
  flex: 0 0 auto !important;
}

.detailViewContainer.viewContent .detailTagAddButton.detailTagAddIconButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border-radius: var(--view-control-radius) !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  background: rgba(var(--theme-primary-rgb), 0.06) !important;
  color: var(--color-primary-dark) !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailTagAddButton.detailTagAddIconButton.active,
.detailViewContainer.viewContent .detailTagAddButton.detailTagAddIconButton:hover {
  background: var(--control-icon-hover-bg) !important;
  border-color: var(--color-primary) !important;
  color: var(--control-icon-hover-color) !important;
  box-shadow: 0 10px 18px rgba(var(--theme-primary-rgb), 0.2) !important;
}

.detailViewContainer.viewContent .detailTagAddButton.detailTagAddIconButton i {
  font-size: 12px !important;
  line-height: 1 !important;
}

.detailViewContainer.viewContent .detailTagInlineComposer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  z-index: 25 !important;
  margin-top: 4px !important;
}

.detailViewContainer.viewContent .detailTagInlineComposer.hide {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagInlinePanel {
  margin-top: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.16) !important;
  border-radius: var(--view-card-radius) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10) !important;
}

.detailViewContainer.viewContent .detailTagInlineFieldRow {
  display: block !important;
  position: relative !important;
}

.detailViewContainer.viewContent .detailTagInlineInput,
.detailTagPopover .detailTagInlineInput {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: var(--view-control-radius) !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  background: #ffffff !important;
  color: var(--color-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.detailViewContainer.viewContent .detailTagInlineInput:focus,
.detailTagPopover .detailTagInlineInput:focus {
  border-color: rgba(var(--theme-primary-rgb), 0.42) !important;
  box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.10) !important;
}

.detailViewContainer.viewContent .detailTagInlineSuggestionsWrap {
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.detailViewContainer.viewContent .detailTagInlineSuggestions {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-height: 164px !important;
  overflow-y: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.detailViewContainer.viewContent .detailTagInlineSuggestionsWrap.hide {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagSuggestionItem {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 30px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.14) !important;
  background: rgba(var(--theme-primary-rgb), 0.09) !important;
  color: var(--color-primary-dark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-align: left !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease !important;
}

.detailViewContainer.viewContent .detailTagSuggestionItem:hover {
  border-color: rgba(var(--theme-primary-rgb), 0.28) !important;
  background: rgba(var(--theme-primary-rgb), 0.16) !important;
  color: var(--color-primary-dark) !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailTagSuggestionItem.is-selected {
  border-color: rgba(var(--theme-primary-rgb), 0.22) !important;
  background: rgba(var(--theme-primary-rgb), 0.14) !important;
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailTagSuggestionItem:disabled,
.detailViewContainer.viewContent .detailTagSuggestionItem.is-saving {
  opacity: 0.65 !important;
  cursor: wait !important;
}

.detailViewContainer.viewContent .detailTagSuggestionItem.is-public {
  background: rgba(var(--theme-primary-rgb), 0.15) !important;
}

.detailViewContainer.viewContent .detailTagSuggestionDot {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagSuggestionLabel {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.detailViewContainer.viewContent .detailTagInlineSuggestionsEmpty {
  display: block !important;
  margin-top: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: rgba(var(--theme-primary-rgb), 0.84) !important;
}

.detailViewContainer.viewContent .detailTagInlineSuggestionsEmpty.hide {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagInlineDismiss,
.detailTagPopover .detailTagInlineDismiss {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.14) !important;
  border-radius: var(--view-control-radius) !important;
  background: #ffffff !important;
  color: var(--color-primary-dark) !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailTagInlineDismiss:hover,
.detailTagPopover .detailTagInlineDismiss:hover {
  border-color: rgba(var(--theme-primary-rgb), 0.22) !important;
  background: rgba(var(--theme-primary-rgb), 0.1) !important;
}

.detailViewContainer.viewContent .detailTagInlineFooterRow,
.detailTagPopover .detailTagInlineFooterRow {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.detailViewContainer.viewContent .detailTagInlineSelectedWrap,
.detailTagPopover .detailTagInlineSelectedWrap {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  border-radius: var(--view-control-radius) !important;
  background: #ffffff !important;
}

.detailViewContainer.viewContent .detailTagInlineSelected {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.detailViewContainer.viewContent .detailTagInlineSelectedEmpty {
  font-size: 11px !important;
  color: rgba(var(--theme-primary-rgb), 0.72) !important;
}

.detailViewContainer.viewContent .detailTagInlineSelectedEmpty.hide {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagInlineActions,
.detailTagPopover .detailTagInlineActions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.detailViewContainer.viewContent .detailTagInlineSave,
.detailTagPopover .detailTagInlineSave {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: 999px !important;
  background: var(--color-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailTagInlineSave:hover:not(:disabled),
.detailTagPopover .detailTagInlineSave:hover:not(:disabled) {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailTagInlineSave:disabled,
.detailTagPopover .detailTagInlineSave:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.detailViewContainer.viewContent .detailTagSelectedChip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.16) !important;
  background: rgba(var(--theme-primary-rgb), 0.10) !important;
  color: var(--color-primary-dark) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.detailViewContainer.viewContent .detailTagSelectedChip.is-public {
  background: rgba(var(--theme-primary-rgb), 0.16) !important;
}

.detailViewContainer.viewContent .detailTagSelectedLabel {
  max-width: 132px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.detailViewContainer.viewContent .detailTagSelectedRemove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(var(--theme-primary-rgb), 0.78) !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailTagSelectedRemove:hover {
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailTagInlineCreateWrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.detailViewContainer.viewContent .detailTagInlineCreateWrap.hide {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagInlineCreateCopy {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagInlineCreateLabel {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagInlineCreateName {
  display: inline !important;
  max-width: 132px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.detailViewContainer.viewContent .detailTagInlineCreateHint {
  font-size: 11px !important;
  color: rgba(var(--theme-primary-rgb), 0.84) !important;
}

.detailViewContainer.viewContent .detailTagInlineVisibility,
.detailTagPopover .detailTagInlineVisibility {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: var(--color-primary-dark) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.detailViewContainer.viewContent .detailTagInlineVisibility input[type="checkbox"],
.detailTagPopover .detailTagInlineVisibility input[type="checkbox"] {
  margin: 0 !important;
}

@media (max-width: 767px) {
  .detailViewContainer.viewContent .detailTagInlineFooterRow,
  .detailTagPopover .detailTagInlineFooterRow {
    flex-wrap: wrap !important;
  }

  .detailViewContainer.viewContent .detailTagInlineActions,
  .detailTagPopover .detailTagInlineActions {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

.detailViewContainer.viewContent .detailTagAddButton.active {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

.detailViewContainer.viewContent .detailTagEditor,
.detailTagPopover .detailTagEditor {
  width: 236px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 10px !important;
  border: 1px solid rgba(var(--theme-primary-rgb), 0.16) !important;
  border-radius: var(--view-card-radius) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10) !important;
  overflow: visible !important;
}

.detailViewContainer.viewContent .detailTagEditorHeader,
.detailTagPopover .detailTagEditorHeader,
.detailViewContainer.viewContent .detailTagEditorTitle,
.detailTagPopover .detailTagEditorTitle,
.detailViewContainer.viewContent .detailTagEditorSubtitle,
.detailTagPopover .detailTagEditorSubtitle {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagEditorBody,
.detailTagPopover .detailTagEditorBody {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}

.detailViewContainer.viewContent .detailTagEditorField input,
.detailTagPopover .detailTagEditorField input {
  margin: 0 !important;
}

.detailViewContainer.viewContent .detailTagEditorVisibility,
.detailTagPopover .detailTagEditorVisibility {
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.detailViewContainer.viewContent .detailTagEditorVisibility .checkbox,
.detailTagPopover .detailTagEditorVisibility .checkbox {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.detailViewContainer.viewContent .detailTagEditorCheckbox,
.detailTagPopover .detailTagEditorCheckbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding-left: 0 !important;
  color: var(--color-primary-dark) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

.detailViewContainer.viewContent .detailTagEditorCheckbox input[type="checkbox"],
.detailTagPopover .detailTagEditorCheckbox input[type="checkbox"] {
  margin: 0 !important;
  position: static !important;
  float: none !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
}

.detailViewContainer.viewContent .detailTagEditorCheckbox span,
.detailTagPopover .detailTagEditorCheckbox span {
  display: inline-block !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

.detailViewContainer.viewContent .detailTagEditorFooter,
.detailTagPopover .detailTagEditorFooter {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
}

.detailViewContainer.viewContent .detailTagEditorActions,
.detailTagPopover .detailTagEditorActions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.detailViewContainer.viewContent .detailTagEditorFooter button,
.detailTagPopover .detailTagEditorFooter button {
  appearance: none !important;
  flex: 0 0 auto !important;
}

.detailViewContainer.viewContent .detailTagEditorFooter button span,
.detailTagPopover .detailTagEditorFooter button span {
  display: none !important;
}

.detailViewContainer.viewContent .detailTagEditorFooter button i,
.detailTagPopover .detailTagEditorFooter button i {
  font-size: 12px !important;
}

@media (max-width: 767px) {
  .detailViewContainer.viewContent .detailViewHeaderFieldsPanel,
  .detailViewContainer.viewContent .detailTagToolbar {
    border-radius: var(--view-card-radius-sm) !important;
  }

  .detailViewContainer.viewContent .detailTagEditor {
    width: 100% !important;
  }
}

/* ============================================================
   Key Fields Header + Related Tab Icon Tiles
   ============================================================ */

.detailViewContainer.viewContent .detailViewHeaderFieldsPanelHeader,
.detailViewContainer.viewContent .fieldBlockContainer > .fieldBlockHeader,
.detailViewContainer.viewContent .summaryWidgetContainer > [class*="widgetContainer_"] > .widget_header,
.detailViewContainer.viewContent .documentsSummaryWidget > .widget_header,
.detailViewContainer.viewContent #relatedActivities > .summaryWidgetContainer > .widget_header {
  position: relative !important;
  padding-left: 18px !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldsPanelHeader {
  padding: 10px 14px 10px 18px !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldsPanelTitle {
  color: var(--color-primary-dark) !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldsList {
  gap: 6px !important;
}

.detailViewContainer.viewContent .detailViewHeaderFieldChip {
  min-height: 26px !important;
  padding: 0 9px !important;
  background: rgba(var(--theme-primary-rgb), 0.07) !important;
  border-color: rgba(var(--theme-primary-rgb), 0.14) !important;
}

/* ------------------------------------------------------------
   Detail View Related Tab Icon Tiles
   Single source of truth for desktop icon-only tabs
   ------------------------------------------------------------ */
.detailViewContainer.viewContent .detailViewTopTabsIconStart {
  margin-left: auto !important;
  padding-left: 8px !important;
  position: relative !important;
}

.detailViewContainer.viewContent .detailViewTopTabsIconStart::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 1px !important;
  background: #e8eef5 !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li[data-module],
.detailViewContainer.viewContent .detailViewTopTabsIconItem {
  position: relative !important;
  margin-left: 3px !important;
  overflow: visible !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] > a,
.detailViewContainer.viewContent .detailViewTopTabsIconItem > a {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  border-radius: var(--view-control-radius) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] > a:hover,
.detailViewContainer.viewContent .detailViewTopTabsIconItem > a:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li.active > a,
.detailViewContainer.viewContent .detailViewTopTabs > li.active > a:hover,
.detailViewContainer.viewContent .detailViewTopTabsIconItem.active > a,
.detailViewContainer.viewContent .detailViewTopTabsIconItem.active > a:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] .tab-icon,
.detailViewContainer.viewContent .detailViewTopTabsIconItem .tab-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  position: relative !important;
  top: 0 !important;
  box-sizing: border-box !important;
  border-radius: var(--view-control-radius) !important;
  border: 0 !important;
  background: var(--control-icon-bg) !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] .tab-icon i,
.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] .tab-icon [class*="vicon"],
.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] .tab-icon svg,
.detailViewContainer.viewContent .detailViewTopTabsIconItem .tab-icon i,
.detailViewContainer.viewContent .detailViewTopTabsIconItem .tab-icon [class*="vicon"],
.detailViewContainer.viewContent .detailViewTopTabsIconItem .tab-icon svg {
  color: var(--control-icon-color) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transform: none !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] > a:hover .tab-icon,
.detailViewContainer.viewContent .detailViewTopTabsIconItem > a:hover .tab-icon,
.detailViewContainer.viewContent .detailViewTopTabs > li.active > a .tab-icon,
.detailViewContainer.viewContent .detailViewTopTabsIconItem.active .tab-icon {
  background: var(--control-icon-hover-bg) !important;
  border: 0 !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] > a:hover .tab-icon i,
.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] > a:hover .tab-icon [class*="vicon"],
.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] > a:hover .tab-icon svg,
.detailViewContainer.viewContent .detailViewTopTabsIconItem > a:hover .tab-icon i,
.detailViewContainer.viewContent .detailViewTopTabsIconItem > a:hover .tab-icon [class*="vicon"],
.detailViewContainer.viewContent .detailViewTopTabsIconItem > a:hover .tab-icon svg,
.detailViewContainer.viewContent .detailViewTopTabs > li.active > a .tab-icon i,
.detailViewContainer.viewContent .detailViewTopTabs > li.active > a .tab-icon [class*="vicon"],
.detailViewContainer.viewContent .detailViewTopTabs > li.active > a .tab-icon svg,
.detailViewContainer.viewContent .detailViewTopTabsIconItem.active .tab-icon i,
.detailViewContainer.viewContent .detailViewTopTabsIconItem.active .tab-icon [class*="vicon"],
.detailViewContainer.viewContent .detailViewTopTabsIconItem.active .tab-icon svg {
  color: var(--control-icon-hover-color) !important;
}

.detailViewContainer.viewContent .detailViewTopTabs > li[data-module] .numberCircle,
.detailViewContainer.viewContent .detailViewTopTabsIconItem .numberCircle,
.detailViewContainer.viewContent .related-tabs .numberCircle {
  top: -4px !important;
  right: -4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: var(--color-primary-dark) !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10) !important;
}

.detailViewContainer.viewContent .detailViewTopTabsIconItem .numberCircle.hide,
.detailViewContainer.viewContent .related-tabs .numberCircle.hide {
  display: none !important;
}

/* ------------------------------------------------------------
   Detail View Top Text Tabs
   Match the same light quick-create chip language
   ------------------------------------------------------------ */

.detailViewContainer.viewContent .related-tabs .nav-tabs > li.detailViewTopTabsTextItem > a,
.detailViewContainer.viewContent .detailViewTopTabsTextItem > a {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: var(--view-control-radius) !important;
  background: var(--control-icon-bg) !important;
  color: var(--control-icon-color) !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

.detailViewContainer.viewContent .detailViewTopTabsTextItem > a:hover,
.detailViewContainer.viewContent .detailViewTopTabsTextItem.active > a,
.detailViewContainer.viewContent .detailViewTopTabsTextItem.active > a:hover {
  background: var(--control-icon-hover-bg) !important;
  border-color: transparent !important;
  color: var(--control-icon-hover-color) !important;
  box-shadow: none !important;
}

.detailViewContainer.viewContent .detailViewTopTabsTextItem .tab-label,
.detailViewContainer.viewContent .detailViewTopTabsTextItem .tab-label strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  line-height: 1 !important;
}

.detailViewContainer.viewContent .detailViewTopTabsTextItem .tab-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  white-space: nowrap !important;
}

.detailViewContainer.viewContent .detailViewTopTabsTextItem .tab-label strong {
  display: block !important;
}


.detailViewContainer.viewContent .documentsSummaryWidgetContainer,
.detailViewContainer.viewContent .documentsSummaryWidget,
.detailViewContainer.viewContent .summaryWidgetContainer:has(.widgetContainer_documents),
.detailViewContainer.viewContent .documentsSummaryWidget .widget_header,
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents,
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .widget_header,
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .pull-right,
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .dropdown {
  overflow: visible !important;
}

.detailViewContainer.viewContent .documentsSummaryWidgetContainer,
.detailViewContainer.viewContent .documentsSummaryWidget,
.detailViewContainer.viewContent .summaryWidgetContainer:has(.widgetContainer_documents),
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents {
  position: relative !important;
  z-index: 4 !important;
}

.detailViewContainer.viewContent .documentsSummaryWidget .widget_header,
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .widget_header {
  position: relative !important;
  z-index: 6 !important;
}

.detailViewContainer.viewContent .documentsSummaryWidget .widget_contents,
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .widget_contents {
  position: relative !important;
  z-index: 1 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.detailViewContainer.viewContent .documentsSummaryActionIcon {
  font-size: 12px !important;
}

.detailViewContainer.viewContent .documentsSummaryActionLabel {
  line-height: 1 !important;
}

.detailViewContainer.viewContent .documentsSummaryActionCaret {
  margin-left: -1px !important;
}

/* ── Documents add-menu: clean compact professional dropdown ─────────────── */
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .dropdown-menu.doc-add-menu {
  min-width:    210px !important;
  padding:      6px !important;
  border:       1px solid var(--line) !important;
  border-radius: var(--view-control-radius, 8px) !important;
  box-shadow:   0 6px 24px rgba(28, 43, 58, 0.12) !important;
  background:   var(--color-card, #fff) !important;
}

/* Each action item link */
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .dropdown-menu > li > a {
  display:         flex !important;
  align-items:     center !important;
  gap:             10px !important;
  min-height:      0 !important;
  padding:         8px 10px !important;
  margin-bottom:   2px !important;
  border:          none !important;
  border-radius:   6px !important;
  background:      transparent !important;
  color:           var(--text) !important;
  font-size:       13px !important;
  font-weight:     500 !important;
  font-family:     var(--font-family) !important;
  text-decoration: none !important;
  transition:      background 0.12s ease, color 0.12s ease !important;
}
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .dropdown-menu > li:last-child > a {
  margin-bottom: 0 !important;
}
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .dropdown-menu > li > a:hover,
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .dropdown-menu > li > a:focus {
  background: rgba(var(--theme-primary-rgb, 0,120,212), 0.08) !important;
  color:      var(--color-primary-dark, var(--color-primary)) !important;
  border:     none !important;
  box-shadow: none !important;
}

/* Icon box inside each item */
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .dropdown-menu > li > a .documentsSummaryMenuIcon {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           30px !important;
  height:          30px !important;
  flex:            0 0 30px !important;
  border-radius:   6px !important;
  background:      rgba(var(--theme-primary-rgb, 0,120,212), 0.10) !important;
  color:           var(--color-primary-dark, var(--color-primary)) !important;
  font-size:       13px !important;
}

/* Label text */
.detailViewContainer.viewContent .summaryWidgetContainer .widgetContainer_documents .dropdown-menu > li > a .documentsSummaryMenuTitle {
  flex:        1 1 auto !important;
  font-size:   13px !important;
  font-weight: 500 !important;
  color:       inherit !important;
  white-space: nowrap !important;
}

.detailViewContainer.viewContent .documentsSummaryContents {
  padding: 14px 16px 16px !important;
}

.detailViewContainer.viewContent .documentsSummaryHead,
.detailViewContainer.viewContent .documentsSummaryRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

.detailViewContainer.viewContent .documentsSummaryHead {
  padding-bottom: 10px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.detailViewContainer.viewContent .documentsSummaryHead strong {
  display: block !important;
  color: #8a9caf !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.detailViewContainer.viewContent .documentsSummaryRow {
  padding: 10px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.detailViewContainer.viewContent .documentsSummaryRow:last-of-type {
  border-bottom: 0 !important;
}

.detailViewContainer.viewContent .documentsSummaryCol {
  min-width: 0 !important;
}

.detailViewContainer.viewContent .documentsSummaryPrimaryLink,
.detailViewContainer.viewContent .documentsSummaryFileName {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.detailViewContainer.viewContent .documentsSummaryPrimaryLink {
  color: #23384d !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.detailViewContainer.viewContent .documentsSummaryPrimaryLink:hover {
  color: var(--color-primary-dark) !important;
  text-decoration: underline !important;
}

.detailViewContainer.viewContent .documentsSummaryFileName {
  color: #6a7f93 !important;
  font-size: 12px !important;
}

.detailViewContainer.viewContent .documentsSummaryColActions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.detailViewContainer.viewContent .documentsSummaryIconAction {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--view-control-radius) !important;
  border: 1px solid #d9e4ef !important;
  background: #ffffff !important;
  color: #5f7890 !important;
  text-decoration: none !important;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease !important;
}

.detailViewContainer.viewContent .documentsSummaryIconAction:hover {
  background: rgba(var(--theme-primary-rgb), 0.08) !important;
  border-color: rgba(var(--theme-primary-rgb), 0.20) !important;
  color: var(--color-primary) !important;
}

.detailViewContainer.viewContent .documentsSummaryFooter {
  padding-top: 12px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.detailViewContainer.viewContent .documentsSummaryFooter .moreRecentDocuments {
  color: var(--color-primary-dark) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.detailViewContainer.viewContent .documentsSummaryWidget .widget_contents > .summaryWidgetContainer.noContent {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}


.detailViewContainer.viewContent .documentsSummaryWidget .widget_contents > .summaryWidgetContainer.noContent p {
  padding: 24px 18px !important;
  margin: 0 !important;
  color: #7a8ea2 !important;
  text-align: center !important;
}


/* ============================================================
   Moved from style.css: Detail view layout: detailview-table fieldLabel/fieldValue/tr
   ============================================================ */
/* -- Detail view layout -- */
#page .detailview-table td.fieldLabel,
#page .detailview-table td.fieldLabel span {
  background:  transparent !important;
  padding:     8px 16px 8px 0 !important;
  width:       200px !important;
  min-width:   200px !important;
  max-width:   200px !important;
  white-space: nowrap !important;
  overflow:    visible !important;
}

#page .detailview-table td.fieldValue,
td.fieldValue {
  padding:    8px 16px 8px 8px !important;
  background: transparent !important;
}

.detailview-table tr td {
  vertical-align: middle !important;
  border-bottom:  1px solid var(--line) !important;
}


/* ============================================================
   Moved from style.css: Detail view: alternating row colours
   ============================================================ */
#page .detailview-table tbody tr:nth-of-type(odd) td { background: var(--color-card) !important; }
#page .detailview-table tbody tr:nth-of-type(even) td { background: var(--color-row-alt) !important; }

/* ============================================================
   Moved from style.css: Related tabs navigation
   ============================================================ */
.related-tabs .nav-tabs > :is(li, li.tab-item),
.related-tabs .nav > li {
  float:       none !important;
  flex-shrink: 0 !important;
  margin:      0 !important;
  display:     flex !important;
  align-items: center !important;
  border:      none !important;
  border-bottom: none !important;
  padding:     0 !important;
  overflow:    visible !important;
}

.related-tabs .nav-tabs > :is(li, li.tab-item) > a {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  min-height:      var(--tab-chip-height, 34px) !important;
  height:          var(--tab-chip-height, 34px) !important;
  padding:         0 var(--tab-chip-padding-x, 16px) !important;
  border:          1px solid var(--tab-chip-border, var(--control-icon-border)) !important;
  border-bottom:   1px solid var(--tab-chip-border, var(--control-icon-border)) !important;
  border-radius:   var(--tab-chip-radius, var(--view-control-radius-sm)) !important;
  font-size:       12px !important;
  font-weight:     700 !important;
  color:           var(--tab-chip-text, var(--control-icon-color)) !important;
  background:      var(--tab-chip-bg, var(--control-icon-bg)) !important;
  white-space:     nowrap !important;
  transition:      background-color 0.15s, border-color 0.15s, color 0.15s !important;
  cursor:          pointer !important;
  gap:             0 !important;
  text-decoration: none !important;
  overflow:        visible !important;
  box-shadow:      none !important;
}

.related-tabs .nav-tabs > :is(li, li.tab-item) > a:hover {
  color:         var(--tab-chip-hover-text, var(--control-icon-hover-color)) !important;
  background:    var(--tab-chip-hover-bg, var(--control-icon-hover-bg)) !important;
  border-color:  var(--tab-chip-hover-bg, var(--control-icon-hover-border)) !important;
}

.related-tabs .nav-tabs > :is(li.active, li.tab-item.active) > a,
.related-tabs .nav-tabs > :is(li.active, li.tab-item.active) > a:hover,
.related-tabs .nav-tabs > :is(li.active, li.tab-item.active) > a:focus {
  color:         var(--tab-chip-active-text, var(--control-icon-hover-color)) !important;
  background:    var(--tab-chip-active-bg, var(--control-icon-hover-bg)) !important;
  border-color:  var(--tab-chip-active-bg, var(--control-icon-hover-border)) !important;
  font-weight:   700 !important;
}

/* Tab label */
.related-tabs .tab-label,
.related-tabs .tab-label strong {
  font-size:   13.5px !important;
  font-weight: inherit !important;
  color:       inherit !important;
}

.related-tabs .nav-tabs > li > a:hover .tab-icon {
  background: var(--control-icon-hover-bg) !important;
}
.related-tabs .nav-tabs > li.active > a .tab-icon,
.related-tabs .nav-tabs > li.tab-item.active > a .tab-icon {
  background: var(--control-icon-hover-bg) !important;
}

/* Icon colour */
.related-tabs .tab-icon i,
.related-tabs .tab-icon [class*="vicon"],
.related-tabs .tab-icon svg {
  font-size:   15px !important;
  color:       var(--control-icon-color) !important;
  fill:        currentColor !important;
  line-height: 1 !important;
}
.related-tabs .tab-icon i[style] {
  font-size: 15px !important;
}
.related-tabs .nav-tabs > li > a:hover .tab-icon i,
.related-tabs .nav-tabs > li > a:hover .tab-icon [class*="vicon"],
.related-tabs .nav-tabs > li > a:hover .tab-icon svg {
  color: var(--control-icon-hover-color) !important;
  fill:  currentColor !important;
}
.related-tabs .nav-tabs > li.active > a .tab-icon i,
.related-tabs .nav-tabs > li.active > a .tab-icon [class*="vicon"],
.related-tabs .nav-tabs > li.active > a .tab-icon svg {
  color: var(--control-icon-hover-color) !important;
  fill:  currentColor !important;
}

/* Icon images (svg/img inside tab-icon) */
.related-tabs .tab-icon > svg,
.related-tabs .tab-icon > img {
  width:      16px !important;
  height:     16px !important;
  max-width:  16px !important;
  max-height: 16px !important;
  display:    block !important;
  filter:     none !important;
}
.related-tabs .nav-tabs > li > a:hover .tab-icon > svg,
.related-tabs .nav-tabs > li > a:hover .tab-icon > img,
.related-tabs .nav-tabs > li.active > a .tab-icon > svg,
.related-tabs .nav-tabs > li.active > a .tab-icon > img {
  filter: none !important;
}

/* Badge */
.related-tabs .numberCircle.hide { display: none !important; }
.related-tabs .numberCircle {
  position:        absolute !important;
  top:             -4px !important;
  right:           -6px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  height:          16px !important;
  min-width:       16px !important;
  padding:         0 4px !important;
  border-radius:   8px !important;
  background:      var(--color-primary) !important;
  color:           var(--color-card) !important;
  font-size:       9px !important;
  font-weight:     700 !important;
  line-height:     1 !important;
  z-index:         2 !important;
  box-shadow:      0 0 0 2px var(--color-card, #ffffff) !important;
  box-sizing:      border-box !important;
}


/* ============================================================
   Moved from style.css: Custom tabs: fieldLabel and detailview-table
   ============================================================ */
/* -- fieldLabel same style for both detail view AND edit view uppercase readable weight consistent with button label style -- */
#customtabs .fieldLabel,
#customtabs td.fieldLabel,
#customtabs td.fieldLabel span,
#customtabs td.fieldLabel span.muted {
  font-family:    var(--font-family) !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  color:          rgba(var(--theme-primary-rgb), 0.84) !important;
  letter-spacing: 0 !important;
  line-height:    1.35 !important;
  text-transform: none !important;
  white-space:    nowrap !important;
  min-width:      0 !important;
  width:          auto !important;
  padding:        0 !important;
  vertical-align: middle !important;
  background:     transparent !important;
}

#customtabs .detailview-table {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0 2px;
}

/* -- Detail view label column fixed never truncate -- */
#customtabs .detailview-table td.fieldLabel {
  width:       200px !important;
  min-width:   200px !important;
  white-space: nowrap !important;
  overflow:    visible !important;
}

#customtabs .detailview-table td {
  padding:       8px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-light);
}

#customtabs .detailview-table tr:last-child td { border-bottom: none; }
#customtabs .detailview-table tr:hover td { background: var(--color-row-hover); }
#customtabs .detailview-table tr:nth-of-type(odd) td { background: var(--color-card); }
#customtabs .detailview-table tr:nth-of-type(even) td { background: var(--color-row-alt); }
#customtabs .blockData { background: var(--color-card); border-radius: var(--view-card-radius-xs); }

/* ============================================================
   Moved from style.css: Detail view: dvtCellLabel, dvtCellInfo, detailViewContents
   ============================================================ */
/* -- Detail view field labels broad net catch vtiger actual selectors Vtiger renders detail view labels with these typical class combos dvtCellLabel detailViewContents first-child class Label -- */

/* -- Cast wide any span div that contains the label detail view -- */
.dvtCellLabel,
.dvtCellLabel label,
td.dvtCellLabel,
.detailViewContents .dvtCellLabel,
.detailview .dvtCellLabel,
[class*="dvt"] td:nth-child(odd),
.detailViewContents td:nth-child(1),
.detailViewContents td:nth-child(3) {
  font-family:    var(--font-family) !important;
  font-size:      11px !important;
  font-weight:    500 !important;
  color:          var(--muted) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background:     transparent !important;
  padding:        8px 16px !important;
  white-space:    nowrap !important;
  width:          180px !important;
}

/* -- Values odd sibling cells -- */
.dvtCellInfo,
.dvtCellInfo span,
td.dvtCellInfo,
.detailViewContents .dvtCellInfo,
.detailViewContents td:nth-child(2),
.detailViewContents td:nth-child(4) {
  font-family: var(--font-family) !important;
  font-size:   13px !important;
  font-weight: 400 !important;
  color:       var(--text) !important;
  padding:     8px 16px !important;
}

/* Row borders */
.detailViewContents tr,
.detailViewContents tbody tr {
  border-bottom: 1px solid var(--line) !important;
}


/* ============================================================
   Moved from style.css: Detail view container block + related list containers
   ============================================================ */
.detailViewContainer .block {
    padding-left: 0px;
    padding-right: 0px;
}

#detailView .block h4 {
    height: auto;
}
/* -- RELATED LIST panel container pagination -- */

/* Wrap the related list table in a card matching fieldBlockContainer */
.relatedViewPageDiv,
.relatedContents {
  background:    var(--color-card) !important;
  border:        1px solid var(--line) !important;
  border-radius: 10px !important;
  overflow:      hidden !important;
  margin-bottom: 16px !important;
  box-shadow:    0 1px 4px rgba(28,43,58,0.05) !important;
}

/* Pagination bar */
.relatedViewPageDiv .listViewPagination,
.relatedContents .listViewPagination,
.relatedViewPageDiv .noOfEntriesDiv,
.relatedContents .noOfEntriesDiv {
  background:  var(--color-surface-muted) !important;
  border-top:  1px solid var(--line) !important;
  padding:     6px 14px !important;
  font-size:   12px !important;
  color:       var(--muted) !important;
}


/* ============================================================
   Moved from style.css: Summary widget containers and comment widget
   ============================================================ */
/* -- 4.activityStatus -- */

/* -- Widget container card -- */
.summaryWidgetContainer,
.summaryWidgetContainer:not(.noContent) {
  background:    var(--color-card) !important;
  border:        1px solid var(--line) !important;
  border-radius: var(--view-card-radius) !important;
  overflow:      hidden !important;
  margin-bottom: 16px !important;
  box-shadow:    0 1px 4px rgba(28,43,58,0.05) !important;
}

/* No-content empty state */
.summaryWidgetContainer.noContent {
  text-align: center !important;
  color:      var(--muted) !important;
  margin:10px
}

/* -- Widget header navy bar matching fieldBlockHeader -- */
.summaryWidgetContainer .widget_header,
#relatedActivities .widget_header,
div.summaryWidgetContainer > div.widget_header {
  background:      var(--navy) !important;
  padding:         10px 16px !important;
  margin:          0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  border-radius:   var(--view-card-radius) var(--view-card-radius) 0 0 !important;
  min-height:      40px !important;
  overflow:        hidden !important;
}

/* -- Title left side kill Bootstrap float -- */
.summaryWidgetContainer .widget_header h4,
.summaryWidgetContainer .widget_header h4.display-inline-block,
#relatedActivities .widget_header h4 {
  color:          var(--color-card) !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin:         0 !important;
  padding:        0 !important;
  line-height:    1 !important;
  float:          none !important;
  flex:           0 0 auto !important;
}

/* -- Buttons container right side kill Bootstrap float and inline margin -- */
.summaryWidgetContainer .widget_header .pull-left {
  float: none !important;
}
.summaryWidgetContainer .widget_header .pull-right {
  float:      none !important;
  margin-top: 0 !important;
  margin-left: auto !important;
  display:    flex !important;
  align-items: center !important;
  gap:         6px !important;
}

/* Add Task / Add Event buttons in header */
.summaryWidgetContainer .widget_header .btn.btn-default.addButton {
  background:   rgba(255,255,255,0.12) !important;
  border:       1px solid rgba(255,255,255,0.22) !important;
  color:        var(--color-card) !important;
  font-size:    11px !important;
  height:       26px !important;
  padding:      0 10px !important;
  border-radius: 5px !important;
  box-shadow:   none !important;
  gap:          4px !important;
}
.summaryWidgetContainer .widget_header .btn.btn-default.addButton:hover {
  background:  rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color:       var(--color-card) !important;
}

/* -- Widget contents area -- */
.summaryWidgetContainer .widget_contents {
  padding: 12px 16px !important;
}

/* -- Each activity row -- */
.summaryWidgetContainer .activityEntries {
  padding:       10px 16px !important;
  transition:    background 0.07s !important;
  position:      relative !important;
}
.summaryWidgetContainer .activityEntries:hover {
  background: #f5f8ff !important;
}

/* Remove Bootstrap row negative margins inside .media */
.summaryWidgetContainer .activityEntries .media .row {
  margin-left:  0 !important;
  margin-right: 0 !important;
  display:      flex !important;
  align-items:  center !important;
  flex-wrap:    nowrap !important;
}

/* -- Activity type icon column -- */
.summaryWidgetContainer .module-icon {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex:            0 0 36px !important;
  width:           36px !important;
  padding:         0 !important;
}
.summaryWidgetContainer .module-icon [class*="vicon-"] {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           32px !important;
  height:          32px !important;
  border-radius:   50% !important;
  background:      rgba(46,120,255,0.10) !important;
  color:           var(--accent) !important;
  font-size:       15px !important;
}
/* -- Task icon green tint -- */
.summaryWidgetContainer .module-icon .vicon-task {
  background: rgba(34,200,122,0.12) !important;
  color:      var(--ok) !important;
}
/* -- Call icon blue tint -- */
.summaryWidgetContainer .module-icon .vicon-call {
  background: rgba(46,120,255,0.10) !important;
  color:      var(--accent) !important;
}

/* -- Subject date column -- */
.summaryWidgetContainer .col-lg-7,
.summaryWidgetContainer .col-md-7,
.summaryWidgetContainer .col-sm-7 {
  flex:       1 1 auto !important;
  min-width:  0 !important;
  padding:    0 8px !important;
}

/* Subject link */
.summaryWidgetContainer .summaryViewEntries a {
  color:           var(--text) !important;
  font-weight:     500 !important;
  font-size:       13px !important;
  text-decoration: none !important;
  white-space:     nowrap !important;
  overflow:        hidden !important;
  text-overflow:   ellipsis !important;
  max-width:       100% !important;
  display:         inline-block !important;
}
.summaryWidgetContainer .summaryViewEntries a:hover {
  color:           var(--accent) !important;
  text-decoration: underline !important;
}

/* Edit/delete icon links in summaryViewEntries */
.summaryWidgetContainer .summaryViewEntries .fa-pencil,
.summaryWidgetContainer .summaryViewEntries .fa-trash {
  font-size:  12px !important;
  color:      var(--muted) !important;
  padding:    2px 3px !important;
  transition: color 0.12s !important;
}
.summaryWidgetContainer .summaryViewEntries .fa-pencil:hover { color: var(--accent) !important; }
.summaryWidgetContainer .summaryViewEntries .fa-trash:hover { color: var(--red) !important; }

/* Date string */
.summaryWidgetContainer .col-lg-7 > span strong,
.summaryWidgetContainer .col-md-7 > span strong {
  font-size:   11px !important;
  font-weight: 500 !important;
  color:       var(--muted) !important;
}

/* -- Status badge edit column -- */
.summaryWidgetContainer .activityStatus,
.summaryWidgetContainer .col-lg-4.activityStatus {
  flex:        0 0 auto !important;
  width:       auto !important;
  padding:     0 0 0 8px !important;
  line-height: normal !important;
}
.summaryWidgetContainer .activityStatus .pull-right {
  float:       none !important;
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
}

/* Picklist Add/Edit modals — match label colour to the rest of the CRM
   without dropping `.fieldLabel`'s `padding: 0` on top of Bootstrap's
   `.control-label` (that combo strips the 7px top padding and the label
   stops aligning with the field). Only colour is overridden. */
form[name="addItemForm"] .form-group .control-label,
#renameItemForm .form-group .control-label {
  color: rgba(var(--theme-primary-rgb), 0.84) !important;
}

/* "Create a New List" / Edit Custom View modal — tidier label colour
   + form-group rhythm + section divider before the columns selector.
   Scoped to #CustomView so it only fires on this form. */
#CustomView .form-group {
  margin-bottom: 18px;
  padding:       0 4px;
}
#CustomView .form-group > label {
  display:       block;
  margin-bottom: 8px;
  font-size:     12px;
  font-weight:   600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color:         rgba(var(--theme-primary-rgb), 0.84);
}
#CustomView .checkbox-inline {
  margin-top:    8px;
  padding-left:  20px;
  color:         var(--color-text, #1C2B3A);
  font-weight:   500;
}
/* Section divider above CHOOSE COLUMNS row — gives the modal a clear
   "details on top / column picker below" rhythm. */
#CustomView .form-group + .form-group {
  border-top: 1px solid var(--line, #eef0f3);
  padding-top: 18px;
}

/* Import wizard (Products / Contacts / any module import) — colour all
   step labels with the same primary-tinted theme colour every other
   field label uses (.fieldLabel rule on line 7054). Targets table
   headers (Step 3 column headers: Header / Row 1 / CRM Fields / Default
   Value) plus the first-column label cells in Step 1 / Step 2 / Step 3
   and the per-row CSV-header span. Data cells (second column onward)
   keep default text colour so values stand visually distinct from labels. */
.importBlockContainer th,
.importBlockContainer table > tbody > tr > td:first-child,
.importBlockContainer span[name="header_name"] {
  color: rgba(var(--theme-primary-rgb), 0.84) !important;
}

/* Step 3 mapping table — wrap the per-row "Header / Row 1 / CRM Fields
   / Default Value" grid as a soft card with tidier headers and lighter
   row dividers. The default `.table-bordered` styling renders heavy
   borders on every cell which makes the long mapping list visually
   noisy. */
.importBlockContainer table.table-bordered {
  border:          1px solid var(--line, #e2e6ec) !important;
  border-radius:   8px !important;
  border-collapse: separate !important;
  overflow:        hidden;
}
.importBlockContainer table.table-bordered > thead > tr > th {
  padding:       12px 16px !important;
  background:    var(--bg-alt, #f7f9fc) !important;
  border:        0 !important;
  border-bottom: 1px solid var(--line, #e2e6ec) !important;
  font-size:     12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.importBlockContainer table.table-bordered > tbody > tr > td {
  padding:       12px 16px !important;
  border:        0 !important;
  border-bottom: 1px solid var(--line, #eef0f3) !important;
  vertical-align: middle !important;
}
.importBlockContainer table.table-bordered > tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* =================================================================
   Picklist Settings page (Settings → Picklist)
   =================================================================
   Layout-only fixes; the visible styles (label colour/font, button
   colour, etc.) come from the CRM's existing global rules:
     - `.fieldLabel`     → font, primary-tinted colour (line 7054)
     - `.btn-primary`    → primary-tinted pill for the Add Value button
     - `.inputElement`   → standard 32px inputs / selects
   So this block only handles things the CRM doesn't already have
   styles for: flex row layout, tab pill chrome, table header chrome,
   and the role-tab grid offset.
*/

/* Upper section — flex layout so the two dropdown rows align cleanly */
.picklistSettingsPage .detailViewInfo {
  background:    #ffffff;
  border:        1px solid var(--line, #e2e6ec);
  border-radius: 8px;
  padding:       18px 22px;
  margin:        8px 0 18px;
}
.picklistSettingsPage .detailViewInfo .row.form-group {
  display:      flex !important;
  align-items:  center;
  margin:       0 0 10px;
}
.picklistSettingsPage .detailViewInfo .row.form-group:last-child { margin-bottom: 0; }
.picklistSettingsPage .detailViewInfo .control-label,
.picklistSettingsPage .detailViewInfo .fieldLabel {
  flex: 0 0 200px;
  max-width: 200px;
  text-align: left !important;
  padding-right: 16px;
}
.picklistSettingsPage .detailViewInfo .fieldValue { flex: 0 0 320px; max-width: 320px; padding: 0; }
.picklistSettingsPage .detailViewInfo #modulePickListContainer br { display: none !important; }

/* Tabs — pill-style with the active tab joined to the panel below.
   Tab labels inherit colour from `.fieldLabel` family — no per-tab
   colour rule needed. */
.picklistSettingsPage .nav-tabs.massEditTabs {
  border-bottom: 1px solid var(--line, #e2e6ec);
  margin-top: 8px;
  padding-left: 6px;
}
.picklistSettingsPage .nav-tabs.massEditTabs > li { margin-right: 4px; margin-bottom: -1px; }
.picklistSettingsPage .nav-tabs.massEditTabs > li > a {
  padding: 10px 18px !important;
  border: 1px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  color: rgba(var(--theme-primary-rgb), 0.84) !important;
}
.picklistSettingsPage .nav-tabs.massEditTabs > li > a:hover { background: rgba(var(--theme-primary-rgb), 0.06) !important; }
.picklistSettingsPage .nav-tabs.massEditTabs > li.active > a {
  background: #ffffff !important;
  border-color: var(--line, #e2e6ec) var(--line, #e2e6ec) #ffffff !important;
}
.picklistSettingsPage .tab-content.layoutContent {
  border: 1px solid var(--line, #e2e6ec) !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  padding: 18px 22px !important;
  background: #ffffff;
}

/* "Values assigned to a role" tab — strip the bootstrap col-2 offset so
   the rows aren't squeezed into the middle of the panel, and stretch
   the inner control column. */
.picklistSettingsPage #AssignedToRoleLayout > [class*="col-"][class*="-2"] { display: none !important; }
.picklistSettingsPage #AssignedToRoleLayout > [class*="col-"][class*="-10"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.picklistSettingsPage #AssignedToRoleLayout .form-group {
  display: flex !important;
  align-items: center;
  margin: 0 0 14px !important;
}
.picklistSettingsPage #AssignedToRoleLayout .form-group > .control-label {
  flex: 0 0 180px;
  max-width: 180px;
  padding: 0 16px 0 0 !important;
  text-align: center !important;
}
.picklistSettingsPage #AssignedToRoleLayout .form-group > .controls {
  flex: 1 1 auto;
  max-width: 720px;
  padding: 0 !important;
}
.picklistSettingsPage #AssignedToRoleLayout .select2-container { width: 100% !important; }

/* Picklist values table — header chrome + per-row hover + reveal-on-hover
   action icons. The Add Value button uses the global `.btn-primary` style
   set in the template (no override needed here). */
#pickListValuesTable {
  border: 1px solid var(--line, #e2e6ec) !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  overflow: hidden !important;
}
#pickListValuesTable thead .listViewHeaders th {
  position: relative;
  padding: 14px 16px !important;
  background: var(--bg-alt, #f7f9fc) !important;
}
#pickListValuesTable thead .listViewHeaders th #addItem {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  float: none !important;
}
#pickListValuesTable tbody .pickListValue td {
  padding: 12px 16px !important;
  background: #ffffff;
  border-bottom: 1px solid var(--line, #eef0f3) !important;
}
#pickListValuesTable tbody .pickListValue:last-child td { border-bottom: none !important; }
#pickListValuesTable tbody .pickListValue:hover td { background: var(--bg-alt, #f7f9fc); }
#pickListValuesTable tbody .pickListValue .picklistActions {
  opacity: 0;
  transition: opacity 0.15s ease;
}
#pickListValuesTable tbody .pickListValue:hover .picklistActions { opacity: 1; }
#pickListValuesTable tbody .pickListValue .picklistActions a {
  color: var(--muted, #6b7280);
  padding: 4px 6px;
  border-radius: 4px;
}
#pickListValuesTable tbody .pickListValue .picklistActions a:hover { color: var(--color-primary, #2563eb); }
#pickListValuesTable tbody .pickListValue .picklistActions a.deleteItem:hover { color: var(--red, #dc2626); }

/* Picklist status badge */
.summaryWidgetContainer .activityStatus .picklist-color {
  display:       inline-block !important;
  padding:       2px 10px !important;
  border-radius: 20px !important;
  font-size:     10.5px !important;
  font-weight:   600 !important;
  line-height:   18px !important;
  white-space:   nowrap !important;
}

/* Edit status pencil icon */
.summaryWidgetContainer .editStatus {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           24px !important;
  height:          24px !important;
  border-radius:   50% !important;
  background:      transparent !important;
  cursor:          pointer !important;
  transition:      background 0.12s !important;
  color:           var(--muted) !important;
}
.summaryWidgetContainer .editStatus:hover {
  background: rgba(46,120,255,0.10) !important;
  color:      var(--accent) !important;
}
.summaryWidgetContainer .editStatus .fa-pencil {
  font-size: 11px !important;
  color:     inherit !important;
}

/* -- Row divider -- */
.summaryWidgetContainer .activityEntries ~ hr,
.summaryWidgetContainer hr {
  margin:     0 !important;
  border:     none !important;
  border-top: 1px solid var(--line) !important;
}

/* -- Show More link -- */
.summaryWidgetContainer .moreRecentActivities {
  display:         block !important;
  text-align:      center !important;
  padding:         10px !important;
  font-size:       12px !important;
  font-weight:     500 !important;
  color:           var(--accent) !important;
  text-decoration: none !important;
  border-top:      1px solid var(--line) !important;
  transition:      background 0.1s !important;
}
.summaryWidgetContainer .moreRecentActivities:hover {
  background: var(--color-row-hover) !important;
  text-decoration: none !important;
}

/* -- SCROLL CONTAINERS all heights overflow via CSS only longer sets any inline scroll styles -- */

/* Overlay edit view modal body */
.overlayPage .editViewContents {
  max-height:  calc(100vh - 160px) !important;
  overflow-y:  auto !important;
  overflow-x:  hidden !important;
}

/* Overlay detail view modal body */
.overlayDetail .modal-body {
  max-height:  calc(100vh - 160px) !important;
  overflow-y:  auto !important;
  overflow-x:  hidden !important;
}

/* Tag holders in modals */
.currentTagHolder,
.currentTagMenu,
.detailShowAllModal .currentTagMenu {
  max-height: 250px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* -- COMMENT WIDGET div widgetContainer_comments Structure from devtools div summaryWidgetContainer div widgetContainer_comments div widget_header title left save btn right div widget_contents div commentContainer recentComments div commentTitle div addCommentBlock div row div col-lg- div commentTextArea textarea commentcontent -- */

/* -- Header title left action buttons right -- */
.widgetContainer_comments .widget_header,
div.summaryWidgetContainer .widgetContainer_comments .widget_header {
  background:      var(--navy) !important;
  padding:         10px 16px !important;
  margin:          0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  border-radius:   10px 10px 0 0 !important;
  min-height:      40px !important;
}

/* -- Title text left side -- */
.widgetContainer_comments .widget_header h4,
.widgetContainer_comments .widget_header .widget-title {
  color:          var(--color-card) !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin:         0 !important;
  padding:        0 !important;
  line-height:    1 !important;
  flex:           1 1 auto !important;
  text-align:     left !important;
}

/* -- Any buttons links header right side -- */
.widgetContainer_comments .widget_header .pull-right,
.widgetContainer_comments .widget_header .addButton,
.widgetContainer_comments .widget_header button,
.widgetContainer_comments .widget_header a.btn {
  float:       none !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* -- Contents area -- */
.widgetContainer_comments .widget_contents {
  padding: 12px 16px !important;
  background: var(--color-card) !important;
}

/* -- Comment textarea -- */
.widgetContainer_comments .commentTextArea,
.widgetContainer_comments div.commentTextArea {
  margin-bottom: 8px !important;
}

.widgetContainer_comments textarea.commentcontent,
.widgetContainer_comments .commentcontent {
  width:         100% !important;
  min-height:    72px !important;
  border:        1px solid var(--field-border) !important;
  border-radius: 6px !important;
  padding:       8px 12px !important;
  font-size:     var(--field-font-size) !important;
  font-family:   var(--font-family) !important;
  color:         var(--text) !important;
  background:    var(--color-card) !important;
  resize:        vertical !important;
  box-shadow:    none !important;
  transition:    border-color 0.15s !important;
  box-sizing:    border-box !important;
}
.widgetContainer_comments textarea.commentcontent:focus {
  border-color: var(--accent) !important;
  box-shadow:   0 0 0 3px rgba(46,120,255,0.08) !important;
  outline:      none !important;
}

/* -- Button row flex Attach Files left Post right -- */
/* Override Bootstrap floats and inline margin-bottom:10px */
.widgetContainer_comments .addCommentBlock > .row,
.widgetContainer_comments .addCommentBlock .row + .row {
  display:        flex !important;
  align-items:    center !important;
  flex-wrap:      nowrap !important;
  margin:         6px 0 0 0 !important;
}

/* -- Both col-xs- inside button row reset Bootstrap float width -- */
.widgetContainer_comments .addCommentBlock .row .col-xs-6 {
  float:         none !important;
  width:         auto !important;
  padding:       0 !important;
  flex:          0 0 auto !important;
}

/* -- pull-left col Attach Files visually LEFT order -- */
.widgetContainer_comments .addCommentBlock .row .col-xs-6.pull-left {
  float:        none !important;
  order:        1 !important;
  display:      flex !important;
  align-items:  center !important;
  gap:          6px !important;
}

/* -- pull-right col Post button visually RIGHT order pushed right -- */
.widgetContainer_comments .addCommentBlock .row .col-xs-6.pull-right {
  float:        none !important;
  order:        2 !important;
  margin-left:  auto !important;
  padding-top:  0 !important;
}

/* Attach Files button */
.widgetContainer_comments .fileUploadBtn.btn.btn-sm.btn-primary,
.widgetContainer_comments .fileUploadContainer .btn-primary {
  height:        30px !important;
  padding:       0 12px !important;
  border-radius: 6px !important;
  font-size:     12px !important;
  font-weight:   500 !important;
  background:    var(--btn-bg) !important;
  border:        1px solid var(--btn-border) !important;
  color:         var(--btn-color) !important;
  display:       inline-flex !important;
  align-items:   center !important;
  gap:           5px !important;
  cursor:        pointer !important;
  box-shadow:    var(--btn-shadow) !important;
}
.widgetContainer_comments .fileUploadBtn.btn.btn-sm.btn-primary:hover {
  background:   var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-border) !important;
  color:        var(--btn-hover-color) !important;
}

/* Post button */
.widgetContainer_comments .addCommentBlock .btn-primary.saveComment,
.widgetContainer_comments .addCommentBlock a.btn-primary,
.widgetContainer_comments .addCommentBlock button.btn-primary:not(.fileUploadBtn) {
  height:        30px !important;
  padding:       0 16px !important;
  border-radius: 6px !important;
  font-size:     12px !important;
  font-weight:   500 !important;
  background:    var(--accent) !important;
  border-color:  var(--accent) !important;
  color:         var(--color-card) !important;
  display:       inline-flex !important;
  align-items:   center !important;
}
.widgetContainer_comments .addCommentBlock .btn-primary.saveComment:hover {
  background:   var(--acc-h) !important;
  border-color: var(--acc-h) !important;
}

/* File size info icon */
.widgetContainer_comments .uploadFileSizeLimit {
  font-size: 12px !important;
  color:     var(--muted) !important;
}

/* -- Recent comments list -- */
.widgetContainer_comments .recentComments .commentDetails,
.widgetContainer_comments .commentEntries {
  padding:       10px 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.widgetContainer_comments .recentComments .commentDetails:last-child,
.widgetContainer_comments .commentEntries:last-child {
  border-bottom: none !important;
}

/* Comment author + date */
.widgetContainer_comments .commentAuthor,
.widgetContainer_comments .commentedUser {
  font-size:   11px !important;
  font-weight: 600 !important;
  color:       var(--text) !important;
}
.widgetContainer_comments .commentDate,
.widgetContainer_comments .commentTime {
  font-size: 11px !important;
  color:     var(--muted) !important;
}

/* Comment body text */
.widgetContainer_comments .commentDetails .commentContent,
.widgetContainer_comments .commentMessage {
  font-size:   12.5px !important;
  color:       var(--text) !important;
  line-height: 1.5 !important;
  margin-top:  3px !important;
}

.summaryWidgetContainer {
    padding: 0px;
}

/*.summaryWidgetContainer .widget_contents {
    margin-top: 0px;
}*/


/* ============================================================
   Moved from style.css: Detail view container viewContent tab rules
   ============================================================ */
.detailViewContainer.viewContent
  :is(.detailViewTopTabsIconItem > a, .detailViewTopTabs > li[data-module] > a) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 3px !important;
  background: transparent !important;
  color: var(--control-icon-color) !important;
  overflow: visible !important;
}

.detailViewContainer.viewContent
  :is(.detailViewTopTabsIconItem .tab-icon, .detailViewTopTabs > li[data-module] .tab-icon, .related-tabs .tab-icon) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 1px solid var(--control-icon-border) !important;
  border-radius: var(--view-control-radius-sm) !important;
  background: var(--control-icon-bg) !important;
  color: var(--control-icon-color) !important;
  box-shadow: var(--control-icon-shadow) !important;
  line-height: 1 !important;
  overflow: visible !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

.detailViewContainer.viewContent
  :is(.detailViewTopTabsIconItem > a:hover .tab-icon, .detailViewTopTabsIconItem.active .tab-icon, .detailViewTopTabs > li[data-module] > a:hover .tab-icon, .detailViewTopTabs > li.active > a .tab-icon, .related-tabs .nav-tabs > li > a:hover .tab-icon, .related-tabs .nav-tabs > li.active > a .tab-icon) {
  border-color: var(--control-icon-hover-border) !important;
  background: var(--control-icon-hover-bg) !important;
  color: var(--control-icon-hover-color) !important;
  box-shadow: var(--control-icon-hover-shadow) !important;
}

.detailViewContainer.viewContent
  :is(.detailViewTopTabsIconItem .tab-icon, .detailViewTopTabs > li[data-module] .tab-icon, .related-tabs .tab-icon)
  :is(i, .fa, [class*="vicon"], [class*="glyphicon"], [class*="icon"], svg) {
  color: inherit !important;
  fill: currentColor !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.detailViewContainer.viewContent
  :is(.detailViewTopTabsTextItem > a, #customtabs .nav-tabs > li > a, .related-tabs .nav-tabs > li.detailViewTopTabsTextItem > a) {
  min-height: var(--tab-chip-height) !important;
  height: var(--tab-chip-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 var(--tab-chip-padding-x) !important;
  border: 1px solid var(--tab-chip-border) !important;
  border-radius: var(--tab-chip-radius) !important;
  background: var(--tab-chip-bg) !important;
  color: var(--tab-chip-text) !important;
  font-family: var(--font-family) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.detailViewContainer.viewContent
  :is(.detailViewTopTabsTextItem > a strong, #customtabs .nav-tabs > li > a strong, .related-tabs .nav-tabs > li.detailViewTopTabsTextItem > a strong) {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
}

.detailViewContainer.viewContent
  :is(.detailViewTopTabsTextItem > a:hover, .detailViewTopTabsTextItem.active > a, #customtabs .nav-tabs > li > a:hover, #customtabs .nav-tabs > li.active > a, .related-tabs .nav-tabs > li.detailViewTopTabsTextItem > a:hover, .related-tabs .nav-tabs > li.detailViewTopTabsTextItem.active > a) {
  border-color: var(--tab-chip-active-bg) !important;
  background: var(--tab-chip-active-bg) !important;
  color: var(--tab-chip-active-text) !important;
}



/* ============================================================
   Moved from style.css: Detail view dv-row / dv-col layout and edit action pencil
   ============================================================ */
/* -- DETAIL VIEW div row layout dv-row dv-col Same pattern edit view explicit row per pair fields -- */

/* -- Row wrapper flexbox all cols row stretch equal height -- */
.dv-row {
  display:      flex !important;
  flex-wrap:    wrap !important;
  align-items:  stretch !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}
.dv-row::after { content: ''; display: table; clear: both; }

/* Alternating row colours for detail view */
.dv-row:nth-of-type(odd) > .dv-col { background: var(--color-card) !important; }
.dv-row:nth-of-type(even) > .dv-col { background: var(--color-row-alt) !important; }

/* -- Field cell: always exactly 50% wide so items wrap 2-per-visual-row.
   Using flex: 0 0 50% (no grow/shrink, fixed 50% basis) prevents the
   previous flex:1 1 0% / nowrap design from squashing surplus columns
   (e.g. tax fields rendered inside an unclosed dv-row) to 25% each. -- */
.dv-col {
  display:         flex !important;
  flex-direction:  column !important;
  justify-content: flex-start !important;
  flex:            0 0 50% !important;
  width:           50% !important;
  max-width:       50% !important;
  min-width:       0 !important;
  padding:         10px 20px !important;
  box-sizing:      border-box !important;
  float:           none !important;
  position:        relative !important;
  border-bottom:   1px solid var(--line) !important;
  min-height:      52px !important;
}

/* Override Bootstrap col-md-* float/width inside dv-row */
.dv-row > [class*="col-"] {
  float:     none !important;
  width:     50% !important;
  max-width: 50% !important;
}

/* -- Last row remove bottom border -- */
.dv-row:last-child .dv-col { border-bottom: none !important; }

/* Column divider */
.dv-row > .dv-col:not(:last-child) {
  border-right: 1px solid var(--line) !important;
}

/* Full-width field */
.dv-col-full {
  flex:         0 0 100% !important;
  width:        100% !important;
  border-right: none !important;
}


.dv-col .fieldValue {
  font-size:   var(--field-font-size) !important;
  font-weight: var(--field-font-weight) !important;
  color:       var(--field-color) !important;
  padding:     0 !important;
  width:       100% !important;
  max-width:   100% !important;
  background:  transparent !important;
  display:     block !important;
  position:    static !important;
}

/* -- Value span important can hide -- */
.dv-col .fieldValue .value {
  display:     block;
  word-break:  break-word;
  padding-right: 20px;
}

/* -- Edit span hidden default important can show -- */
.dv-col .fieldValue .edit,
td.fieldValue .edit {
  display:    none;
  width:      100% !important;
  max-width:  100% !important;
  box-sizing: border-box !important;
  min-width:  0 !important;
}

/* -- Edit action pencil detail view dv-col summary view fieldValue -- */

/* Position: anchored to the cell, hidden by default */
.dv-col .fieldValue .action,
td.fieldValue .action {
  position:    absolute !important;
  top:         8px !important;
  right:       8px !important;
  transform:   none !important;
  display:     none !important;
  z-index:     2 !important;
  line-height: 1 !important;
}

/* Parent cell needs position:relative to anchor the pencil */
td.fieldValue {
  position: relative !important;
}

/* -- Show hover only when hasn locked hide the -- */
.dv-col:hover .fieldValue .action,
tr.summaryViewEntries:hover td.fieldValue .action {
  display: block !important;
}

/* -- Hide when locked hide editAction the action the span -- */
.dv-col:hover .fieldValue .action:has(.editAction.hide),
.dv-col .fieldValue .action:has(.editAction.hide),
tr.summaryViewEntries:hover td.fieldValue .action:has(.editAction.hide),
td.fieldValue .action:has(.editAction.hide) {
  display: none !important;
}

/* Fallback: hide the icon itself when locked */
.dv-col .fieldValue .action .editAction.hide,
td.fieldValue .action .editAction.hide {
  display: none !important;
}

/* Hide when locked via jQuery .hide() inline style */
.dv-col:hover .fieldValue .action:has(.editAction[style*="display: none"]),
.dv-col:hover .fieldValue .action:has(.editAction[style*="display:none"]),
tr.summaryViewEntries:hover td.fieldValue .action:has(.editAction[style*="display: none"]),
tr.summaryViewEntries:hover td.fieldValue .action:has(.editAction[style*="display:none"]) {
  display: none !important;
}

/* -- Simple edit pencil same style for both views -- */
.dv-col .fieldValue .action .editAction,
td.fieldValue .action .editAction {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           18px !important;
  height:          18px !important;
  border-radius:   0 !important;
  background:      transparent !important;
  color:           var(--color-primary-dark) !important;
  font-size:       12px !important;
  cursor:          pointer !important;
  padding:         0 !important;
  box-shadow:      none !important;
  transition:      color 0.15s ease, opacity 0.15s ease !important;
  line-height:     1 !important;
}
.dv-col .fieldValue .action .editAction:hover,
td.fieldValue .action .editAction:hover {
  background: transparent !important;
  box-shadow: none !important;
  color:      var(--color-primary) !important;
}

/* ============================================================
   LINE ITEMS — DETAIL VIEW
   Targets: div.details.block ▸ .lineItemTableDiv ▸ .lineItemsTable
   ------------------------------------------------------------
   IMPORTANT: every selector uses `>` direct-child combinators
   so nested tables inside a cell (e.g. the Time / Length /
   Height sub-table inside the QUANTITY cell) DON'T inherit
   our column-label-row / data-row styling and don't pick up
   Bootstrap's .table-bordered cell borders.
   ============================================================ */

/* Card shell (main items table + totals table) — share one rule.
   The template no longer adds `table-bordered` to these tables (see
   LineItemsDetail.tpl), so the wrapper's outline + radius + overflow
   compose cleanly without fighting Bootstrap's per-cell 1px borders. */
.details.block .lineItemTableDiv,
.details.block > .lineItemsTable {
  border:        1px solid var(--line) !important;
  border-radius: var(--view-card-radius) !important;
  overflow:      hidden !important;
  margin-bottom: 16px !important;
}

/* Base reset for the directly-owned .lineItemsTable */
.lineItemTableDiv > .lineItemsTable,
.details.block > .lineItemsTable {
  width: 100% !important; margin: 0 !important;
  border-collapse: collapse !important;
  background: var(--color-card) !important;
  font-size: 13px !important;
}

/* Block-header banner ("Item Details · Currency · Tax Mode") */
.lineItemTableDiv > .lineItemsTable > thead > tr > th.lineItemBlockHeader {
  padding: 12px 16px !important;
  background: rgba(var(--theme-primary-rgb), 0.08) !important;
  color: var(--color-primary-dark) !important;
  font-size: 12px !important; font-weight: var(--font-weight-bold) !important;
  border: 0 !important; border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  white-space: nowrap !important;
}
/* Right-most header cell hosts the Create Job action button (the Tax
   Mode label sitting alongside is hidden via inline style in the .tpl).
   We deliberately DON'T use `display: flex` here — flex on a <th>
   collapses its table-cell semantics, which breaks the colspan layout
   so the cell no longer aligns with the data columns underneath. Plain
   table-cell + right-aligned button is enough. */
.lineItemTableDiv > .lineItemsTable > thead > tr > th.lineItemBlockHeader--actions {
  text-align: right !important;
}
.lineItemTableDiv > .lineItemsTable > thead > tr > th.lineItemBlockHeader--actions
    .lineItemBlockHeader__label { white-space: nowrap; }
.lineItemTableDiv > .lineItemsTable > thead > tr > th.lineItemBlockHeader--actions
    .lineItemCreateJob { padding: 4px 12px !important; font-size: 12px !important; line-height: 1.4 !important; }

/* Linked-job chip rendered below the product name when a line item already
   has an associated Job. View link opens the Job's RecordQuickPreview in a
   modal; pencil icon navigates to the Job's edit form. */
td .lineItemJobLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 8px;
  background: rgba(var(--theme-primary-rgb), 0.08);
  border: 1px solid rgba(var(--theme-primary-rgb), 0.22);
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1;
}
td .lineItemJobLink .lineItemJobView {
  color: var(--color-primary, #2563eb) !important;
  font-weight: 600;
  text-decoration: none !important;
}
td .lineItemJobLink .lineItemJobView:hover { text-decoration: underline !important; }
td .lineItemJobLink .lineItemJobEdit {
  color: var(--muted, #64748b) !important;
  margin-left: 2px;
  padding: 2px 4px;
  border-radius: 3px;
  text-decoration: none !important;
  transition: color 0.15s ease, background 0.15s ease;
}
td .lineItemJobLink .lineItemJobEdit:hover {
  color: var(--color-primary, #2563eb) !important;
  background: rgba(var(--theme-primary-rgb), 0.12);
}

/* Job title — bold display of the linked Job's subject, rendered on its
   own line directly under the chip. Inline pencil icon opens the Job
   edit overlay (same handler as the chip's pencil). ShopVOX-style:
   the title carries more visual weight than the chip itself because
   it's the user-facing identifier of what's being made. */
td .lineItemJobTitle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
}
td .lineItemJobTitle .lineItemJobTitle__label {
  font-weight: 700;
  color: var(--color-text, #1f2937);
  word-break: break-word;
}
td .lineItemJobTitle .lineItemJobTitleEdit {
  color: var(--muted, #64748b) !important;
  padding: 2px 4px;
  border-radius: 3px;
  text-decoration: none !important;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
td .lineItemJobTitle .lineItemJobTitleEdit:hover {
  color: var(--color-primary, #2563eb) !important;
  background: rgba(var(--theme-primary-rgb), 0.12);
}

/* Column label row (1st row in tbody — "ITEM NAME · QTY · COST · …") */
.lineItemTableDiv > .lineItemsTable > tbody > tr:first-child > td {
  padding: 9px 12px !important;
  background: var(--color-surface-muted) !important;
  color: var(--color-text-label) !important;
  font-size: 11px !important; font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase !important; letter-spacing: .04em !important;
  white-space: nowrap !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important;
}
.lineItemTableDiv > .lineItemsTable > tbody > tr:first-child .redColor { color: var(--red) !important; }

/* Data rows */
.lineItemTableDiv > .lineItemsTable > tbody > tr + tr > td {
  padding: 12px !important; vertical-align: top !important;
  border: 0 !important; border-top: 1px solid var(--line) !important;
}
.lineItemTableDiv > .lineItemsTable > tbody > tr + tr:hover > td { background: var(--color-surface-light) !important; }

/* ── Time / Length / Height / Total Area sub-table inside a cell ──
   The template emits a small <table> inside the QUANTITY td when the
   pricing type is TIME or MEASURE. Without these resets it inherits
   .table-bordered's cell borders + our column-label styling, which is
   why "TIME 1" was rendering as a bordered uppercase header. */
.lineItemTableDiv > .lineItemsTable > tbody > tr > td > table {
  border: 0 !important; margin-top: 6px !important;
  background: transparent !important;
  width: auto !important;
}
.lineItemTableDiv > .lineItemsTable > tbody > tr > td > table td {
  border: 0 !important; background: transparent !important;
  padding: 0 14px 0 0 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 13px !important; font-weight: normal !important;
  vertical-align: top !important;
}
.lineItemTableDiv > .lineItemsTable > tbody > tr > td > table label {
  display: block !important; margin: 0 0 1px !important;
  font-size: 10.5px !important; font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important; letter-spacing: .04em !important;
}
.lineItemTableDiv > .lineItemsTable > tbody > tr > td > table strong {
  font-size: 13px !important; font-weight: var(--font-weight-semibold) !important;
  color: var(--text) !important;
}

/* Product name link (h5 → fieldValue) */
.lineItemTableDiv h5 { margin: 0 0 4px !important; font-size: 13px !important; }
.lineItemTableDiv h5 a.fieldValue {
  color: var(--color-primary) !important; font-weight: var(--font-weight-semibold) !important;
  text-decoration: none !important;
}
.lineItemTableDiv h5 a.fieldValue:hover {
  color: var(--color-primary-dark) !important; text-decoration: underline !important;
}

/* Selling-price cell — list price (1st div) prominent, sub-rows muted */
.lineItemTableDiv > .lineItemsTable > tbody > tr > td[style*="white-space: nowrap"] > div:first-child {
  font-weight: var(--font-weight-semibold) !important; margin-bottom: 6px !important;
}
.lineItemTableDiv > .lineItemsTable > tbody > tr > td[style*="white-space: nowrap"] > div + div {
  font-size: 12px !important; color: var(--muted) !important; margin-top: 3px !important;
}

/* Inline popover-trigger link (Discount / Tax / Charges) */
a.inventoryLineItemDetails {
  color: var(--color-primary) !important;
  font-size: 12px !important; font-weight: var(--font-weight-semibold) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(var(--theme-primary-rgb), 0.45) !important;
}
a.inventoryLineItemDetails:hover {
  color: var(--color-primary-dark) !important;
  border-bottom: 1px solid var(--color-primary-dark) !important;
}

/* Right-aligned numeric cells (Total · Net Price) — secondary lines muted */
.lineItemTableDiv > .lineItemsTable > tbody > tr > td > div[align="right"] {
  text-align: right !important; font-weight: var(--font-weight-semibold) !important;
}
.lineItemTableDiv > .lineItemsTable > tbody > tr > td > div[align="right"] ~ div[align="right"] {
  font-size: 11px !important; color: var(--muted) !important; font-weight: normal !important;
}

/* Totals table (Items Total / Discount / Adjustment / Grand Total) */
.details.block > .lineItemsTable tr > td {
  padding: 10px 16px !important;
  border: 0 !important; border-top: 1px solid var(--line) !important;
  font-size: 13px !important;
}
.details.block > .lineItemsTable tr:first-child > td { border-top: 0 !important; }
.details.block > .lineItemsTable tr > td:first-child { color: var(--color-text-label) !important; }
.details.block > .lineItemsTable tr > td:last-child {
  text-align: right !important; white-space: nowrap !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* Grand Total row accent */
.details.block > .lineItemsTable tr.lineitem-grand-total > td {
  border-top: 2px solid var(--line) !important;
  font-size: 15px !important; font-weight: var(--font-weight-bold) !important;
  color: var(--color-primary-dark) !important;
}

/* ── FINAL OVERRIDE: detail-view block 2-column grid (max specificity) ───── */
.detailViewContainer.viewContent .fieldBlockContainer .blockData .dv-row {
  display:     flex !important;
  flex-wrap:   wrap !important;
  align-items: stretch !important;
  margin:      0 !important;
}
.detailViewContainer.viewContent .fieldBlockContainer .blockData .dv-row > .col-md-6.dv-col {
  flex:        0 0 50% !important;
  width:       50% !important;
  max-width:   50% !important;
  min-width:   0 !important;
  box-sizing:  border-box !important;
  float:       none !important;
}
.detailViewContainer.viewContent .fieldBlockContainer .blockData .dv-row > .dv-col.dv-col-full,
.detailViewContainer.viewContent .fieldBlockContainer .blockData .dv-row > .col-sm-12.dv-col-full {
  flex:        0 0 100% !important;
  width:       100% !important;
  max-width:   100% !important;
}

/* ── Empty pad-cells: inherit normal dv-col styling (border + background) ── */
/* Intentionally visible so odd-field rows maintain a full 2-column grid.    */

/* ── Last row: no bottom border on any cell ─────────────────────────────── */
.detailViewContainer.viewContent .fieldBlockContainer .blockData .dv-row:last-child > .col-md-6.dv-col {
  border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DETAIL VIEW HEADER  —  record-header flex-layout fix
   The template (DetailViewHeaderTitle.tpl) uses .record-header / .recordImage
   / .recordBasicInfo.  The marketing skin left the float layout commented-out
   so the avatar block and the info block stack vertically.  We fix that here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Make .record-header a flex row */
/* Stretch the detail-header to fill the page width — the legacy markup
   wraps title + actions in two `col-sm-6` columns which only take half
   the available area each. Switch the row to flex with the title cell
   growing and the actions cell hugging the right edge, so the QUO6-style
   header card spans the full content area the same way the Import
   wizard header does. */
.detailViewContainer.viewContent .detailview-header-block .detailview-header > .row {
  display:      flex !important;
  align-items:  center;
  margin:       0;
}
.detailViewContainer.viewContent .detailview-header-block .detailview-header > .row > [class*="col-"]:first-child {
  flex:      1 1 auto !important;
  width:     auto !important;
  max-width: none !important;
}
.detailViewContainer.viewContent .detailview-header-block .detailview-header > .row > [class*="col-"]:last-child {
  flex:        0 0 auto !important;
  width:       auto !important;
  max-width:   none !important;
  margin-left: auto;
}

.detailview-header-block .record-header {
  display:     flex !important;
  align-items: flex-start !important;
  gap:         18px !important;
  min-height:  0 !important;    /* kill the marketing-skin 80 px min-height */
  padding:     4px 0 !important;
}

/* 2. Avatar block: compact rounded square */
.detailview-header-block .record-header .recordImage {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  width:           62px !important;
  height:          62px !important;
  min-width:       62px !important;
  min-height:      62px !important;
  max-width:       62px !important;
  max-height:      62px !important;
  border-radius:   16px !important;
  box-shadow:      0 6px 18px rgba(0, 0, 0, 0.18) !important;
  overflow:        hidden !important;
}

.detailview-header-block .record-header .recordImage .name {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           100% !important;
  height:          100% !important;
  position:        static !important;
}

.detailview-header-block .record-header .recordImage .name span {
  font-size:   24px !important;
  font-weight: 600 !important;
  color:       #fff !important;
  text-shadow: none !important;
  line-height: 1 !important;
}

/* 3. Info block: flex column, fill remaining width */
.detailview-header-block .record-header .recordBasicInfo {
  flex:           1 1 auto !important;
  min-width:      0 !important;
  padding-left:   0 !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            3px !important;
}

/* 4. Record name h4 */
.detailview-header-block .record-header .recordBasicInfo h4 {
  font-size:   22px !important;
  font-weight: 700 !important;
  height:      auto !important;
  margin:      0 0 5px !important;
  line-height: 1.2 !important;
  color:       var(--color-text) !important;
}

/* 5. Info rows (phone, email, Show Map, tags…) */
.detailview-header-block .record-header .recordBasicInfo .info-row {
  margin-bottom: 0 !important;
  line-height:   1.65 !important;
  width:         100% !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
}

/* 6. Field-label links / spans inside header info rows */
.detailview-header-block .record-header .recordBasicInfo .info-row .fieldLabel span,
.detailview-header-block .record-header .recordBasicInfo .info-row a {
  font-size:   13px !important;
  color:       var(--color-text-muted) !important;
  line-height: 1.65 !important;
}
.detailview-header-block .record-header .recordBasicInfo .info-row a:hover {
  color: var(--color-primary) !important;
}

/* 7. Bootstrap .row negative margins inside the headerForm field rows */
.detailview-header-block .record-header .recordBasicInfo form .info-row {
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* 8. Bootstrap col padding inside headerForm field rows */
.detailview-header-block .record-header .recordBasicInfo form .fieldLabel[class*="col-"] {
  padding-left:  0 !important;
  padding-right: 0 !important;
  width:         100% !important;
  float:         none !important;
  max-width:     100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DETAIL VIEW HEADER  —  outer Bootstrap row → flex row
   Replaces float-based col-lg-6 layout so action buttons are vertically
   centred against the title column on the left.
   ═══════════════════════════════════════════════════════════════════════════ */

.detailview-header-block .detailview-header > .row {
  display:      flex !important;
  align-items:  center !important;
  flex-wrap:    wrap !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* Release Bootstrap column floats inside this row */
.detailview-header-block .detailview-header > .row > [class*="col-"] {
  float: none !important;
}

/* Left (title) column: grows, no extra gutters */
.detailview-header-block .detailview-header > .row > .col-lg-6:not(.detailViewButtoncontainer) {
  flex:          1 1 auto !important;
  min-width:     0 !important;
  padding-left:  0 !important;
  padding-right: 16px !important;
}

/* Right (actions) column: shrinks to content, right-aligned */
.detailview-header-block .detailViewButtoncontainer {
  flex-shrink:     0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-end !important;
  padding-right:   0 !important;
}

/* Release Bootstrap .pull-right float inside the button toolbar */
.detailview-header-block .detailViewButtoncontainer .pull-right,
.detailview-header-block .detailViewButtoncontainer .btn-toolbar {
  float: none !important;
}


/* ============================================================
   ===========  SECTION 2: EDIT VIEW  =========================
   (formerly edit-view.css — keep last so its rules win on
   shared low-specificity selectors)
   ============================================================ */


/* ============================================================
   VTIGER CRM - EDIT VIEW SPECIFIC STYLES
   Extracted from style.css
   ============================================================ */


/* ============================================================
   Moved from style.css: Edit view: alternating row colours
   ============================================================ */
.editViewContents table.table tbody tr:nth-of-type(odd) td:not(.measure-grid td) { background: var(--color-card) !important; }
.editViewContents table.table tbody tr:nth-of-type(even) td:not(.measure-grid td) { background: var(--color-row-alt) !important; }

/* Typography covered by fields.css — no override needed */

/* ============================================================
   Moved from style.css: Edit view layout: table, fieldLabel, fieldValue
   ============================================================ */
/* -- Edit view layout fix HTML confirmed from source table class table table-borderless class fieldLabel alignMiddle First Name class fieldValue input class fieldLabel alignMiddle Last Name class fieldValue input Inline style sets width editViewContents fieldLabel override -- */

/* -- Edit view table table-layout change let browser auto-size -- */
.editViewContents table.table {
  width:           100% !important;
  border-collapse: separate !important;
  border-spacing:  0 4px !important;
}

/* -- Label column fixed matching detail view exactly -- */
.editViewContents td.fieldLabel,
#page #customtabs .editViewContents td.fieldLabel {
  font-family:    var(--font-family) !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  color:          rgba(var(--theme-primary-rgb), 0.84) !important;
  letter-spacing: 0 !important;
  line-height:    1.35 !important;
  text-transform: none !important;
  width:          200px !important;
  min-width:      200px !important;
  max-width:      200px !important;
  word-break:     normal !important;
  white-space:    nowrap !important;
  padding:        8px 16px !important;
  vertical-align: middle !important;
  background:     transparent !important;
}

.editViewContents td.fieldLabel span,
.editViewContents td.fieldLabel .muted,
#page #customtabs .editViewContents td.fieldLabel span,
#page #customtabs .editViewContents td.fieldLabel .muted {
  font-family:    inherit !important;
  font-size:      inherit !important;
  font-weight:    inherit !important;
  color:          inherit !important;
  letter-spacing: inherit !important;
  line-height:    inherit !important;
  text-transform: inherit !important;
}

/* -- Salutation name input keep one line -- */
.editViewContents td.fieldValue .custom-input-group,
.editViewContents .ev-field-wrap .fieldValue .custom-input-group,
.ev-col .fieldValue .custom-input-group {
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
  flex-wrap:   nowrap !important;
}

/* textarea height + focus handled by fields.css */


/* ============================================================
   Moved from style.css: Edit view: fieldBlockContainer padding
   ============================================================ */
.editViewContents .fieldBlockContainer {
	padding:0px;
}

/* ============================================================
   Moved from style.css: Edit view: fieldValue inputs section
   ============================================================ */
.editViewContents td.fieldValue .custom-input-group input.nameField,
.editViewContents .ev-field-wrap .fieldValue .custom-input-group input.nameField,
.ev-col .fieldValue .custom-input-group input.nameField {
  flex:      1 1 auto !important;
  width:     auto !important;
  min-width: 0 !important;
}

/* -- Value column shrink hint browser distributes remaining space evenly -- */
.editViewContents td.fieldValue, #page #customtabs .editViewContents td.fieldValue,
.editViewContents .ev-field-wrap .fieldValue {
  padding:        6px 16px 6px 8px !important;
  vertical-align: middle !important;
}

/* -- Reference field wrapper full width -- */
.editViewContents td.fieldValue .referencefield-wrapper,
.editViewContents .ev-field-wrap .fieldValue .referencefield-wrapper {
  width:    100% !important;
  display:  block !important;
}
.editViewContents td.fieldValue .referencefield-wrapper .input-group,
.editViewContents .ev-field-wrap .fieldValue .referencefield-wrapper .input-group {
  width:     100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Inputs fill their cell — appearance from fields.css, layout only here */
.editViewContents td.fieldValue input.inputElement:not([type='checkbox']):not([type='radio']),
.editViewContents td.fieldValue textarea.inputElement,
.editViewContents .ev-field-wrap .fieldValue input.inputElement:not([type='checkbox']):not([type='radio']),
.editViewContents .ev-field-wrap .fieldValue textarea.inputElement {
  width:      100% !important;
  max-width:  100% !important;
  box-sizing: border-box !important;
}

/* -- Inputs inside input-group override the full border-radius above -- */
.editViewContents td.fieldValue .input-group input.inputElement:not([type='checkbox']):not([type='radio']),
.editViewContents .ev-field-wrap .fieldValue .input-group input.inputElement:not([type='checkbox']):not([type='radio']) {
  width:                      auto !important;
  max-width:                  none !important;
  border-right:               none !important;
  border-top-right-radius:    0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius:     6px !important;
  border-bottom-left-radius:  6px !important;
  flex:                       1 1 auto !important;
}



/* ============================================================
   Moved from style.css: Edit view section card, ev-row / ev-col layout
   ============================================================ */
/* Section card */
.fieldBlockContainer {
  background:    var(--color-card) !important;
  border:        1px solid var(--line) !important;
  border-radius: var(--view-card-radius) !important;
  margin-bottom: 20px !important;
  overflow:      hidden !important;
  box-shadow:    0 1px 4px rgba(28,43,58,0.05) !important;
}

/* Edit view block header */
.editViewContents .fieldBlockContainer .fieldBlockHeader {
  display:        flex !important;
  align-items:    center !important;
  min-height:     50px !important;
  padding:        14px 16px !important;
  margin:         0 !important;
  background:     linear-gradient(180deg, rgba(var(--theme-primary-rgb), 0.12) 0%, rgba(var(--theme-primary-rgb), 0.04) 100%) !important;
  border-bottom:  1px solid rgba(var(--theme-primary-rgb), 0.16) !important;
  color:          var(--color-primary-dark) !important;
  font-size:      13px !important;
  font-weight:    700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height:    1.2 !important;
  border-radius:  var(--view-card-radius) var(--view-card-radius) 0 0 !important;
}
.editViewContents .fieldBlockContainer > hr { display: none !important; }

/* -- Each row wrapper flexbox all cols row stretch equal height -- */
.ev-row {
  display:      flex !important;
  flex-wrap:    nowrap !important;
  align-items:  stretch !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}
.ev-row::after { content: ''; display: table; clear: both; }

/* Alternating row colours for edit view */
.ev-row:nth-of-type(odd) > .ev-col { background: var(--color-card) !important; }
.ev-row:nth-of-type(even) > .ev-col { background: var(--color-row-alt) !important; }

/* -- Each field cell flex child equal width share float -- */
.ev-col {
  display:         flex !important;
  flex-direction:  column !important;
  justify-content: flex-start !important;
  flex:            1 1 0% !important;
  width:           0 !important;
  min-width:       0 !important;
  padding:         12px 20px !important;
  box-sizing:      border-box !important;
  float:           none !important;
  border-bottom:   1px solid var(--line) !important;
  min-height:      56px !important;
}

/* Override Bootstrap col-md-* inside ev-row */
.ev-row > [class*="col-"] {
  float:     none !important;
  width:     auto !important;
  max-width: none !important;
}

/* -- Last row bottom border -- */
.ev-row:last-child .ev-col { border-bottom: none !important; }

/* -- Column divider all but the last col get right border -- */
.ev-row > .ev-col:not(:last-child) {
  border-right: 1px solid var(--line) !important;
}

/* Full-width field */
.ev-col-full {
  width:        100% !important;
  flex:         0 0 100% !important;
  border-right: none !important;
}

/* Label */

.ev-col .fieldLabel .redColor { color: var(--red) !important; }

/* Value */
.ev-col .fieldValue {
  flex:       1 1 auto !important;
  padding:    0 !important;
  width:      100% !important;
  max-width:  100% !important;
  display:    block !important;
  background: transparent !important;
}
/* Appearance from fields.css — layout only */
.ev-col .fieldValue input.inputElement:not([type='checkbox']):not([type='radio']),
.ev-col .fieldValue textarea.inputElement,
.ev-col .fieldValue input.form-control {
  width:      100% !important;
  max-width:  100% !important;
  box-sizing: border-box !important;
}

/* -- Reference field wrapper inside ev-col full width -- */
.ev-col .fieldValue .referencefield-wrapper {
  width:   100% !important;
  display: block !important;
}
.ev-col .fieldValue .referencefield-wrapper .input-group {
  width:     100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* -- Inputs inside input-group ev-col flush with addon -- */
/* Only strip right border when the input is NOT the last element
   (i.e. there is a right-side addon after it).
   nameField + salutation combos are the last child, so they keep their border. */
.ev-col .fieldValue .input-group input.inputElement:not([type='checkbox']):not([type='radio']) {
  flex: 1 1 auto !important;
}
.ev-col .fieldValue .input-group input.inputElement:not([type='checkbox']):not([type='radio']):not(:last-child) {
  border-right:               none !important;
  border-top-right-radius:    0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius:     6px !important;
  border-bottom-left-radius:  6px !important;
}

/* ============================================================
   .editViewContents — plain block flow in both contexts.

   FULL edit view page (module=X&view=Edit):
     No internal scroll — the window scrolls naturally. The Save/Cancel
     bar (`.modal-overlay-footer`) is `position: fixed` at the viewport
     bottom, so the content wrapper needs bottom padding equal to the
     footer height so the last fields aren't hidden behind it.

   OVERLAY edit (Kanban → pencil, Detail → edit-in-overlay):
     `.modal-body.editViewBody` is the scroll container (set in overlay.css).
     `.editViewContents` stays plain block so there's no nested scrollbar.
     No bottom clearance needed — the overlay's own `.overlayFooter` is
     in-flow inside the flex column.

   One scroll surface per context — window for the page view, modal body
   for the overlay view.
   ============================================================ */
.editViewContents {
  overflow:   visible !important;
  max-height: none !important;
}

/* Bottom clearance for the fixed `.modal-overlay-footer` on the full edit
   view page. Scoped with `:not(.modal-body)` so the overlay edit (which
   uses `.overlayFooter` in-flow) gets no extra padding. */
.editViewBody:not(.modal-body) > .editViewContents {
  padding-bottom: 80px !important;
}

/* ============================================================
   Line item table: product / service name field
   Make the split two-column layout look like a reference field
   ============================================================ */

/* Turn the inner .row into a flex row so the two columns align on one line */
#lineItemTab .itemNameDiv .row {
  display:     flex !important;
  align-items: center !important;
  flex-wrap:   nowrap !important;
  margin:      0 !important;
  gap:         4px !important;
}

/* Input column fills remaining space */
#lineItemTab .itemNameDiv .row .col-lg-10 {
  flex:      1 1 auto !important;
  width:     auto !important;
  max-width: none !important;
  padding:   0 !important;
  min-width: 0 !important;
}

/* Icon column shrinks to fit its buttons */
#lineItemTab .itemNameDiv .row .col-lg-2 {
  flex:        0 0 auto !important;
  width:       auto !important;
  padding:     0 !important;
  display:     flex !important;
  align-items: center !important;
  gap:         4px !important;
}

/* Input-group fills the col */
#lineItemTab .itemNameDiv .input-group {
  display:    flex !important;
  flex-wrap:  nowrap !important;
  width:      100% !important;
  max-width:  100% !important;
}

/* Product / service name text input */
#lineItemTab .itemNameDiv .productName.form-control {
  flex:          1 1 auto !important;
  height:        32px !important;
  font-family:   var(--font-family) !important;
  font-size:     13px !important;
  color:         var(--text) !important;
  border:        1px solid var(--field-border) !important;
  border-radius: 6px !important;
  padding:       5px 10px !important;
  background:    var(--color-card) !important;
  box-shadow:    none !important;
  width:         100% !important;
}

/* Flatten right side when the clear (×) addon is present */
#lineItemTab .itemNameDiv .input-group:has(.input-group-addon) .productName.form-control {
  border-top-right-radius:    0 !important;
  border-bottom-right-radius: 0 !important;
  border-right:               none !important;
}

/* Focus ring */
#lineItemTab .itemNameDiv .productName.form-control:focus {
  border-color: var(--field-focus) !important;
  outline:      none !important;
  box-shadow:   0 0 0 3px rgba(11,86,166,0.10) !important;
}

/* Disabled state (product already selected) */
#lineItemTab .itemNameDiv .productName.form-control:disabled,
#lineItemTab .itemNameDiv .productName.form-control[disabled] {
  background: var(--color-row-alt) !important;
  color:      var(--text) !important;
  opacity:    1 !important;
  cursor:     default !important;
}

/* Clear (×) addon button */
#lineItemTab .itemNameDiv .input-group-addon.clearLineItem {
  height:                     32px !important;
  display:                    inline-flex !important;
  align-items:                center !important;
  padding:                    0 8px !important;
  border:                     1px solid var(--field-border) !important;
  border-left:                none !important;
  border-top-right-radius:    6px !important;
  border-bottom-right-radius: 6px !important;
  background:                 var(--color-card) !important;
  color:                      var(--muted) !important;
  cursor:                     pointer !important;
  line-height:                1 !important;
  flex-shrink:                0 !important;
}
#lineItemTab .itemNameDiv .input-group-addon.clearLineItem:hover {
  border-color: var(--color-primary) !important;
  color:        var(--color-danger, #ff4060) !important;
}

/* Product / service popup icon button */
#lineItemTab .itemNameDiv .lineItemPopup {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           32px !important;
  height:          32px !important;
  border:          1px solid var(--field-border) !important;
  border-radius:   6px !important;
  background:      var(--color-card) !important;
  cursor:          pointer !important;
  color:           var(--color-primary) !important;
  flex-shrink:     0 !important;
  transition:      border-color 0.15s, background 0.15s !important;
}
#lineItemTab .itemNameDiv .lineItemPopup:hover {
  border-color: var(--color-primary) !important;
  background:   rgba(var(--theme-primary-rgb), 0.08) !important;
}

/* Icon / image inside the popup button */
#lineItemTab .itemNameDiv .lineItemPopup img {
  width:  18px !important;
  height: 18px !important;
  display: block !important;
}
#lineItemTab .itemNameDiv .lineItemPopup i,
#lineItemTab .itemNameDiv .lineItemPopup [class*="vicon"] {
  font-size:   14px !important;
  line-height: 1 !important;
  color:       inherit !important;
}

/* ============================================================
   Line item block header: unified title + currency/tax controls
   ============================================================ */

/* Spread title to left, controls to right inside the flex header */
.editViewContents .fieldBlockContainer .fieldBlockHeader {
  justify-content: space-between !important;
}

/* Right-side controls wrapper */
.li-header-controls {
  display:     flex !important;
  align-items: center !important;
  gap:         20px !important;
  flex-shrink: 0 !important;
  flex-wrap:   nowrap !important;
  font-weight: 400 !important;
  font-size:   13px !important;
}

/* One control group: info-icon + label + select */
.li-control-item {
  display:     flex !important;
  align-items: center !important;
  gap:         5px !important;
  flex-shrink: 0 !important;
}

/* Label text in each control */
.li-control-item label {
  margin:      0 !important;
  font-size:   12px !important;
  font-weight: 600 !important;
  color:       var(--color-primary-dark) !important;
  white-space: nowrap !important;
  cursor:      default !important;
}

/* Info icon */
.li-control-item .fa-info-circle {
  color:     rgba(var(--theme-primary-rgb), 0.55) !important;
  font-size: 12px !important;
}

/* ============================================================
   Currency fields — left-side addon (UIType 71 & 72)
   Currency.tpl puts the symbol span BEFORE the input (DOM-first
   = visually LEFT). The global .input-group-addon rule is built
   for RIGHT-side addons, and the existing input-group input rules
   also assume right-side. We correct both here.
   Selector specificity is kept >= (0,6,2) to beat the (0,6,1)
   existing input rules when both carry !important.
   ============================================================ */

/* --- Make the currency wrapper a flex row --- */
:is(.editViewContents td.fieldValue,
    .editViewContents .ev-field-wrap .fieldValue,
    .ev-col .fieldValue) .input-group.inputElement {
  display:     flex !important;
  flex-wrap:   nowrap !important;
  align-items: stretch !important;
  width:       100% !important;
}

/* --- Addon on the LEFT: flip border direction and radii --- */
:is(.editViewContents td.fieldValue,
    .editViewContents .ev-field-wrap .fieldValue,
    .ev-col .fieldValue) .input-group .input-group-addon-right,
:is(.editViewContents td.fieldValue,
    .editViewContents .ev-field-wrap .fieldValue,
    .ev-col .fieldValue) .input-group .input-group-addon:first-child:not(:last-child) {
  width:                      auto !important;
  min-width:                  32px !important;
  max-width:                  none !important;
  padding:                    0 8px !important;
  border-left:                1px solid var(--field-border) !important;
  border-right:               none !important;
  border-top-left-radius:     6px !important;
  border-bottom-left-radius:  6px !important;
  border-top-right-radius:    0 !important;
  border-bottom-right-radius: 0 !important;
  cursor:                     default !important;
}

/* --- Suppress button hover — currency symbol is not clickable --- */
:is(.editViewContents td.fieldValue,
    .editViewContents .ev-field-wrap .fieldValue,
    .ev-col .fieldValue) .input-group .input-group-addon-right:hover,
:is(.editViewContents td.fieldValue,
    .editViewContents .ev-field-wrap .fieldValue,
    .ev-col .fieldValue) .input-group .input-group-addon:first-child:not(:last-child):hover {
  background:        var(--color-surface-input) !important;
  color:             var(--muted) !important;
  border-left-color: var(--field-border) !important;
  border-right:      none !important;
}

/* --- Input after a left addon: flip border direction and radii ---
     Uses .currencyField to push specificity to (0,6,2)+(context)
     so it beats the (0,6,1) existing input-group input rule. --- */
:is(.editViewContents td.fieldValue,
    .editViewContents .ev-field-wrap .fieldValue,
    .ev-col .fieldValue) .input-group .input-group-addon-right ~ input.inputElement.currencyField,
:is(.editViewContents td.fieldValue,
    .editViewContents .ev-field-wrap .fieldValue,
    .ev-col .fieldValue) .input-group .input-group-addon:first-child:not(:last-child) ~ input.inputElement.currencyField {
  border-left:                none !important;
  border-right:               1px solid var(--field-border) !important;
  border-top-left-radius:     0 !important;
  border-bottom-left-radius:  0 !important;
  border-top-right-radius:    6px !important;
  border-bottom-right-radius: 6px !important;
}

/* ============================================================
   Line items table  (#lineItemTab)
   Fix double borders, style headers/rows/inputs/buttons/totals
   ============================================================ */

/* ── Remove <br> spacers injected by the template ── */
div[name='editContent'] > br { display: none !important; }

/* ── Spacing between buttons row and totals card ── */
div[name='editContent'] > div + .fieldBlockContainer { margin-top: 16px !important; }

/* ── Strip the outer table border (fieldBlockContainer provides the shell) ── */
.lineitemTableContainer           { overflow: hidden !important; }
#lineItemTab                      { border: none !important; border-collapse: collapse !important;
                                    width: 100% !important; margin: 0 !important;
                                    font-family: var(--font-family) !important; font-size: 13px !important; }

/* ── Column header row ── */

#lineItemTab tr:first-child > td:last-child { border-right: none !important; }

/* ── Data rows ── */
#lineItemTab .lineItemRow > td {
  border-top:     1px solid var(--line) !important;
  border-left:    none !important;
  border-right:   1px solid var(--line) !important;
  border-bottom:  none !important;
  padding:        10px 12px !important;
  vertical-align: top !important;
  background:     var(--color-card) !important;
}
#lineItemTab .lineItemRow > td:last-child { border-right: none !important; }
#lineItemTab .lineItemRow:hover > td      { background: var(--color-surface-light) !important; }

/* ── TOOLS column ──
   Direct-child combinators are deliberate: the discount / tax popovers
   inject their own <table class="popupTable"> *inside* #lineItemTab
   (Bootstrap's popover container option is the lineItemsHolder), and
   without the `> tbody > tr` chain the rule would also squish the
   popover's label cells into a 52px wide centred column.            */
#lineItemTab > tbody > tr > td:first-child {
  width: 52px !important; text-align: center !important; vertical-align: middle !important;
}
#lineItemTab .deleteRow {
  color: var(--muted) !important; font-size: 15px !important; transition: color .15s !important;
}
#lineItemTab .deleteRow:hover { color: var(--red) !important; }

/* ── Number inputs (qty, cost, margin, listprice) ── */
#lineItemTab .smallInputBox.inputElement {
  display:       block !important;
  width:         100% !important;
  min-width:     64px !important;
  height:        32px !important;
  padding:       5px 8px !important;
  font-size:     13px !important;
  font-family:   var(--font-family) !important;
  color:         var(--text) !important;
  border:        1px solid var(--field-border) !important;
  border-radius: 6px !important;
  background:    var(--color-card) !important;
  box-shadow:    none !important;
  box-sizing:    border-box !important;
}

#lineItemTab .smallInputBox.inputElement[readonly],
#lineItemTab .smallInputBox.inputElement:disabled {
  background: var(--color-surface-light) !important;
  color:      var(--color-text-label) !important;
  opacity:    1 !important;
}

/* ── Comment textarea ── */
#lineItemTab .lineItemCommentBox {
  display:       block !important;
  width:         100% !important;
  min-height:    52px !important;
  padding:       6px 8px !important;
  font-size:     12px !important;
  font-family:   var(--font-family) !important;
  color:         var(--text) !important;
  border:        1px solid var(--field-border) !important;
  border-radius: 6px !important;
  background:    var(--color-card) !important;
  resize:        vertical !important;
  box-sizing:    border-box !important;
  margin-top:    6px !important;
}
#lineItemTab .lineItemCommentBox:focus {
  border-color: var(--field-focus) !important;
  outline:      none !important;
  box-shadow:   0 0 0 3px rgba(var(--theme-primary-rgb), .1) !important;
}

/* ── Stock alert ── */
#lineItemTab .stockAlert {
  display:     block !important;
  font-size:   11px !important;
  color:       var(--red) !important;
  line-height: 1.4 !important;
  margin-top:  4px !important;
}

/* ── Display-only numeric cells ── */
#lineItemTab .productTotal,
#lineItemTab .netPrice,
#lineItemTab .purchaseCost,
#lineItemTab .margin {
  display:     block !important;
  text-align:  right !important;
  font-size:   13px !important;
  font-weight: var(--font-weight-bold) !important;
  color:       var(--text) !important;
}
#lineItemTab .discountTotal,
#lineItemTab .totalAfterDiscount,
#lineItemTab .productTaxTotal {
  /* `display` deliberately omitted — divs are block by default, and
     forcing `display: block !important` here would beat the `.hide`
     utility class (higher specificity + same priority), leaking a
     blank tax row into the column when group-tax mode is in use. */
  text-align: right !important;
  font-size:  11px !important;
  color:      var(--muted) !important;
  margin-top: 2px !important;
}

/* ── Discount / tax action links inside rows ── */
#lineItemTab .individualDiscount,
#lineItemTab .individualTax {
  font-size:   11px !important;
  color:       var(--color-primary) !important;
  cursor:      pointer !important;
}
#lineItemTab .individualDiscount:hover,
#lineItemTab .individualTax:hover { text-decoration: underline !important; }

/* ── Add Product / Add Service buttons ── */
#addProduct, #addService {
  display:       inline-flex !important;
  align-items:   center !important;
  gap:           6px !important;
  padding:       7px 18px !important;
  font-size:     13px !important;
  font-weight:   var(--font-weight-bold) !important;
  font-family:   var(--font-family) !important;
  border-radius: var(--view-card-radius-xs) !important;
  cursor:        pointer !important;
  transition:    background .15s, border-color .15s !important;
  height:        auto !important;
  line-height:   1.4 !important;
}
#addProduct {
  background:  var(--color-primary) !important;
  color:       var(--color-card) !important;
  border:      1px solid var(--color-primary) !important;
  box-shadow:  var(--btn-shadow) !important;
}
#addProduct:hover { background: var(--color-primary-dark) !important; border-color: var(--color-primary-dark) !important; }
#addService {
  background: var(--color-card) !important;
  color:      var(--color-primary) !important;
  border:     1px solid var(--color-primary) !important;
}
#addService:hover { background: var(--color-row-hover) !important; }

/* Buttons toolbar layout */
.btn-toolbar { display: flex !important; gap: 10px !important; flex-wrap: wrap !important;
               margin: 14px 0 !important; }
.btn-toolbar .btn-group { float: none !important; }

/* ── Totals table (#lineItemResult) ── */
#lineItemResult {
  border: none !important; border-collapse: collapse !important;
  width: 100% !important; margin: 0 !important;
  font-family: var(--font-family) !important; font-size: 13px !important;
}
#lineItemResult tr > td {
  padding:       10px 18px !important;
  border-top:    1px solid var(--line) !important;
  border-left:   none !important;
  border-right:  none !important;
  border-bottom: none !important;
  vertical-align: middle !important;
  background:    var(--color-card) !important;
}
#lineItemResult tr:first-child > td { border-top: none !important; }

/* Label column */
#lineItemResult tr > td:first-child {
  color:     var(--color-text-label) !important;
  font-size: 13px !important;
}
/* Value column */
#lineItemResult tr > td:last-child {
  color:       var(--text) !important;
  font-weight: var(--font-weight-bold) !important;
  white-space: nowrap !important;
  width:       160px !important;
  text-align:  right !important;
}

/* Grand total — accent row */
#lineItemResult tr > td:has(#grandTotal),
#lineItemResult tr > td:has(.grandTotal) {
  color:       var(--color-primary-dark) !important;
  font-size:   15px !important;
  font-weight: var(--font-weight-bold) !important;
  border-top:  2px solid var(--line) !important;
}

/* Adjustment row inputs */
#adjustment, #received, #paid, #balance {
  display:       inline-block !important;
  width:         110px !important;
  height:        32px !important;
  padding:       5px 8px !important;
  font-size:     13px !important;
  font-family:   var(--font-family) !important;
  color:         var(--text) !important;
  border:        1px solid var(--field-border) !important;
  border-radius: 6px !important;
  background:    var(--color-card) !important;
  box-shadow:    none !important;
  box-sizing:    border-box !important;
  text-align:    right !important;
}
#balance {
  background: var(--color-surface-light) !important;
  color:      var(--color-primary-dark) !important;
  font-weight: var(--font-weight-bold) !important;
}

/* Discount / tax popup links in totals */
#finalDiscount, #finalTax, #charges, #chargeTaxes, #deductTaxes {
  color: var(--color-primary) !important; font-weight: var(--font-weight-bold) !important;
}
#finalDiscount:hover, #finalTax:hover, #charges:hover,
#chargeTaxes:hover, #deductTaxes:hover { text-decoration: underline !important; }

/* ============================================================
   Selling price cell — pricebook icon aligned with input
   ============================================================ */

/*
 * The template puts <input class="listPrice"> + &nbsp; + <span class="priceBookPopup" style="float:left">
 * inside a plain <div>.  width:100% on the input pushes the floated icon to the
 * next line.  Converting the wrapper to a flex row fixes it cleanly.
 */
#lineItemTab td > div:has(.listPrice) {
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
}

/* Input fills remaining space; float-based width no longer needed */
#lineItemTab td > div:has(.listPrice) .listPrice.smallInputBox {
  flex:      1 1 auto !important;
  width:     auto !important;
  min-width: 72px !important;
  display:   block !important;  /* override the block default from global rule */
}

/* Pricebook icon — styled exactly like .lineItemPopup */
#lineItemTab .priceBookPopup {
  float:           none !important;     /* override inline style="float:left" */
  flex-shrink:     0 !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           32px !important;
  height:          32px !important;
  border:          1px solid var(--field-border) !important;
  border-radius:   6px !important;
  background:      var(--color-card) !important;
  cursor:          pointer !important;
  color:           var(--color-primary) !important;
  transition:      border-color .15s, background .15s !important;
}
#lineItemTab .priceBookPopup:hover {
  border-color: var(--color-primary) !important;
  background:   rgba(var(--theme-primary-rgb), .08) !important;
}
#lineItemTab .priceBookPopup img {
  width:   16px !important;
  height:  16px !important;
  display: block !important;
}
#lineItemTab .priceBookPopup i,
#lineItemTab .priceBookPopup [class*="vicon"] {
  font-size:   14px !important;
  line-height: 1 !important;
  color:       inherit !important;
}

/* Clearfix div is no longer needed once float is removed */
#lineItemTab td > div:has(.listPrice) + div[style*="clear"] {
  display: none !important;
}

/* ── Discount / tax meta-rows below the selling-price input ── */

/* "(-) Discount(0) :" link row */
#lineItemTab td > div:has(.individualDiscount) {
  margin-top: 5px !important;
  font-size:  11px !important;
  line-height: 1.4 !important;
}
#lineItemTab td > div:has(.individualDiscount) span {
  color: var(--muted) !important;
}
#lineItemTab td > div:has(.individualDiscount) .individualDiscount {
  color:           var(--color-primary) !important;
  font-weight:     var(--font-weight-bold) !important;
  font-size:       11px !important;
  text-decoration: none !important;
}
#lineItemTab td > div:has(.individualDiscount) .individualDiscount:hover {
  text-decoration: underline !important;
}

/* "Total After Discount :" label */
#lineItemTab td > div[style*="width:150px"] {
  margin-top:  3px !important;
  font-size:   11px !important;
  color:       var(--muted) !important;
  white-space: nowrap !important;
}
#lineItemTab td > div[style*="width:150px"] strong {
  font-weight: var(--font-weight-bold) !important;
  color:       var(--muted) !important;
}

/* "(+) Tax :" row */
#lineItemTab .individualTaxContainer {
  margin-top: 3px !important;
  font-size:  11px !important;
  color:      var(--muted) !important;
}
#lineItemTab .individualTax {
  color:           var(--color-primary) !important;
  font-weight:     var(--font-weight-bold) !important;
  font-size:       11px !important;
  text-decoration: none !important;
}
#lineItemTab .individualTax:hover { text-decoration: underline !important; }

/* ── Total column: align values with the selling-price cell rows ──
   productTotal sits opposite the input (top), discountTotal opposite discount row,
   totalAfterDiscount opposite "Total After Discount:" label.
   A small top-padding shifts productTotal down to visually centre with the input. ── */
#lineItemTab .lineItemRow > td:has(.productTotal) {
  padding-top: 5px !important;
}
#lineItemTab .productTotal {
  padding-top:  4px !important;  /* optically align with 32px-tall input */
  margin-bottom: 5px !important;
}
/* Per-class overrides for the secondary value rows. `display` is
   intentionally omitted from every rule below — see the consolidated
   block higher up; forcing it as `block !important` here would beat
   the `.hide` utility and leak hidden rows back into the layout. */
#lineItemTab .discountTotal {
  font-size:  11px !important;
  color:      var(--muted) !important;
  text-align: right !important;
}
#lineItemTab .totalAfterDiscount {
  font-size:   11px !important;
  color:       var(--muted) !important;
  text-align:  right !important;
  margin-top:  3px !important;
}
#lineItemTab .productTaxTotal {
  font-size:  11px !important;
  color:      var(--muted) !important;
  text-align: right !important;
  margin-top: 3px !important;
}


/* ============================================================
   Line-item Attachment column.

   Two visual states in the same `.lineItemAttachmentCell`:
     • `.lineItemAttachmentExisting`  — file already attached: icon + name
       (download link) + × remove button. Shown when the row has a saved
       attachmentid in vtiger_inventoryproductrel.
     • `.lineItemAttachmentPicker`    — no file yet: a "Attach file" pill
       wrapping a hidden `<input type="file">`. Revealed when the user
       clicks × on an existing attachment so they can upload a replacement
       in the same save.

   Both states use theme tokens only (--color-card / --line / --accent /
   --muted / --field-border) to match the rest of the edit view.
   ============================================================ */
#lineItemTab .lineItemAttachmentHeader,
.lineItemsTable .lineItemAttachmentHeader {
  width:         140px !important;
  white-space:   nowrap !important;
}
#lineItemTab .lineItemAttachmentCell,
.lineItemsTable .lineItemAttachmentCell {
  width:          140px !important;
  vertical-align: middle !important;
  padding:        6px 8px !important;
}

/* Detail view placeholder when a row has no attachment */
.lineItemsTable .lineItemAttachmentEmpty {
  color:       var(--muted) !important;
  font-size:   13px !important;
}

/* Existing attachment — filename + download. Shared between:
     - edit view  (#lineItemTab .lineItemAttachmentExisting with × remove)
     - detail view (.lineItemsTable > inline link without remove) */
#lineItemTab .lineItemAttachmentExisting {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             6px !important;
  max-width:       100% !important;
  padding:         4px 8px !important;
  background:      var(--color-card) !important;
  border:          1px solid var(--field-border, var(--line)) !important;
  border-radius:   6px !important;
  font-size:       12px !important;
  line-height:     1.2 !important;
}
#lineItemTab .lineItemAttachmentLink,
.lineItemsTable .lineItemAttachmentLink {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             5px !important;
  min-width:       0 !important;
  color:           var(--text) !important;
  text-decoration: none !important;
  max-width:       120px !important;
}
#lineItemTab .lineItemAttachmentLink:hover,
.lineItemsTable .lineItemAttachmentLink:hover { color: var(--accent) !important; }
#lineItemTab .lineItemAttachmentLink .fa-paperclip,
.lineItemsTable .lineItemAttachmentLink .fa-paperclip {
  flex-shrink: 0 !important;
  color:       var(--muted) !important;
  font-size:   12px !important;
}
#lineItemTab .lineItemAttachmentLink:hover .fa-paperclip,
.lineItemsTable .lineItemAttachmentLink:hover .fa-paperclip { color: var(--accent) !important; }
#lineItemTab .lineItemAttachmentName,
.lineItemsTable .lineItemAttachmentName {
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
}
#lineItemTab .lineItemAttachmentRemoveBtn {
  flex-shrink:     0 !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           18px !important;
  height:          18px !important;
  color:           var(--muted) !important;
  border-radius:   50% !important;
  font-size:       10px !important;
  text-decoration: none !important;
  transition:      background .15s, color .15s !important;
}
#lineItemTab .lineItemAttachmentRemoveBtn:hover {
  color:      var(--color-danger, #e74c3c) !important;
  background: rgba(231, 76, 60, 0.10) !important;
}

/* File picker — pill-shaped label wrapping a hidden input */
#lineItemTab .lineItemAttachmentPicker { display: block !important; }
#lineItemTab .lineItemAttachmentLabel {
  display:         inline-flex !important;
  align-items:     center !important;
  padding:         5px 10px !important;
  font-size:       12px !important;
  font-weight:     500 !important;
  color:           var(--muted) !important;
  background:      var(--color-card) !important;
  border:          1px dashed var(--field-border, var(--line)) !important;
  border-radius:   6px !important;
  cursor:          pointer !important;
  transition:      color .15s, border-color .15s, background .15s !important;
  margin:          0 !important;
  white-space:     nowrap !important;
}
#lineItemTab .lineItemAttachmentLabel:hover {
  color:        var(--accent) !important;
  border-color: var(--accent) !important;
  border-style: solid !important;
  background:   rgba(var(--theme-primary-rgb), 0.04) !important;
}
#lineItemTab .lineItemAttachmentLabel .fa-paperclip {
  color:     var(--muted) !important;
  font-size: 12px !important;
}
#lineItemTab .lineItemAttachmentLabel:hover .fa-paperclip { color: var(--accent) !important; }

/* Drag-over highlight — the JS toggles `.is-dragover` on the attachment
   cell while a file is being dragged across it. Mirrors the hover state
   so the user sees the same visual cue regardless of how they pick the
   file (click vs drag-drop). */
.lineItemsTable .lineItemAttachmentCell.is-dragover,
#lineItemTab .lineItemAttachmentCell.is-dragover {
  background: rgba(var(--theme-primary-rgb), 0.06) !important;
  outline:    2px dashed var(--accent) !important;
  outline-offset: -3px;
}
.lineItemsTable .lineItemAttachmentCell.is-dragover .lineItemAttachmentLabel,
#lineItemTab .lineItemAttachmentCell.is-dragover .lineItemAttachmentLabel {
  color:        var(--accent) !important;
  border-color: var(--accent) !important;
  border-style: solid !important;
}

/* =================================================================
   Line-item assets (multi-attachment) — Add Asset button, chip list,
   and the popover that appears next to the button.
   ================================================================= */

/* The assets row sits between line-item rows; remove the table-cell
   chrome so it reads as a soft sub-row anchored under its line item. */
.lineItemsTable tr.lineItemAssetsRow > td {
  padding:       8px 14px 14px !important;
  background:    var(--bg-alt, #f7f9fc) !important;
  border-top:    0 !important;
  border-bottom: 1px solid var(--line, #eef0f3) !important;
}
.lineItemAssetsBlock {
  display:    flex;
  flex-wrap:  wrap;
  align-items: center;
  gap:        8px;
}
.lineItemAssetsChips {
  display:    inline-flex;
  flex-wrap:  wrap;
  gap:        6px;
}
.lineItemAssetChip {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        4px 6px 4px 10px;
  background:     #ffffff;
  border:         1px solid var(--line, #e2e6ec);
  border-radius:  999px;
  font-size:      12px;
  color:          var(--color-text, #1C2B3A);
  max-width:      260px;
}
.lineItemAssetChip__link {
  color:          inherit !important;
  text-decoration: none !important;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  max-width:      210px;
}
.lineItemAssetChip__link:hover { color: var(--accent, #2563eb) !important; }
.lineItemAssetChip__link .fa { margin-right: 4px; opacity: 0.7; }
.lineItemAssetChip__remove {
  display:         inline-flex;
  width:           18px;
  height:          18px;
  align-items:     center;
  justify-content: center;
  color:           var(--muted, #6b7280) !important;
  border-radius:   50%;
  text-decoration: none !important;
  flex-shrink:     0;
}
.lineItemAssetChip__remove:hover {
  color:      var(--red, #dc2626) !important;
  background: rgba(220, 38, 38, 0.10);
}

/* Staged chips — file is queued in memory but not yet persisted. A
   dashed accent border + tinted background tells the user "this lands
   when you click Save on the record." */
.lineItemAssetChip--staged {
  background:   rgba(var(--theme-primary-rgb), 0.06);
  border-style: dashed;
  border-color: var(--accent, #2563eb);
}
.lineItemAssetChip--staged .lineItemAssetChip__link .fa { color: var(--accent, #2563eb); opacity: 1; }

.lineItemAssetsAddBtn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         5px 12px;
  background:      transparent;
  border:          1px dashed var(--accent, #2563eb);
  border-radius:   6px;
  font-size:       12px;
  font-weight:     600;
  color:           var(--accent, #2563eb);
  cursor:          pointer;
  transition:      background 0.15s ease, color 0.15s ease;
}
.lineItemAssetsAddBtn:hover {
  background: rgba(var(--theme-primary-rgb), 0.08);
}
.lineItemAssetsAddBtn[disabled] {
  border-color: var(--line, #e2e6ec);
  color:        var(--muted, #6b7280);
  cursor:       not-allowed;
  opacity:      0.7;
}

/* Action row holds Add Asset + Show Assets buttons side-by-side. */
.lineItemAssetsActions {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}

/* Show Assets toggle — solid (not dashed) so users distinguish it from
   the "create new" affordance of Add Asset. Accordion-style: click
   expands the saved-assets panel below. */
.lineItemAssetsShowBtn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         5px 12px;
  background:      var(--bg-alt, #f7f9fc);
  border:          1px solid var(--line, #e2e6ec);
  border-radius:   6px;
  font-size:       12px;
  font-weight:     600;
  color:           var(--color-text, #1C2B3A);
  cursor:          pointer;
  transition:      background 0.15s ease, border-color 0.15s ease;
}
.lineItemAssetsShowBtn .fa { color: var(--accent, #2563eb); }
.lineItemAssetsShowBtn:hover {
  background:   #ffffff;
  border-color: var(--accent, #2563eb);
}
.lineItemAssetsShowBtn[data-expanded="1"] {
  background:   rgba(var(--theme-primary-rgb), 0.06);
  border-color: var(--accent, #2563eb);
  color:        var(--accent, #2563eb);
}

/* Saved-assets accordion panel. Indented + tinted background so the
   card list reads as a child of the line-item row rather than another
   peer-level control. `flex-basis: 100%` forces it onto its own row
   inside the flex-wrap parent so it sits below the Add/Show buttons
   instead of next to them. */
.lineItemAssetsPanel {
  flex-basis:    100%;
  width:         100%;
  margin-top:    8px;
  padding:       10px 12px;
  background:    var(--bg-alt, #f7f9fc);
  border:        1px solid var(--line, #e2e6ec);
  border-radius: 6px;
}
.lineItemAssetsPanel.hide { display: none; }

/* ShopVOX-style asset card laid out in a 3-column grid (drops to 2
   then 1 on narrow screens). Compact: small thumbnail, single-line
   name, tiny date row, icon-only actions. */
.lineItemAssetsList {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:        8px;
}
@media (max-width: 1100px) {
  .lineItemAssetsList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .lineItemAssetsList { grid-template-columns: 1fr; }
}
.lineItemAssetCard {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        6px 8px;
  background:     #ffffff;
  border:         1px solid var(--line, #e2e6ec);
  border-radius:  6px;
  transition:     border-color 0.15s ease, box-shadow 0.15s ease;
  min-width:      0;        /* allow inner ellipsis */
}
.lineItemAssetCard:hover {
  border-color: var(--accent, #2563eb);
  box-shadow:   0 1px 4px rgba(15, 23, 42, 0.06);
}
.lineItemAssetCard__thumb {
  flex:           0 0 auto;
  width:          36px;
  height:         36px;
  border-radius:  4px;
  background:     var(--bg-alt, #f7f9fc);
  border:         1px solid var(--line, #e2e6ec);
  display:        flex;
  align-items:    center;
  justify-content:center;
  overflow:       hidden;
}
.lineItemAssetCard__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.lineItemAssetCard__thumb .fa {
  font-size: 16px;
  color:     var(--muted, #6b7280);
}
.lineItemAssetCard__meta {
  flex:        1 1 auto;
  min-width:   0;
}
.lineItemAssetCard__name {
  font-size:     12px;
  font-weight:   600;
  color:         var(--color-text, #1C2B3A);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.3;
}
.lineItemAssetCard__date {
  font-size:  10px;
  color:      var(--muted, #6b7280);
  margin-top: 1px;
}
.lineItemAssetCard__actions {
  flex:        0 0 auto;
  display:     flex;
  align-items: center;
  gap:         2px;
}
.lineItemAssetCard__action {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  border-radius:   4px;
  color:           var(--muted, #6b7280) !important;
  text-decoration: none !important;
  font-size:       12px;
  transition:      background 0.12s ease, color 0.12s ease;
}
.lineItemAssetCard__action:hover {
  background: rgba(var(--theme-primary-rgb), 0.08);
  color:      var(--accent, #2563eb) !important;
}
.lineItemAssetCard__action--delete:hover {
  background: rgba(220, 38, 38, 0.10);
  color:      var(--red, #dc2626) !important;
}

/* ── Email Template Edit view ─────────────────────────────────────
   Stock ev-row / ev-col handles 99% of the layout. Three small
   things aren't covered by the global styles:
     1. Side-by-side Module + Field cascading selects inside the
        .filterContainer wrapper (kept verbatim so the existing
        Vtiger_AdvanceFilter_Js change-handler keeps working).
     2. Short Description textarea sitting next to Template-name —
        cap its height so it doesn't tower over the input.
     3. CKEditor side padding so its toolbar isn't flush against
        the fieldBlockContainer's right edge.
   ───────────────────────────────────────────────────────────────── */
.emailTemplateEdit__filter {
  display: flex !important;
  gap:     10px;
}
.emailTemplateEdit__moduleSelect,
.emailTemplateEdit__fieldSelect {
  flex:      1 1 0;
  min-width: 0;
}
.emailTemplateEdit__filter .select2-container { width: 100% !important; }

.emailTemplateEdit__shortText {
  height: 38px;
  resize: vertical;
}

.emailTemplateEdit .padding-bottom1per {
  padding-left:  18px;
  padding-right: 18px;
}

/* ── Line-item category filter ─────────────────────────────────────
   Funnel icon next to the productName autocomplete + the shared
   popover it opens. Stays visually close to the existing
   .lineItemPopup icons (Products / Services pickers) so the row's
   action cluster reads as one control group. */
.lineItemCategoryFilterBtn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  margin-right:    4px;
  color:           var(--muted, #6b7280);
  border:          1px solid transparent;
  border-radius:   4px;
  transition:      background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.lineItemCategoryFilterBtn:hover {
  color:        var(--accent, #2563eb);
  background:   rgba(var(--theme-primary-rgb), 0.08);
  border-color: rgba(var(--theme-primary-rgb), 0.18);
}
.lineItemCategoryFilterBtn--active {
  color:        var(--accent, #2563eb) !important;
  background:   rgba(var(--theme-primary-rgb), 0.10);
  border-color: var(--accent, #2563eb);
}

.lineItemCategoryFilterPopover {
  position:      absolute;
  z-index:       1100;
  width:         260px;
  background:    #ffffff;
  border:        1px solid var(--line, #e2e6ec);
  border-radius: 10px;
  box-shadow:    0 14px 40px rgba(15, 23, 42, 0.18);
  font-family:   var(--font-family);
}
.lineItemCategoryFilterPopover.hide { display: none !important; }
.lineItemCategoryFilterPopover__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  border-bottom:   1px solid var(--line, #eef0f3);
  background:      var(--bg-alt, #f7f9fc);
  border-radius:   10px 10px 0 0;
}
.lineItemCategoryFilterPopover__title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text, #111827);
}
.lineItemCategoryFilterPopover__title .fa { color: var(--accent, #2563eb); }
.lineItemCategoryFilterPopover__close {
  color:           var(--muted, #6b7280) !important;
  width:           22px;
  height:          22px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border-radius:   4px;
  text-decoration: none !important;
}
.lineItemCategoryFilterPopover__close:hover { background: rgba(15, 23, 42, 0.06); }
.lineItemCategoryFilterPopover__body {
  padding: 12px 14px;
}
.lineItemCategoryFilterPopover__label {
  display:         block;
  margin:          0 0 6px;
  font-size:       11px;
  font-weight:     600;
  letter-spacing:  0.02em;
  text-transform:  uppercase;
  color:           var(--color-text-label, #525a6b);
}
.lineItemCategoryFilterPopover__select { width: 100% !important; }
.lineItemCategoryFilterPopover__footer {
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  gap:             8px;
  padding:         10px 14px;
  border-top:      1px solid var(--line, #eef0f3);
  background:      var(--bg-alt, #f7f9fc);
  border-radius:   0 0 10px 10px;
}
.lineItemCategoryFilterPopover__clear,
.lineItemCategoryFilterPopover__apply {
  padding:       5px 14px;
  font-size:     12px;
  border-radius: 6px;
}

/* Preview modal — large-ish dialog with type-specific viewer body. */
.lineItemAssetPreviewModal .modal-dialog {
  width:     90%;
  max-width: 1100px;
}
.lineItemAssetPreviewModal__title {
  font-size:     14px;
  font-weight:   600;
  word-break:    break-all;
}
.lineItemAssetPreviewModal__body {
  padding:    0;
  background: #f3f4f6;
  min-height: 60vh;
  max-height: 80vh;
  overflow:   auto;
  display:    flex;
  align-items:flex-start;
  justify-content: center;
}
.lineItemAssetPreviewModal__frame {
  width:  100%;
  height: 80vh;
  border: 0;
}
.lineItemAssetPreviewModal__img {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
.lineItemAssetPreviewModal__img img {
  max-width:  100%;
  max-height: 76vh;
  object-fit: contain;
}
.lineItemAssetPreviewModal__fallback {
  text-align: center;
  padding:    48px 24px;
  color:      var(--muted, #6b7280);
}
.lineItemAssetPreviewModal__fallback .fa {
  font-size:    48px;
  color:        var(--muted, #6b7280);
  margin-bottom: 12px;
}
.lineItemAssetPreviewModal__fallback p { margin: 6px 0; }
.lineItemAssetPreviewModal__fallback .muted { font-size: 12px; }

/* Staged chips appear above the action buttons; give them a little
   breathing room when there's at least one. */
.lineItemAssetsChips--staged:not(:empty) {
  margin-bottom: 8px;
}

/* ── Add-Asset popover ─────────────────────────────────────────────── */
/* `position: absolute` so the popover scrolls with the page (stays glued
   to the Add Asset button it was launched from). The JS moves the
   element to <body> on first show, guaranteeing the offset parent is
   the document — otherwise positioned ancestors on the edit page would
   throw off the coordinates. */
.lineItemAssetsPopover {
  position:      absolute;
  z-index:       1100;
  width:         360px;
  background:    #ffffff;
  border:        1px solid var(--line, #e2e6ec);
  border-radius: 10px;
  box-shadow:    0 14px 40px rgba(15, 23, 42, 0.18);
  font-family:   var(--font-family);
}
.lineItemAssetsPopover.hide { display: none !important; }

/* Header — title on the left, close (×) on the right. Replaces the old
   tabs row now that the popover has a single source (file upload only). */
.lineItemAssetsPopover__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  border-bottom:   1px solid var(--line, #eef0f3);
  background:      var(--bg-alt, #f7f9fc);
  border-radius:   10px 10px 0 0;
}
.lineItemAssetsPopover__title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text, #111827);
}
.lineItemAssetsPopover__title .fa { color: var(--accent, #2563eb); }
.lineItemAssetsPopover__close {
  color:           var(--muted, #6b7280) !important;
  width:           22px;
  height:          22px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border-radius:   4px;
  text-decoration: none !important;
}
.lineItemAssetsPopover__close:hover { background: rgba(15, 23, 42, 0.06); }

.lineItemAssetsPopover__body {
  padding: 14px;
}
.lineItemAssetsPopover__pane { display: none; }
.lineItemAssetsPopover__pane.is-active { display: block; }

.lineItemAssetsDropZone {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         26px 12px;
  border:          2px dashed var(--line, #e2e6ec);
  border-radius:   8px;
  background:      var(--bg-alt, #f7f9fc);
  cursor:          pointer;
  transition:      border-color 0.15s ease, background 0.15s ease;
  margin:          0;
}
.lineItemAssetsDropZone:hover,
.lineItemAssetsDropZone.is-dragover {
  border-color: var(--accent, #2563eb);
  background:   rgba(var(--theme-primary-rgb), 0.04);
}
.lineItemAssetsDropZone__icon {
  font-size: 26px;
  color:     var(--accent, #2563eb);
  opacity:   0.85;
  margin-bottom: 6px;
}
.lineItemAssetsDropZone__title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--accent, #2563eb);
}
.lineItemAssetsDropZone__hint {
  font-size:   12px;
  color:       var(--muted, #6b7280);
  margin-top:  4px;
}
/* Force-hide the native file input — Bootstrap/vtiger have rules that
   would otherwise show the browser's "Choose File" button next to the
   drop zone. We rely on the wrapping <label for="..."> to open the picker. */
.lineItemAssetsFileInput,
input.lineItemAssetsFileInput,
input#lineItemAssetsFileInput { display: none !important; }

.lineItemAssetsSelectedFile {
  display:        flex;
  align-items:    center;
  gap:            8px;
  margin-top:     10px;
  padding:        6px 10px;
  background:     #ffffff;
  border:         1px solid var(--line, #e2e6ec);
  border-radius:  6px;
  font-size:      12px;
}
.lineItemAssetsSelectedFile.hide { display: none; }
.lineItemAssetsSelectedFile__name {
  flex:           1 1 auto;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.lineItemAssetsSelectedFile__clear {
  color:           var(--muted, #6b7280) !important;
  text-decoration: none !important;
}
.lineItemAssetsSelectedFile__clear:hover { color: var(--red, #dc2626) !important; }

.lineItemAssetsPopover__footer {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             10px;
  padding:         10px 14px 12px;
  border-top:      1px solid var(--line, #eef0f3);
  background:      var(--bg-alt, #f7f9fc);
  border-radius:   0 0 10px 10px;
}
.lineItemAssetsPopover__cancel,
.lineItemAssetsPopover__attach {
  padding:       6px 18px;
  font-size:     12px;
  border-radius: 6px;
}
.lineItemAssetsPopover__attach[disabled] {
  opacity:      0.55;
  cursor:       not-allowed;
}

/* Inline error inside the popover. Saves the user from hunting for a
   toast that might be obscured by the popover itself. */
.lineItemAssetsPopover__error {
  margin-top:    10px;
  padding:       8px 10px;
  font-size:     12px;
  color:         #b91c1c;
  background:    rgba(220, 38, 38, 0.08);
  border:        1px solid rgba(220, 38, 38, 0.25);
  border-radius: 6px;
}
.lineItemAssetsPopover__error.hide { display: none; }

/* Filled state — a file has been picked (but not yet saved). Shows the
   filename with a solid accent border so the user knows their selection
   was recognised; clicking again reopens the native picker to swap files. */
#lineItemTab .lineItemAttachmentLabel.hasFile {
  color:        var(--text) !important;
  background:   rgba(var(--theme-primary-rgb), 0.06) !important;
  border-color: var(--accent) !important;
  border-style: solid !important;
}
#lineItemTab .lineItemAttachmentLabel.hasFile .fa-paperclip {
  color: var(--accent) !important;
}
#lineItemTab .lineItemAttachmentLabel .lineItemAttachmentLabelText {
  display:       inline-block !important;
  max-width:     100px !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
  vertical-align: middle !important;
}
#lineItemTab .lineItemAttachmentInput {
  position: absolute !important;
  width:    1px !important;
  height:   1px !important;
  padding:  0 !important;
  margin:   -1px !important;
  overflow: hidden !important;
  clip:     rect(0, 0, 0, 0) !important;
  border:   0 !important;
}


/* ============================================================
   Hide the Margin column in the line-item table.

   Kept hidden via CSS (not removed from the template) so the inputs
   still post their values on save — only the UI is suppressed.

   Header cell: identified by its position right after `.costLabel`
     (Cost → [Margin] → List Price / Total).
   Body cells: identified by containing the `.cmargin` input.
   ============================================================ */
#lineItemTab tr > td.costLabel + td,
#lineItemTab tr > td:has(> input.cmargin) {
  display: none !important;
}


/* ============================================================
   Detail-view hover popovers — Tax / Discount / Charges breakdown.
   Triggered by `.inventoryLineItemDetails` links in the totals
   table; rendered via Bootstrap popover with a custom class added
   in Inventory/resources/Detail.js.
   ============================================================ */
.invDetailsPopover.popover {
  min-width: 220px !important; max-width: 360px !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--view-card-radius) !important;
  background: var(--color-card) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
  font-family: var(--font-family) !important;
  color: var(--text) !important;
}
.invDetailsPopover .popover-title {
  padding: 10px 14px !important;
  background: rgba(var(--theme-primary-rgb), 0.08) !important;
  color: var(--color-primary-dark) !important;
  font: 700 12px var(--font-family) !important;
  text-transform: uppercase !important; letter-spacing: 0.04em !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  border-radius: var(--view-card-radius) var(--view-card-radius) 0 0 !important;
}
.invDetailsPopover .popover-content {
  padding: 12px 14px !important;
  font-size: 12.5px !important; line-height: 1.7 !important;
  color: var(--text) !important;
  white-space: normal !important;
}
/* Bootstrap's data-content is plain text with <br> separators — visually
   format key/value pairs around the "=" so amounts are easy to scan. */
.invDetailsPopover .popover-content { font-variant-numeric: tabular-nums; }

/* ============================================================
   Line-item popovers — Set Discount, Group / Individual Tax,
   Charges & Taxes, Final Discount.
   Inputs/buttons inherit from the global rules
   (input.inputElement → §13, .btn-success → line 3805).
   We only define what's actually unique to these popovers.
   ============================================================ */

/* Shell — only set the size; Bootstrap handles the rest */
.lineItemPopover.popover { width: 380px !important; max-width: 92vw !important; }

/* Tinted header bar */
.lineItemPopover .popover-title {
  padding: 12px 16px !important;
  font: 700 13px var(--font-family) !important;
  color: var(--color-primary-dark) !important;
  text-transform: none !important;
  background: rgba(var(--theme-primary-rgb), 0.08) !important;
  border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.16) !important;
}

/* Form-rows table: 3 columns (label | input + unit | computed total) */
.lineItemPopover .popupTable { width: 100% !important; border-spacing: 0 6px !important; }
.lineItemPopover .popupTable td { padding: 6px 8px !important; border: 0 !important; vertical-align: middle !important; }
.lineItemPopover .popupTable td:first-child { width: 1% !important; white-space: nowrap; color: var(--muted); font-weight: 600; }
.lineItemPopover .popupTable td:nth-child(2) { white-space: nowrap; }   /* input + % on one line */
.lineItemPopover .popupTable td:nth-child(3) { width: 1% !important; white-space: nowrap; text-align: right; }

/* Numeric inputs inside the popover are narrower than default */
.lineItemPopover .popupTable input[type="text"],
.lineItemPopover .popupTable input[type="number"] { width: 80px !important; text-align: right !important; }

/* Actions row at the bottom of .popover-content */
.lineItemPopover .popover-content > .actionsDiv,
.lineItemPopover .popover-content > center,
.lineItemPopover .popover-content > .popoverActions {
  display: flex !important; justify-content: flex-end !important; gap: 10px !important;
  margin-top: 12px !important; padding-top: 10px !important;
  border-top: 1px solid var(--line) !important;
}

/* Cancel link — muted ghost button */
.lineItemPopover .cancelLink {
  color: var(--muted) !important; padding: 6px 12px !important;
  text-decoration: none !important; border-radius: 6px !important;
}
.lineItemPopover .cancelLink:hover { color: var(--text) !important; background: rgba(15,23,42,0.05) !important; }

/* ============================================================
   Mass Edit overlay: align the per-field "include" checkbox
   inline with the field label.
   ------------------------------------------------------------
   The mass-edit partial injects a checkbox inside .fieldLabel:

       <div class="fieldLabel alignMiddle">
         <input type="checkbox" id="include_in_mass_edit_xxx">&nbsp;
         Field Label
       </div>

   The base .fieldLabel rule is `display: block`, which lets the
   checkbox sit inline but on its own baseline — so it appears
   visually offset above the label text.  Inside the mass-edit
   form we make the label a flex row so the checkbox and text
   share a centred baseline.
   ============================================================ */
#massEditContainer .ev-col .fieldLabel,
#massEdit .ev-col .fieldLabel {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         6px !important;
  flex-wrap:   nowrap !important;
  white-space: normal !important;
}
#massEditContainer .ev-col .fieldLabel > input[type="checkbox"],
#massEdit .ev-col .fieldLabel > input[type="checkbox"] {
  margin:         0 !important;
  vertical-align: middle !important;
  flex:           0 0 auto !important;
  position:       static !important;
}
/* Drop the &nbsp; gap that the template injects after the checkbox —
   we use flex `gap` for spacing so the literal &nbsp; would double up. */
#massEditContainer .ev-col .fieldLabel > input[type="checkbox"] + br,
#massEdit .ev-col .fieldLabel > input[type="checkbox"] + br { display: none !important; }

/* ============================================================
   Bootbox confirm dialog buttons
   ------------------------------------------------------------
   showConfirmationBox() renders two buttons:
     • Confirm/Yes → .bootbox-accept .confirm-box-ok .btn-primary
     • Cancel/No   → .bootbox-cancel .btn-default
   Globally we want:
     • Yes  → green (success / --ok)
     • No   → red   (danger  / --red)
   Both with white text and a darker hover.

   Targeting both the bootbox-added classes (bootbox-accept /
   bootbox-cancel) AND data-bb-handler attributes covers Bootbox 4
   and 5 markup, so this stays correct across upgrades.
   ============================================================ */

/* --- Confirm / Yes button ---------------------------------- */
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-accept,
.bootbox.bootbox-confirm .modal-footer .btn[data-bb-handler="confirm"],
.bootbox.bootbox-confirm .modal-footer .btn.confirm-box-ok {
  background-color: var(--ok) !important;
  border-color:     var(--ok) !important;
  color:            #fff !important;
  box-shadow:       0 1px 2px rgba(15, 23, 42, 0.08) !important;
  transition:       background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease !important;
}
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-accept:hover,
.bootbox.bootbox-confirm .modal-footer .btn[data-bb-handler="confirm"]:hover,
.bootbox.bootbox-confirm .modal-footer .btn.confirm-box-ok:hover,
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-accept:focus,
.bootbox.bootbox-confirm .modal-footer .btn[data-bb-handler="confirm"]:focus,
.bootbox.bootbox-confirm .modal-footer .btn.confirm-box-ok:focus {
  background-color: #1e8e3e !important;            /* slightly darker green */
  border-color:     #1e8e3e !important;
  color:            #fff !important;
  box-shadow:       0 4px 12px rgba(30, 142, 62, 0.28) !important;
  outline:          none !important;
}
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-accept:active,
.bootbox.bootbox-confirm .modal-footer .btn[data-bb-handler="confirm"]:active,
.bootbox.bootbox-confirm .modal-footer .btn.confirm-box-ok:active {
  background-color: #196e30 !important;
  border-color:     #196e30 !important;
  transform:        translateY(1px) !important;
}

/* --- Cancel / No button ------------------------------------ */
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-cancel,
.bootbox.bootbox-confirm .modal-footer .btn[data-bb-handler="cancel"] {
  background-color: var(--red) !important;
  border-color:     var(--red) !important;
  color:            #fff !important;                /* fixes invisible label */
  box-shadow:       0 1px 2px rgba(15, 23, 42, 0.08) !important;
  transition:       background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease !important;
}
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-cancel:hover,
.bootbox.bootbox-confirm .modal-footer .btn[data-bb-handler="cancel"]:hover,
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-cancel:focus,
.bootbox.bootbox-confirm .modal-footer .btn[data-bb-handler="cancel"]:focus {
  background-color: #b1232f !important;            /* slightly darker red */
  border-color:     #b1232f !important;
  color:            #fff !important;
  box-shadow:       0 4px 12px rgba(177, 35, 47, 0.28) !important;
  outline:          none !important;
}
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-cancel:active,
.bootbox.bootbox-confirm .modal-footer .btn[data-bb-handler="cancel"]:active {
  background-color: #921a25 !important;
  border-color:     #921a25 !important;
  transform:        translateY(1px) !important;
}

/* Ensure inner span / icon inherit white text in both states */
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-accept,
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-accept *,
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-cancel,
.bootbox.bootbox-confirm .modal-footer .btn.bootbox-cancel * {
  color: #fff !important;
}

/* ============================================================
   POPUP LIST VIEW MODAL  ─  match the regular list view exactly.
   ------------------------------------------------------------
   What stays here = things ONLY the popup needs.
   What's NOT here = anything already covered by listview rules
   that already include #popupModal/.popupModal as ancestors:
     • thead th borders/colours      (line ~6386)
     • tbody td borders/colours      (line ~6492)
     • search row + button           (line ~6442 + ~6573)
     • table-container border reset  (line ~6363)
   ============================================================ */

/* 1. Make modal-dialog → modal-content → modal-body → popupContents
      → popupEntriesDiv → popupEntriesTableContainer a flex chain so
      the table can occupy the remaining space and the inner container
      scrolls natively. Bootstrap's modal doesn't flex by default. */
.popupModal {
  display: flex !important; align-items: stretch !important;
  width: 90vw !important; max-width: 1200px !important; margin: 24px auto !important;
}
.popupModal > .modal-content {
  display: flex !important; flex-direction: column !important; width: 100% !important;
  max-height: calc(100vh - 48px) !important; border-radius: 10px !important; overflow: hidden !important;
}
.popupModal > .modal-content > .modal-body,
.popupModal #popupPageContainer,
.popupModal #popupContents,
.popupModal #popupContents > .row:last-child,
.popupModal #popupContents > .row:last-child > .col-md-12,
.popupModal .popupEntriesDiv {
  display: flex !important; flex-direction: column !important;
  flex: 1 1 auto !important; min-height: 0 !important;
}
.popupModal > .modal-content > .modal-body { overflow: hidden !important; }

/* 2. Strip Bootstrap's .table-bordered table/cell borders — the listview
      cell-border rules at ~6386/~6492 already paint our preferred borders,
      we just need to kill Bootstrap's defaults that double-up on top. */
.popupModal .popupEntriesDiv table.table-bordered,
.popupModal .popupEntriesDiv table.table-bordered > thead > tr > th,
.popupModal .popupEntriesDiv table.table-bordered > tbody > tr > td {
  border-top: 0 !important; border-left: 0 !important;
}

/* 3. Inner scroll surface — popupEntriesTableContainer (or .bottomscroll-div
      in some popups) gets a bounded height + native scrollbar. */
.popupModal .popupEntriesDiv .popupEntriesTableContainer,
.popupModal .popupEntriesDiv .bottomscroll-div {
  flex: 1 1 auto !important; min-height: 0 !important;
  overflow-y: scroll !important; overflow-x: auto !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin; scrollbar-color: var(--crm-list-border, #e7eef5) transparent;
  background: var(--crm-list-surface, #ffffff) !important;
}
.popupModal .popupEntriesDiv .popupEntriesTableContainer::-webkit-scrollbar,
.popupModal .popupEntriesDiv .bottomscroll-div::-webkit-scrollbar { width: 10px; height: 10px; }
.popupModal .popupEntriesDiv .popupEntriesTableContainer::-webkit-scrollbar-thumb,
.popupModal .popupEntriesDiv .bottomscroll-div::-webkit-scrollbar-thumb {
  background: var(--crm-list-border, #e7eef5);
  border: 2px solid transparent; background-clip: padding-box; border-radius: 6px;
}
.popupModal .popupEntriesDiv .popupEntriesTableContainer::-webkit-scrollbar-thumb:hover,
.popupModal .popupEntriesDiv .bottomscroll-div::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #2563eb); background-clip: padding-box;
}
.popupModal .contents-topscroll { display: none !important; }   /* obsolete h-scroll proxy */

/* 4. Checkbox column (48px) — listview's first-th rule sets 156px which is
      too wide for the popup's compact dialog. Override + centre the bare
      <input type="checkbox"> the popup template drops in. */
.popupModal .popupEntriesDiv table.listViewEntriesTable thead tr th:first-child,
.popupModal .popupEntriesDiv table.listViewEntriesTable tr.listViewEntries td:first-child {
  width: 48px !important; min-width: 48px !important;
  padding: 0 !important; text-align: center !important; vertical-align: middle !important;
}
.popupModal .popupEntriesDiv table.listViewEntriesTable th:first-child input[type="checkbox"],
.popupModal .popupEntriesDiv table.listViewEntriesTable td:first-child input[type="checkbox"] {
  display: block !important; width: 15px !important; height: 15px !important;
  margin: 0 auto !important; accent-color: var(--color-primary, #2563eb) !important; cursor: pointer !important;
}

/* 5. Search-row first-cell — overrides the listview's 80px first-th width
      so the "Search" button label fits. The button itself is themed by the
      canonical control rule at line ~6573 which already includes
      .popupEntriesDiv as an ancestor. */
.popupModal .popupEntriesDiv table.listViewEntriesTable tr.searchRow th.inline-search-btn {
  width: auto !important; min-width: 96px !important;
  padding: 6px 8px !important; text-align: center !important;
}

/* 6. Sticky thead + searchRow inside the popup scroller. */
.popupModal .popupEntriesDiv table.listViewEntriesTable thead tr.listViewHeaders th { position: sticky !important; top: 0 !important; z-index: 3 !important; }
.popupModal .popupEntriesDiv table.listViewEntriesTable tr.searchRow th { position: sticky !important; top: 40px !important; z-index: 3 !important; }

/* 7. Drop bootstrap row negative margins so PopupNavigation lines up flush. */
.popupModal #popupContents > .row { margin-left: 0 !important; margin-right: 0 !important; }
.popupModal #popupContents > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
.popover-content {
	padding:0px;
}