@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&display=swap');

/* Colour palette */
:root {
  --sh-primary-dark: #20212c;
  --sh-electric-blue: #36c4f3;
  --sh-card-tint: #f0f9fd;
  --sh-text-light: #b0b4bc;
  --sh-text-dark: #3c424d;
  --sh-white: #ffffff;
  --sh-text-emphasis: #111827;
  --sh-text-mid: #374151;
  --sh-text-muted: #9ca3af;
  --sh-border: #e5e7eb;
  --sh-border-light: #d1d5db;
  --sh-bg-hover: #f3f4f6;
  --sh-bg-subtle: #f9fafb;
  --sh-error: #dc2626;
}

/* Typography */
nav,
.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a {
  font-family: Epilogue, 'DM Sans', 'Segoe UI Semibold', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

body,
input,
button,
select,
textarea {
  font-family: 'DM Sans', Arial, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Epilogue', Arial, sans-serif !important;
}

#navbar .dropdown-menu {
  /* Ensure dropdowns appear above other header content */
  z-index: 3000 !important;
  background-color: #fff !important;
  border: 1px solid var(--sh-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#navbar .dropdown-menu > li > a {
  color: var(--sh-text-mid) !important;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
  padding: 0px !important;
  margin-left: 0px !important; /* Override preform.bundle */
}

#navbar .dropdown-menu > li > a::after {
  display: none !important;
}

#navbar .dropdown-menu > li > a:hover,
#navbar .dropdown-menu > li > a:focus {
  color: var(--sh-text-emphasis) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0px !important;
  background-color: transparent !important;
}

#navbar .dropdown-menu > .dropdown-header {
  color: var(--sh-text-mid) !important;
  font-weight: 600 !important;
}

#navbar .dropdown-menu > .dropdown-header:has(a):hover {
  background-color: var(--sh-bg-hover) !important;
}

#navbar .dropdown-menu > .divider {
  background-color: var(--sh-border) !important;
}

#navbar .open > .dropdown-menu {
  /* Safety override in case another rule is keeping it hidden */
  display: block !important;
}

@media (min-width: 2000px) {
  .container {
    width: 70% !important;
  }
}

@media (min-width: 1200px) {
  /* Make sure navbar dropdowns (absolute positioned) aren't clipped */
  #navbar {
    overflow: visible !important;
  }

  .container {
    width: 90% !important;
  }

  .container:has(.entity-grid) {
    width: 100% !important;
  }

  .navbar .container {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    height: auto !important;
  }
  .navbar-header {
    flex-shrink: 0;
    float: none !important;
  }
  .navbar-collapse.collapse {
    flex: 1 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    height: auto !important;
    max-height: none !important;
    padding-top: 0 !important;
    overflow: visible !important;
  }
  .navbar-right.menu-bar {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
  }
  .navbar-right .navbar-nav.weblinks {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
  }
  .navbar-right .navbar-nav.weblinks > li {
    float: none !important;
    /* Allow long labels (e.g. "Dept of ...") to wrap instead of being clipped */
    white-space: normal !important;
  }

  /* Hide pipe dividers - use spacing instead */
  .navbar-nav.weblinks > li.divider-vertical {
    display: none !important;
  }

  /* Tighter link padding, cleaner styling */
  .navbar-nav.weblinks > li > a {
    padding: 10px 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--sh-text-dark) !important;
    position: relative;
    transition: color 0.3s ease-in-out;
  }

  /* Animated underline (exclude pill) */
  .navbar-nav.weblinks > li > a:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--sh-electric-blue);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-in-out;
  }

  /* Hover state - animate underline in from left */
  .navbar-inverse .navbar-nav > li > a:not(.dropdown-toggle):hover,
  .navbar-nav.weblinks > li > a:not(.dropdown-toggle):hover {
    background-color: transparent !important;
    color: var(--sh-primary-dark) !important;
    border-bottom: none !important;
    padding-bottom: 10px !important;
  }
  .navbar-nav.weblinks > li > a:not(.dropdown-toggle):hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* Active page - underline always visible */
  .navbar-nav.weblinks > li > a[aria-current='page']:not(.dropdown-toggle) {
    color: var(--sh-primary-dark) !important;
    font-weight: 600 !important;
  }
  .navbar-nav.weblinks > li > a[aria-current='page']:not(.dropdown-toggle)::after {
    transform: scaleX(1);
  }

  /* Dept text - muted, smaller */
  .navbar-nav.weblinks > li > span {
    font-size: 12px !important;
    color: var(--sh-text-muted) !important;
    padding: 0 8px !important;
    min-height: auto !important;
  }

  /* User profile pill — overrides the generic li > a rules above */
  .navbar-nav.weblinks > li.dropdown > a.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 18px !important;
    border: 1px solid var(--sh-border-light);
    border-radius: 9999px !important;
    background: #fff;
    color: var(--sh-text-mid) !important;
    font-size: 14px;
    font-weight: 400 !important;
    line-height: 1.4;
    text-decoration: none;
    height: auto;
  }

  .navbar-nav.weblinks > li.dropdown > a.dropdown-toggle:hover,
  .navbar-nav.weblinks > li.dropdown > a.dropdown-toggle:focus {
    background-color: #fff !important;
    border-color: var(--sh-text-muted);
    color: var(--sh-text-mid) !important;
    padding-bottom: 7px !important;
  }

  .navbar-nav.weblinks > li.dropdown > a.dropdown-toggle .caret {
    display: none;
  }

  .navbar-nav.weblinks > li.dropdown > a.dropdown-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--sh-text-muted);
    flex-shrink: 0;
  }
}

/* Hamburger button */
.navbar-toggle {
  border: none !important;
  background: transparent !important;
  padding: 8px 10px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
  background: rgba(54, 196, 243, 0.1) !important;
}

/* Navbar — fixed 64px tall so the 349×78 source logo and hamburger button
   both fit comfortably without the brand or toggle overflowing the bar. */
.navbar-static-top.navbar {
  min-height: 64px;
}

.navbar-brand {
  display: flex !important;
  align-items: center !important;
  height: 64px !important;
  padding: 0 15px !important;
  margin: 0 !important;
}

.navbar-brand a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.navbar-brand img {
  max-height: 36px !important;
  width: auto !important;
  padding: 0 !important;
  display: block;
}

/* Mobile nav (below lg) */
@media (max-width: 1199px) {
  /* Force hamburger behaviour at < 1200px regardless of which platform
     stylesheet is fighting us. Power Apps preform/pwa-style bundles ship
     a 768px breakpoint that hides the toggle and shows the inline nav at
     viewport widths where our desktop layout doesn't apply yet. */
  .navbar-toggle {
    display: block !important;
  }

  /* Let the navbar span the full viewport — bootstrap otherwise clamps
     .container to 750/970px at these widths, which pushes the brand and
     toggle into the middle of the screen instead of the edges. */
  .navbar > .container {
    width: 100% !important;
    max-width: none !important;
  }

  /* Flex the header so brand sits hard left and toggle hard right. Without
     this bootstrap's clearfix lets the children float and the header grows
     to the sum of their margin boxes, overflowing the 64px navbar. */
  .navbar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 64px;
    float: none !important;
  }

  /* Bootstrap's ::before / ::after clearfix pseudos become stray flex items
     in flex mode and break justify-content: space-between. */
  .navbar-header::before,
  .navbar-header::after {
    display: none !important;
  }

  .navbar-header > .navbar-brand,
  .navbar-header > .navbar-toggle {
    float: none !important;
  }

  .navbar-collapse.collapse:not(.in) {
    display: none !important;
  }

  /* White background during expand/collapse animation */
  .navbar-collapse.collapsing {
    background: var(--sh-white) !important;
    border-top: 1px solid var(--sh-border) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-left: -15px !important;
    margin-right: -15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .navbar-collapse.collapse.in {
    display: block !important;
    height: auto !important;
    overflow-y: auto !important;
    background: var(--sh-white) !important;
    border-top: 1px solid var(--sh-border) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    /* Break out of .container padding so bg spans full viewport */
    margin-left: -15px !important;
    margin-right: -15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Override .navbar-right float so menu is left-aligned and full-width */
  .navbar-right.menu-bar {
    float: none !important;
    width: 100% !important;
  }

  .navbar-nav.weblinks {
    float: none !important;
    margin: 7.5px 0 !important;
    padding-left: 0 !important;
  }

  .navbar-nav.weblinks > li {
    float: none !important;
  }

  .navbar-nav.weblinks > li > a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--sh-text-dark) !important;
  }

  /* Hide the desktop ::after underline on mobile — mobile uses ::before left bar instead */
  .navbar-nav.weblinks > li > a:not(.dropdown-toggle)::after {
    display: none !important;
  }

  .navbar-nav.weblinks > li.divider-vertical {
    display: none !important;
  }

  /* Animated left bar (mirrors desktop ::after underline but vertical) */
  .navbar-nav.weblinks > li > a:not(.dropdown-toggle) {
    position: relative;
    padding-left: 16px !important;
    transition: color 0.3s ease-in-out;
  }

  .navbar-nav.weblinks > li > a:not(.dropdown-toggle)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--sh-electric-blue);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease-in-out;
  }

  /* Hover */
  .navbar-inverse .navbar-nav > li > a:hover,
  .navbar-nav.weblinks > li > a:hover {
    background-color: transparent !important;
    color: var(--sh-primary-dark) !important;
    border-bottom: none !important;
    padding-bottom: 15px !important;
  }

  .navbar-nav.weblinks > li > a:not(.dropdown-toggle):hover::before {
    transform: scaleY(1);
    transform-origin: top;
  }

  /* Active page */
  .navbar-inverse .navbar-nav > li.active > a,
  .navbar-inverse .navbar-nav > li.active > a:hover,
  .navbar-inverse .navbar-nav > li.active > a:focus,
  .navbar-nav.weblinks > li > a[aria-current='page']:not(.dropdown-toggle) {
    background-color: transparent !important;
    color: var(--sh-primary-dark) !important;
    font-weight: 600 !important;
  }

  .navbar-nav.weblinks > li > a[aria-current='page']:not(.dropdown-toggle)::before {
    transform: scaleY(1);
  }

  /* Allow dropdown to float out when nav is fully open, but keep hidden during collapse animation */
  #navbar.in {
    overflow: visible !important;
  }

  /* Profile dropdown — float above page rather than expanding inline */
  .navbar-nav.weblinks > li.dropdown .dropdown-menu {
    position: absolute !important;
    float: left !important;
    left: 0 !important;
    right: auto !important;
  }

  /* Profile pill */
  .navbar-nav.weblinks > li.dropdown > a.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 18px !important;
    border: 1px solid var(--sh-border-light);
    border-radius: 9999px;
    background: #fff;
    color: var(--sh-text-mid) !important;
    font-weight: 400 !important;
    margin: 4px 0 4px 15px;
  }

  .navbar-nav.weblinks > li.dropdown > a.dropdown-toggle:hover {
    border-color: var(--sh-text-muted);
    background-color: #fff !important;
    color: var(--sh-text-mid) !important;
  }

  .navbar-nav.weblinks > li.dropdown > a.dropdown-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--sh-text-muted);
    flex-shrink: 0;
  }

  .navbar-nav.weblinks > li.dropdown > a.dropdown-toggle .caret {
    display: none;
  }
}

/* Buttons — shared base */
.sh-btn-dark,
.sh-btn-light {
  display: inline-block;
  padding: 14px 32px;
  border: 2px solid var(--sh-electric-blue);
  border-radius: 12px;
  font-family: 'Epilogue', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Dark variant: dark bg, white text → hover white bg, dark text */
.sh-btn-dark {
  background: var(--sh-primary-dark);
  color: var(--sh-white);
}

.sh-btn-dark:hover {
  background: var(--sh-white) !important;
  color: var(--sh-primary-dark) !important;
  border-color: var(--sh-electric-blue) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(54, 196, 243, 0.3);
}

/* Light variant: white bg, dark text → hover dark bg, white text */
.sh-btn-light {
  background: var(--sh-white);
  color: var(--sh-primary-dark);
}

.sh-btn-light:hover {
  background: var(--sh-primary-dark) !important;
  color: var(--sh-white) !important;
  border-color: var(--sh-electric-blue) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(54, 196, 243, 0.3);
}

.sh-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--sh-white);
  border-radius: 16px;
  padding: 30px 20px;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
}

/* Customer portal card links */
.sh-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--sh-white);
  border-radius: 16px;
  padding: 30px 20px;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.sh-card-link h3 {
  font-family: 'Epilogue', sans-serif;
  font-size: 20px;
  color: var(--sh-primary-dark);
  margin-bottom: 8px;
  font-weight: 500;
}

.sh-card-link p {
  font-family: 'DM Sans', sans-serif;
  color: var(--sh-text-dark);
  font-size: 14px;
  line-height: 1.5;
}

.sh-card-link img,
.sh-card-link svg {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  object-fit: contain;
}

/* Suppress card hover when cursor moves onto a shortcut */
.sh-card-link:hover:not(:has(.sh-card-shortcut:hover)) {
  border-color: var(--sh-electric-blue) !important;
  background: var(--sh-card-tint) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

.sh-card-link:active:not(:has(.sh-card-shortcut:active)) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Inner link wrapper for cards that contain nested links */
.sh-card-link > a {
  color: inherit;
}

.sh-card-link > a h3 {
  color: var(--sh-primary-dark);
}

/* Shortcut links within card-link (e.g. Orders quick-links) */
.sh-card-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  text-decoration: none !important;
  color: var(--sh-text-dark);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.sh-card-shortcut:hover {
  color: var(--sh-electric-blue);
}

.sh-card-shortcut:hover > span:first-child {
  text-decoration: underline;
}

.logo-container {
  background-color: var(--sh-white);
  border-radius: 16px;
  padding: 8px 8px; /* Your breathing room (top/bottom, left/right) */

  /* Flexbox absolutely forces the image to stay centered inside the white box */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: auto; /* Kills any fixed height causing the box to collapse */
  box-sizing: border-box;
}

.logo-container img {
  max-height: 80px; /* Prevents the logo from being comically massive */
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0; /* THIS kills the rogue spacing that was pushing your image down */
  mix-blend-mode: normal; /* Resets blending so the image doesn't ghost into the dark background */
}

/* Hero title section — below md */
@media (max-width: 1200px) {
  #title-section {
    flex-direction: column;
    align-items: center;
  }

  .sh-hero-subtitle {
    margin-top: 24px;
  }
}

/* Sticky footer — body is a flex column; .wrapper-body (between navbar
   and footer) grows to fill the remaining space, pushing <footer> to
   the bottom. Overrides the old calc()-based min-height in theme.css. */
html {
  height: 100% !important;
}

body {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.wrapper-body {
  flex: 1 0 auto !important;
  min-height: auto !important;
}

/* Remove focus outline on click; keep it for keyboard nav */
.navbar-nav.weblinks > li > a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.navbar-static-top,
.navbar {
  /* Bootstrap puts some border radius on. */
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

/* --------------------------------------------------------------------------
   Entity forms & entity lists — reference: white card, even padding, no rules
   above actions, dark primary + optional light secondary (Back) buttons.
   -------------------------------------------------------------------------- */

.entitylist .content-panel {
  border-radius: 16px !important;
}

.entitylist .content-panel .panel-body {
  border-radius: 16px !important;
}

.crmEntityFormView,
.entitylist.entity-grid,
.entitylist .panel-body {
  background-color: var(--sh-white) !important;
  color: var(--sh-text-dark) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 32px 32px 28px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Outer snippet wrapper — flatten so only the inner .entity-grid card is visible.
   Base theme.css sets bg + 1px border on .entitylist; without this the outer wrapper
   shows as a square box behind the rounded inner card. */
.entitylist:not(.entity-grid) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Entity grid table — modern restyle of the platform-rendered table.
   Markup is fixed by Power Pages: .entity-grid > .view-toolbar + .view-grid > table.table
   We restyle in place; sort/search/pagination behaviour is preserved.
   -------------------------------------------------------------------------- */

/* Toolbar (view selector + search bar) — flex with the view selector hard
   left and everything else hard right. Using margin-right: auto on the
   leftmost item is more robust than justify-content: space-between because
   it works regardless of how many siblings the platform renders. */
.entity-grid .view-toolbar,
#entitylist-filters {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 0 0 20px 0 !important;
  border: none !important;
  margin: 0 !important;
}

/* Push the toolbar-actions group (search + export) hard right regardless of
   what's on the left — works whether the view selector / pills exist or not. */
.entity-grid .view-toolbar .toolbar-actions {
  margin-left: auto !important;
}

/* Search input + button compound — styled as a single sh-btn-dark unit.
   Border lives on the .entitylist-search wrapper so the input and button
   read as one rounded element; the children are borderless and clip to the
   wrapper's rounded corners via overflow: hidden. */
.entity-grid .view-toolbar .entitylist-search {
  width: 280px;
  border: 0.5px solid var(--sh-electric-blue) !important;
  border-radius: 8px;
  overflow: hidden;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.entity-grid .view-toolbar .entitylist-search:hover,
.entity-grid .view-toolbar .entitylist-search:active,
.entity-grid .view-toolbar .entitylist-search:focus {
  border: 2px solid var(--sh-electric-blue) !important;
}

.entity-grid .view-toolbar .entitylist-search .form-control {
  border: none !important;
  border-radius: 0 !important;
  color: var(--sh-primary-dark) !important;
  height: auto !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

.entity-grid .view-toolbar .entitylist-search .form-control::placeholder {
  color: var(--sh-text-light) !important;
  opacity: 1;
}

/* Override custom.css:41 — `.entitylist-search .input-group-btn { padding: 0 5px }`
   adds horizontal padding that creates a visible gap between the input and
   the search button. Reset it inside the entity grid context. */
.entity-grid .view-toolbar .entitylist-search .input-group-btn {
  padding: 0 !important;
}

.entity-grid .view-toolbar .entitylist-search .btn {
  border: none !important;
  border-left: 1px solid var(--sh-electric-blue) !important;
  border-radius: 0 !important;
  background: var(--sh-primary-dark) !important;
  color: var(--sh-white) !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
}

.entity-grid .view-toolbar .entitylist-search .btn:hover {
  background: color-mix(in srgb, var(--sh-primary-dark), transparent 10%) !important;
}

.entity-grid .view-toolbar .entitylist-search:hover .form-control::placeholder,
.entity-grid .view-toolbar .entitylist-search:focus-within .form-control::placeholder {
  color: var(--sh-text-muted) !important;
}

/* Search hint info icon — sits to the left of the search input. Hover reveals
   a custom tooltip explaining the wildcard syntax. Injected by the footer JS. */
.entity-grid .sh-search-hint {
  appearance: none;
  background: transparent;
  border: none;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sh-text-muted);
  cursor: help;
  position: relative;
  transition: color 0.15s ease;
}

.entity-grid .sh-search-hint:hover,
.entity-grid .sh-search-hint:focus-visible {
  color: var(--sh-electric-blue);
  outline: none;
}

.entity-grid .sh-search-hint svg {
  display: block;
}

/* Custom tooltip — overrides the slow native title tooltip. Positioned below
   the icon so it doesn't push toolbar content around. */
.entity-grid .sh-search-hint::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  padding: 10px 12px;
  background: var(--sh-primary-dark);
  color: var(--sh-white);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
  z-index: 100;
}

.entity-grid .sh-search-hint:hover::after,
.entity-grid .sh-search-hint:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* Right-side toolbar wrapper (search + export) — flex so children align
   horizontally with consistent spacing instead of relying on Bootstrap floats */
.entity-grid .view-toolbar .toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  float: none !important;
}

.entity-grid .view-toolbar .toolbar-actions > * {
  float: none !important;
  margin: 0 !important;
}

/* Export button — restyle the platform-rendered .entitylist-download anchor
   as an sh-btn-dark variant, sized to match the toolbar's other controls. */
.entity-grid .entitylist-download,
.entitylist .btn-entitylist-filter-submit {
  display: inline-block;
  padding: 9px 22px !important;
  border: 2px solid var(--sh-electric-blue) !important;
  border-radius: 8px !important;
  background: var(--sh-primary-dark) !important;
  color: var(--sh-white) !important;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.entity-grid .entitylist-download:hover,
.entity-grid .entitylist-download:focus,
.entitylist .btn-entitylist-filter-submit:hover,
.entitylist .btn-entitylist-filter-submit:focus {
  background: var(--sh-white) !important;
  color: var(--sh-primary-dark) !important;
  border-color: var(--sh-electric-blue) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(54, 196, 243, 0.3);
  text-decoration: none !important;
}

/* Segmented view pills — replaces the platform's dropdown view selector for
   entity grids that have 2+ views. Activated by JS that moves the platform
   .view-select offscreen and injects .sh-view-pills as a sibling. */
.entity-grid .sh-view-pills {
  display: inline-flex;
  align-items: stretch;
  background: var(--sh-bg-subtle);
  border: 1px solid var(--sh-border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.entity-grid .sh-view-pill {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-family: 'Epilogue', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--sh-text-mid);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.entity-grid .sh-view-pill:hover:not(.active) {
  background: var(--sh-bg-hover);
  color: var(--sh-text-emphasis);
}

.entity-grid .sh-view-pill.active {
  background: var(--sh-white);
  color: var(--sh-primary-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: default;
}

.entity-grid .sh-view-pill:focus-visible {
  outline: 2px solid var(--sh-electric-blue);
  outline-offset: 1px;
}

/* Wrap the table so wide grids scroll horizontally inside the card */
.entity-grid .view-grid {
  overflow-x: auto;
  border-top: 1px solid var(--sh-border);
}

.entity-grid .view-grid .table {
  margin-bottom: 0 !important;
  border: none !important;
  border-collapse: separate;
  border-spacing: 0;
}

/* Header row */
.entity-grid .view-grid .table > thead > tr > th {
  background: var(--sh-white) !important;
  border: none !important;
  border-bottom: 1px solid var(--sh-border) !important;
  padding: 12px 12px !important;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sh-text-muted) !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

.entity-grid .view-grid .table > thead > tr > th > a {
  color: var(--sh-text-muted) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.entity-grid .view-grid .table > thead > tr > th > a:hover,
.entity-grid .view-grid .table > thead > tr > th.sort > a {
  color: var(--sh-text-emphasis) !important;
}

/* Sort arrow — recolour the platform-rendered Font Awesome icon */
.entity-grid .view-grid .table > thead > tr > th .fa-arrow-down,
.entity-grid .view-grid .table > thead > tr > th .fa-arrow-up {
  color: var(--sh-electric-blue) !important;
  font-size: 10px;
}

/* Body cells — compact density: tight padding, smaller font, single-line so
   multi-line content (e.g. addresses) collapses and rows stay short. */
.entity-grid .view-grid .table > tbody > tr > td {
  background: var(--sh-white) !important;
  border: none !important;
  border-bottom: 1px solid var(--sh-border) !important;
  padding: 10px 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: var(--sh-text-dark) !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

/* Last row has no bottom border — the card edge serves the same purpose */
.entity-grid .view-grid .table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* Row hover */
.entity-grid .view-grid .table > tbody > tr:hover > td {
  background: var(--sh-bg-subtle) !important;
}

/* Sticky first column — keeps the Order Number visible while scrolling
   horizontally through wide views. Requires opaque background on the cell so
   row content sliding underneath doesn't show through. */
.entity-grid .view-grid .table > thead > tr > th:first-child,
.entity-grid .view-grid .table > tbody > tr > td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  /* Right edge separator so the sticky column reads as detached from the
     scrolling content rather than a styling glitch */
  box-shadow: 1px 0 0 0 var(--sh-border);
}

/* Header sits above body cells when both are sticky */
.entity-grid .view-grid .table > thead > tr > th:first-child {
  z-index: 2;
}

/* Hover background needs to apply to the sticky cell too, otherwise the
   first column stays white while the rest of the row tints */
.entity-grid .view-grid .table > tbody > tr:hover > td:first-child {
  background: var(--sh-bg-subtle) !important;
}

/* Links inside cells (e.g. quote links injected by setQuoteLinks) */
.entity-grid .view-grid .table > tbody > tr > td a {
  color: var(--sh-electric-blue) !important;
  text-decoration: none;
}

.entity-grid .view-grid .table > tbody > tr > td a:hover {
  text-decoration: underline;
}

/* Empty / error / loading message states */
.entity-grid .message {
  padding: 32px 16px !important;
  color: var(--sh-text-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  text-align: center;
}

.crmEntityFormView table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Second column is layout-only — collapse so fields and submit use full width and align */
.crmEntityFormView td.zero-cell {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* One consistent row gap (label → field → next label), including above submit */
.crmEntityFormView .cell {
  padding-bottom: 20px !important;
  vertical-align: top !important;
}

.crmEntityFormView td.cell:not(.zero-cell),
.crmEntityFormView td.captcha-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.crmEntityFormView td.form-control-cell + td.form-control-cell {
  padding-left: 20px !important;
}

/* Field wrapper — portal often adds horizontal offset here */
.crmEntityFormView .cell .info {
  padding-left: 0 !important;
  margin-left: 0 !important;
  max-width: 100% !important;
}

/*
 * Spacer row only: many real field rows also use td.zero-cell as a layout column,
 * so never hide tr:has(td.zero-cell) alone — that hid every field row.
 * Only hide rows that have both spacer cells and no inputs / selects / textareas.
 */
.crmEntityFormView tr:has(td.clearfix.cell):has(td.zero-cell):not(:has(input, select, textarea)) {
  display: none !important;
}

.crmEntityFormView h1,
.crmEntityFormView h2,
.crmEntityFormView h3,
.crmEntityFormView h4,
.entitylist h1,
.entitylist h2,
.entitylist h3 {
  color: var(--sh-primary-dark) !important;
  font-family: 'Epilogue', sans-serif !important;
}

.crmEntityFormView label,
.crmEntityFormView .control-label {
  font-family: 'Epilogue', sans-serif !important;
  font-size: 14px !important;
  color: var(--sh-text-emphasis) !important;
  letter-spacing: 0.01em;
  display: inline-block;
  margin-bottom: 6px !important;
}

.crmEntityFormView .validator-text,
.crmEntityFormView .cell div.info div.validators,
.crmEntityFormView .field-validation-error,
.crmEntityFormView .help-block.error {
  color: var(--sh-error) !important;
  font-size: 13px !important;
}

.crmEntityFormView .form-group {
  margin-bottom: 0 !important;
}

/* Inputs — light border, subtle radius, no inset shadow */
/* custom.css sets global select.form-control — reset inside entity forms */
.crmEntityFormView select.form-control {
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0 !important;
}

.crmEntityFormView textarea,
.crmEntityFormView select,
.crmEntityFormView .form-control,
.crmEntityFormView input[type='text'],
.crmEntityFormView input[type='email'],
.crmEntityFormView input[type='tel'],
.crmEntityFormView input[type='number'],
.crmEntityFormView input[type='url'],
.crmEntityFormView input[type='password'],
.crmEntityFormView input[type='search'] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--sh-text-emphasis) !important;
  background-color: var(--sh-white) !important;
  box-shadow: none !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.crmEntityFormView input[type='email'] {
  text-decoration: none !important; /* dynamics puts underline on emails */
}

.crmEntityFormView textarea::placeholder,
.crmEntityFormView input::placeholder {
  color: var(--sh-text-muted) !important;
  opacity: 1 !important;
}

.crmEntityFormView textarea:focus,
.crmEntityFormView select:focus,
.crmEntityFormView .form-control:focus,
.crmEntityFormView input[type='text']:focus,
.crmEntityFormView input[type='email']:focus,
.crmEntityFormView input[type='tel']:focus,
.crmEntityFormView input[type='number']:focus,
.crmEntityFormView input[type='url']:focus,
.crmEntityFormView input[type='password']:focus,
.crmEntityFormView input[type='search']:focus {
  border-color: var(--sh-electric-blue) !important;
  box-shadow: 0 0 0 2px rgba(54, 196, 243, 0.25) !important;
  outline: none !important;
}

.crmEntityFormView a:not(.btn):not(.list-group-item) {
  color: var(--sh-electric-blue) !important;
}

.crmEntityFormView a:not(.btn):not(.list-group-item):hover,
.crmEntityFormView a:not(.btn):not(.list-group-item):focus {
  color: var(--sh-primary-dark) !important;
}

/* Primary — dark bar, white text, bright blue outline (reference submit / Continue) */
.crmEntityFormView .btn-primary,
.crmEntityFormView input[type='submit'].btn-primary,
.crmEntityFormView button[type='submit'].btn-primary,
.crmEntityFormView input[type='submit']:not(.btn-default),
.crmEntityFormView button[type='submit']:not(.btn-default) {
  color: var(--sh-white) !important;
  background-color: var(--sh-primary-dark) !important;
  background-image: none !important;
  border: 2px solid var(--sh-electric-blue) !important;
  border-radius: 8px !important;
  padding: 11px 28px !important;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Left-align primary action row (button may be nested inside .cell) */
.crmEntityFormView .cell:has(.btn.btn-primary),
.crmEntityFormView .cell:has(input[type='submit'].btn-primary),
.crmEntityFormView .cell:has(button[type='submit'].btn-primary) {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  text-align: left !important;
}

.crmEntityFormView .cell:has(.actions) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-align: left !important;
}

/* Submit row: no top border; beat platform floats / pull-right on buttons */
.crmEntityFormView .actions {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 20px 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  clear: both !important;
}

.crmEntityFormView .actions .btn,
.crmEntityFormView .actions .btn.pull-right,
.crmEntityFormView .actions .btn.pull-left {
  float: none !important;
}

/* Single primary only — keep left flush with fields */
.crmEntityFormView .actions:not(:has(.btn-default)) {
  justify-content: flex-start !important;
}

.crmEntityFormView .btn-primary:hover,
.crmEntityFormView .btn-primary:focus,
.crmEntityFormView .btn-primary.focus,
.crmEntityFormView input[type='submit']:not(.btn-default):hover,
.crmEntityFormView button[type='submit']:not(.btn-default):hover {
  color: var(--sh-primary-dark) !important;
  background-color: var(--sh-white) !important;
  border-color: var(--sh-electric-blue) !important;
  box-shadow: 0 4px 12px rgba(54, 196, 243, 0.3) !important;
}

/* Secondary — white, dark outline (reference “Back”) */
.crmEntityFormView .btn-default {
  border-radius: 8px !important;
  background-color: var(--sh-white) !important;
  border: 1px solid var(--sh-text-emphasis) !important;
  color: var(--sh-text-emphasis) !important;
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 600 !important;
  padding: 11px 24px !important;
}

.crmEntityFormView .btn-default:hover,
.crmEntityFormView .btn-default:focus {
  background-color: var(--sh-bg-subtle) !important;
  border-color: var(--sh-text-emphasis) !important;
  color: var(--sh-text-emphasis) !important;
}

.crmEntityFormView .captcha {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
}

/* Legacy custom.css used aqua borders on .captcha-cell .input — override */
.crmEntityFormView .captcha-cell .input,
.crmEntityFormView .captcha input[type='text'] {
  border-color: var(--sh-border) !important;
  border-radius: 6px !important;
}

.crmEntityFormView .page-header {
  border-bottom: 1px solid var(--sh-border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
}

.crmEntityFormView fieldset {
  margin-bottom: 0 !important; /* override preform.bundle which is adding unnecessary margin between bottom field of entityform and the submit button */
}

.instructions {
  color: var(--sh-text-light) !important;
  font-size: 14px !important;
  margin-bottom: 10px;
}

/* Success message after submission */
#MessagePanel.alert-success {
  background-color: var(--sh-white) !important;
  color: var(--sh-text-emphasis) !important;
  border: 2px solid var(--sh-electric-blue) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  text-align: center;
}

#MessagePanel.alert-success .close {
  display: none !important;
}

/* Hide "Attach a file" label */
#support-form #AttachFileLabel {
  display: none;
}

/* Style the file input to match form design */
.crmEntityFormView .file-cell {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.crmEntityFormView .file-cell .info {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.crmEntityFormView input#file-upload-button {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--sh-text-emphasis) !important;
  background-color: var(--sh-white) !important;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.crmEntityFormView input#file-upload-button:focus {
  border-color: var(--sh-electric-blue) !important;
  box-shadow: 0 0 0 2px rgba(54, 196, 243, 0.25) !important;
  outline: none !important;
}

@media (max-width: 768px) {
  .flex-sm-column {
    flex-direction: column !important;
  }
}

@media (min-width: 992px) {
  .flex-md-row {
    flex-direction: row !important;
  }
}