/* ==========================================================================
   GEOSmart Portal — v0 redesign overrides
   Loaded after css/app.min.css. Presentation only: no layout, link target,
   Swup, or mobile drawer behaviour is changed here.
   ========================================================================== */

:root {
  /* Top bars — edit on :root / html in DevTools:
       --geosmart-topbar-bg         → left nav bar + right utilities bar
       --geosmart-topbar-surface    → active pill / Support button / alert badge fills
       --geosmart-topbar-on-bg      → text + icons sitting on the bar background
       --geosmart-topbar-ink        → text on surface chips (active / Support / badge)
       --geosmart-topbar-hover-bg   → hover / open plate background
       --geosmart-topbar-hover-ink  → hover / open plate text + icons */
  --geosmart-topbar-bg: #ecedf3;
  --geosmart-topbar-surface: #1844be;
  --geosmart-topbar-on-bg: #333439;
  --geosmart-topbar-ink: #f2f4f6;
  --geosmart-topbar-hover-bg: #d7d8df;
  --geosmart-topbar-hover-ink: var(--geosmart-topbar-on-bg);

  /* Shared brand blue — CTAs, chart wells, AI onboarding, marketing /
     notification pills. Does not drive the top bars. */
  --geosmart-brand-blue: #1844be;
  --geosmart-brand-blue-hover: color-mix(in srgb, var(--geosmart-brand-blue) 82%, #000000);

  /* Shared hairline — header bottom edge + card outlines. */
  --geosmart-border: #e0e0ed;

  /* Aliases used by topbar rules below */
  --v0-navy: var(--geosmart-topbar-bg);
  --v0-navy-ink: var(--geosmart-topbar-ink);
  --v0-on-navy: var(--geosmart-topbar-on-bg);
  --v0-on-navy-muted: color-mix(in srgb, var(--geosmart-topbar-on-bg) 72%, transparent);
  --v0-on-navy-hover: var(--geosmart-topbar-hover-bg);
  --v0-pill-radius: 999px;
  --v0-group-radius: 22px;
  /* Metric icon/progress chips (Total Applications, Approved, etc.) —
     kept on the legacy accent; not tied to --geosmart-brand-blue. */
  --v0-metric-blue: #2251d6;
  /* Shared by the three header panels. Two soft layers instead of one heavy
     drop: the panels read as lifted rather than floating. */
  --v0-panel-shadow: 0 2px 4px -1px rgba(15, 23, 42, 0.04),
    0 12px 28px -8px rgba(15, 23, 42, 0.1);
  /* Dense frosted chrome — original mobile glass, shared with the desktop bar. */
  --geosmart-chrome-glass-bg: rgba(255, 255, 255, 0.90);
  --geosmart-chrome-glass-blur: 12px;
  --geosmart-chrome-glass-edge: 0 1px 0 var(--geosmart-border);
  --scrollbar-width: 0px;
}

/* --------------------------------------------------------------------------
   Top bar nav — navy group with a white active pill
   Scoped to .portal-topbar__menu only. The mobile drawer (.sidebar.mobile-drawer)
   keeps the original app.min.css link / active styles (gray text, blue fill).
   -------------------------------------------------------------------------- */

.portal-topbar__menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: var(--v0-group-radius);
  background: var(--geosmart-topbar-bg);
}

.portal-topbar__menu .sidebar__item {
  border-radius: var(--v0-pill-radius);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v0-on-navy-muted);
}

.portal-topbar__menu .sidebar__item .icon {
  fill: var(--geosmart-topbar-on-bg);
  opacity: 0.72;
}

.portal-topbar__menu .sidebar__item:hover {
  background: var(--geosmart-topbar-hover-bg);
  color: var(--geosmart-topbar-hover-ink);
}

.portal-topbar__menu .sidebar__item:hover .icon {
  fill: var(--geosmart-topbar-hover-ink);
  opacity: 1;
}

.portal-topbar__menu .sidebar__item.active,
.portal-topbar__menu .sidebar__item.active:hover {
  background: var(--geosmart-topbar-surface);
  color: var(--geosmart-topbar-ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(9, 21, 55, 0.24);
}

.portal-topbar__menu .sidebar__item.active .icon,
.portal-topbar__menu .sidebar__item.active:hover .icon {
  fill: var(--geosmart-topbar-ink);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Mobile drawer menu — original link + active styles (deploy reference)
   Explicit resets so any leftover chrome cannot bleed into the drawer.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1023px) {
  .sidebar.mobile-drawer .sidebar__menu {
    display: block;
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .sidebar.mobile-drawer .sidebar__item,
  .sidebar.mobile-drawer .sidebar__link {
    height: 48px;
  }

  .sidebar.mobile-drawer .sidebar__item .sidebar__icon,
  .sidebar.mobile-drawer .sidebar__link .sidebar__icon {
    width: 48px;
    height: 48px;
  }

  .sidebar.mobile-drawer .sidebar__item {
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: normal;
    color: #808191;
    background: transparent;
    box-shadow: none;
  }

  /* Nav items only — do not paint profile-row icons (e.g. active bell). */
  .sidebar.mobile-drawer .sidebar__item .icon,
  .sidebar.mobile-drawer .sidebar__item .sidebar__icon .icon {
    fill: #1B1D21;
    opacity: 0.4;
  }

  .sidebar.mobile-drawer .sidebar__item:hover {
    background: transparent;
    color: var(--geosmart-brand-blue);
  }

  .sidebar.mobile-drawer .sidebar__item:hover .icon {
    fill: var(--geosmart-brand-blue);
    opacity: 1;
  }

  .sidebar.mobile-drawer .sidebar__item.active,
  .sidebar.mobile-drawer .sidebar__item.active:hover {
    background: var(--geosmart-brand-blue);
    color: #ffffff;
    font-weight: 600;
    box-shadow: none;
  }

  .sidebar.mobile-drawer .sidebar__item.active .icon,
  .sidebar.mobile-drawer .sidebar__item.active:hover .icon {
    fill: #ffffff;
    opacity: 1;
  }

  .sidebar.mobile-drawer .sidebar__details .sidebar__link.active .icon {
    fill: #ffffff !important;
    opacity: 1 !important;
    color: #ffffff;
  }
}

/* Phone drawer: tighter side inset, a little more room above. Bottom stays on
   the existing 20px / 52px (open, for the demo ribbon) values. */
@media only screen and (max-width: 767px) {
  .sidebar.mobile-drawer .sidebar__wrapper,
  .sidebar.mobile-drawer.active .sidebar__wrapper {
    padding-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* --------------------------------------------------------------------------
   Header chrome — navy pill housing search + notifications (desktop only;
   at 1023px and below the header is the white fixed bar the drawer logic
   relies on)
   -------------------------------------------------------------------------- */

/* Drop the magnifying glass inside the search input on all viewports. */
.header .search__toggle .icon-search {
  display: none !important;
}

.header .search:not(.active) .search__toggle {
  width: 0 !important;
  pointer-events: none;
}

.header .search:not(.active) .search__input {
  padding-left: 12px !important;
}

@media only screen and (max-width: 767px) {
  .search__toggle {
    left: 23px;
    width: 32px;
  }

  .search__input {
    height: 65px;
    padding: 0 10px 0 63px !important;
    background: var(--geosmart-border);
    border-radius: 0;
  }

  .search__input:focus {
    background: var(--geosmart-border);
  }
}

@media only screen and (min-width: 1024px) {
  .header {
    box-sizing: border-box;
    gap: 3px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    height: 50px;
    padding: 4px;
    border-radius: 19px;
    background: var(--geosmart-topbar-bg);
  }

  /* Icon-only search trigger; the field opens as a dropdown below the bar. */
  /* Without a hover plate the 32px hit box no longer reads as the icon's
     bounds, so the glyph is optically centred instead: 15px of clear space to
     the bar edge and the same again to the bell, which stays put. */
  .header .header__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    transform: translateX(3px);
  }

  .header .header__search .icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    fill: var(--geosmart-topbar-on-bg);
  }

  .header .header__search:hover {
    background: transparent;
    box-shadow: none;
  }

  .header .header__search.active {
    background: var(--geosmart-topbar-hover-bg);
    box-shadow: none;
  }

  .header .header__search.active .icon {
    fill: var(--geosmart-topbar-hover-ink);
  }

  /* Pull the inline field out of the bar and park it as a dropdown panel. */
  .header .search {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    z-index: 60;
    width: min(320px, calc(100vw - 48px));
    height: auto;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    /* Delay hiding visibility until the fade finishes; show it immediately so
       the input can take focus on open (visibility:hidden blocks focus). */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  .header .search.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }

  .header .search__field {
    padding: 8px;
    border: 1px solid var(--geosmart-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--v0-panel-shadow);
  }

  .header .search__input {
    height: 40px;
    padding: 0 12px;
    border-radius: 9px;
    background: #f4f6fb;
    color: #11142d;
  }

  .header .search__input:focus {
    background: #f4f6fb;
  }

  .header .search__input::-webkit-input-placeholder {
    color: #808191;
  }

  .header .search__input::placeholder {
    color: #808191;
  }

  .header .search.active .search__toggle {
    width: 40px;
  }

  .header .search.active .search__input {
    padding-left: 40px;
  }

  .header .search__toggle .icon,
  .header .search__toggle:hover .icon {
    fill: #1b1d21;
  }

  .header .search .global-search-typeahead {
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: auto;
  }

  .header .notifications__open {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .header .notifications__open .icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    fill: var(--geosmart-topbar-on-bg);
  }

  .header .notifications__open:hover {
    background: transparent;
    box-shadow: none;
  }

  .header .notifications.active .notifications__open {
    background: var(--geosmart-topbar-hover-bg);
    box-shadow: none;
  }

  .header .notifications.active .notifications__open .icon {
    fill: var(--geosmart-topbar-hover-ink);
  }

  /* Same surface + ink as active nav pill / Support button */
  .header .notifications__counter {
    top: -2px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 9px;
    background: var(--geosmart-topbar-surface);
    color: var(--geosmart-topbar-ink);
  }

  /* Search, notifications and the account menu all hang off the bar instead of
     their own triggers, so the three panels share its width and one top edge
     and differ only in height. The triggers give up their positioning context
     for that; the unread counter keeps its own, anchored to the bell button.

     Only the top bar gets this. The pages still rendering the header inside
     .page__row_head have no account menu or support button, leaving a bar too
     narrow to hold a panel, so there the two dropdowns stay on their triggers. */
  .portal-topbar .header .notifications,
  .portal-topbar .header .topbar-user {
    position: static;
  }

  .portal-topbar .header .search,
  .portal-topbar .header .notifications .notifications__wrap,
  .portal-topbar .header .topbar-user__menu {
    top: calc(100% + 14px);
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Top bar — three column chrome that replaces the sidebar at 1024px and up.
   Below that the whole thing is a pass-through so the fixed .header bar and
   the sidebar drawer carry the navigation.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1023px) {
  .portal-topbar,
  .portal-topbar__right {
    display: contents;
  }

  .portal-topbar__left,
  .portal-topbar__center,
  .topbar-user,
  .topbar-support {
    display: none;
  }

  .page__row_head {
    flex-direction: column-reverse;
    margin: 0;
    padding: 35px 0 25px 0;
  }

  /* Dense glass on the fixed mobile/tablet bar (header lives under .portal-topbar
     after the chrome move, so app.min's solid white would otherwise win). */
  .portal-topbar .header,
  .page__row_head .header {
    background: var(--geosmart-chrome-glass-bg) !important;
    background-color: var(--geosmart-chrome-glass-bg) !important;
    -webkit-backdrop-filter: blur(var(--geosmart-chrome-glass-blur));
    backdrop-filter: blur(var(--geosmart-chrome-glass-blur));
    border-bottom-color: var(--geosmart-border);
  }
}

/* The fade mask must sit under the fixed chrome. Raising .header alone is not
   enough under display:contents (topbar flattens away), so the mask drops below
   the drawer + header stack, and the open drawer is raised as its own layer. */
@media only screen and (max-width: 767px) {
  .header__blur-mask {
    z-index: 40 !important;
  }

  .page__row_head {
    padding: 0;
  }

  .sidebar.mobile-drawer.active,
  .sidebar.mobile-drawer.is-drawer-animating {
    z-index: 1100 !important;
  }

  .sidebar.mobile-drawer.active .sidebar__demo-ribbon,
  .sidebar.mobile-drawer.is-drawer-animating .sidebar__demo-ribbon {
    z-index: 1101 !important;
  }

  .header {
    z-index: 1102 !important;
  }
}

/* Match the desktop drawer dimmer (rgba(17,20,45,.55)) so phone/tablet
   hamburger, search, notifications, and shared drawer shadows use the same
   navy wash instead of flat black 50%. */
@media only screen and (max-width: 1023px) {
  .sidebar-backdrop {
    background: rgba(17, 20, 45, 0.55);
  }
}

/* Desktop only: the sidebar is fully replaced by the top bar. Below 1024 it
   stays in the DOM and on-screen as the hamburger drawer. Pages that have not
   been given a top bar yet keep theirs — it is their only navigation. */
@media only screen and (min-width: 1024px) {
  .page:has(.portal-topbar) > .sidebar,
  .page:has(.portal-topbar) > .sidebar-backdrop {
    display: none !important;
  }

  /* Portal intro still animates the drawer on pages that keep a sidebar; with a
     top bar that chrome must stay fully suppressed through the intro. */
  html.geosmart-portal-intro .page:has(.portal-topbar) > .sidebar,
  html.geosmart-dashboard-intro .page:has(.portal-topbar) > .sidebar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
    transform: none !important;
  }
}

@media only screen and (min-width: 1024px) {
  .page:has(.portal-topbar) .page__wrapper {
    padding-left: 0;
    /* Fixed topbar is out of flow — reserve its height so content doesn't jump. */
    padding-top: var(--geosmart-chrome-bar-height, 90px);
  }

  .portal-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* Above application/funding drawers (1200) so chrome + notification /
       search / account menus stay usable while a drawer is open. */
    z-index: 1220;
    /* Glass lives on __inner so the intro fade covers the bar with the logo
       and toolbars. Keep this shell paint-free (transform-safe fixed wrapper). */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .portal-topbar__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 40px;
    background: var(--geosmart-chrome-glass-bg);
    -webkit-backdrop-filter: blur(var(--geosmart-chrome-glass-blur));
    backdrop-filter: blur(var(--geosmart-chrome-glass-blur));
    box-shadow: var(--geosmart-chrome-glass-edge);
  }

  .portal-topbar__left {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    min-width: 0;
  }

  /* Viewport-centered nav — left logo and right utilities are different
     widths, so absolute centering keeps the toolbar on the midline. */
  .portal-topbar__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
  }

  .portal-topbar__right {
    position: relative;
    z-index: 1;
    min-width: 0;
    margin-left: auto;
  }

  .portal-topbar__logo {
    display: block;
    font-size: 0;
  }

  .portal-topbar__logo-pic {
    width: 196px;
    max-width: 100%;
  }

  /* The nav re-uses .sidebar__menu / .sidebar__item so that Swup's
     applyActiveSidebarLink keeps the active pill in sync for free. */
  .portal-topbar__menu {
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    height: 50px;
    padding: 4px;
    border-radius: 19px;
  }

  .portal-topbar__menu .sidebar__item {
    height: 42px;
    padding: 0 15px;
    border-radius: 16px;
    font-size: 14px;
    white-space: nowrap;
    color: var(--geosmart-topbar-on-bg);
  }

  .portal-topbar__menu .sidebar__item:hover:not(.active) {
    color: var(--geosmart-topbar-hover-ink);
  }

  .portal-topbar__menu .sidebar__item.active,
  .portal-topbar__menu .sidebar__item.active:hover {
    background: var(--geosmart-topbar-surface);
    color: var(--geosmart-topbar-ink);
    font-weight: 600;
  }

  .portal-topbar__menu .sidebar__item .sidebar__text {
    margin-right: 0;
    overflow: visible;
  }

  /* Company switcher */
  .topbar-user {
    position: relative;
    flex-shrink: 0;
  }

  .topbar-user__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: var(--geosmart-topbar-on-bg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }

  .topbar-user__toggle:hover,
  .topbar-user.is-open .topbar-user__toggle {
    background: var(--geosmart-topbar-hover-bg);
    color: var(--geosmart-topbar-hover-ink);
  }

  .topbar-user__name {
    white-space: nowrap;
  }

  .topbar-user__caret {
    display: inline-flex;
    align-items: center;
  }

  .topbar-user__caret .icon {
    width: 8px;
    height: 5px;
    fill: currentColor;
    transition: transform 0.2s;
  }

  .topbar-user.is-open .topbar-user__caret .icon {
    transform: rotate(180deg);
  }

  .topbar-user__menu {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 60;
    min-width: 248px;
    padding: 8px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--v0-panel-shadow);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  }

  .topbar-user.is-open .topbar-user__menu {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .topbar-user__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f3f6;
  }

  .topbar-user__ava {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #f0f3f6;
  }

  .topbar-user__ava img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .topbar-user__identity {
    min-width: 0;
  }

  .topbar-user__company {
    font-size: 14px;
    font-weight: 700;
    color: #11142d;
  }

  .topbar-user__person {
    font-size: 12px;
    color: #808191;
  }

  .topbar-user__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #11142d;
    transition: background 0.2s, color 0.2s;
  }

  .topbar-user__item .icon {
    width: 16px;
    height: 16px;
    fill: #141415;
    transition: fill 0.2s;
    margin-left: 5px;
  }

  /* Same tint as the search field and the notification rows. */
  .topbar-user__item:hover {
    background: #f4f6fb;
    color: #11142d;
  }

  .topbar-user__item:hover .icon {
    fill: #11142d;
  }

  /* Demo Environment strip — desktop account menu only (topbar-user is
     hidden below 1024; mobile already has the sidebar drawer ribbon). */
  .topbar-user__menu {
    padding-bottom: 0;
    overflow: hidden;
  }

  .topbar-user__demo-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 11px -8px 0;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.03);
    color: #808191;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    cursor: help;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
  }

  .topbar-user__demo-ribbon__inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    max-width: 100%;
    white-space: nowrap;
  }

  .topbar-user__demo-ribbon__text {
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .topbar-user__demo-ribbon__dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #e8940b;
    flex-shrink: 0;
  }

  /* Support entry in the account menu — shown only where the toolbar CTA is hidden. */
  .topbar-user__item--support {
    display: none;
  }

  /* Support call to action — same surface + ink as active nav pill / alert badge */
  .topbar-support {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    height: 42px;
    padding: 0 6px 0 14px;
    border-radius: 16px;
    background: var(--geosmart-topbar-surface);
    color: var(--geosmart-topbar-ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  .topbar-support__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: var(--geosmart-topbar-bg);
    color: var(--geosmart-topbar-on-bg);
    overflow: hidden;
  }

  .topbar-support__icon svg,
  .topbar-support__arrow {
    display: block;
    width: 14px;
    height: 14px;
  }

  /* Same corner-to-corner arrow pass as the CTA buttons; the smaller box needs
     a longer throw to clear itself (21px of a 14px glyph). */
  .topbar-support__arrow {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .topbar-support__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translate(-160%, 160%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .topbar-support:hover .topbar-support__arrow {
    transform: translate(160%, -160%);
  }

  .topbar-support:hover .topbar-support__icon::after {
    transform: translate(0, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .topbar-support__arrow,
    .topbar-support__icon::after {
      transition: none;
    }

    .topbar-support:hover .topbar-support__arrow {
      transform: none;
    }

    .topbar-support__icon::after {
      display: none;
    }
  }

  /* The head row lost its second column, so the greeting spans the row. The
     clearance below is for the sticky bar, so it only applies where there is
     one — the other pages still keep their header in that row. */
  .page__row_head .page__col:only-child {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .page:has(.portal-topbar) .page__row_head .page__col {
    padding-top: 85px !important;
    padding-bottom: 20px !important;
    padding-left: 1px !important;
  }

  /* Base sheet uses padding: 40px 0 on .page__row_head below 1340. Drop it
     on desktop so the head sits flush above the content columns. */
  .page__row_head {
    display: flex;
    margin: 0;
    padding: 0;
  }
}

/* Small laptop: trim the columns down so the full nav still fits. Move Support
   into the account menu so the right pill stays compact; keep the three
   dropdowns at the wider (Support-included) toolbar width, flush right. */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .portal-topbar__inner {
    gap: 12px;
    padding: 20px 28px;
  }

  .portal-topbar__menu .sidebar__item {
    padding: 0 12px;
    font-size: 14px;
  }

  .topbar-support {
    display: none !important;
  }

  .topbar-user__item--support {
    display: flex;
  }

  /* Header shrinks without Support (~196px); panels stay at the larger
     Support-included width (~308px) and remain right-aligned to the pill. */
  .portal-topbar .header {
    --topbar-support-slot: 112px;
  }

  .portal-topbar .header .search,
  .portal-topbar .header .notifications .notifications__wrap,
  .portal-topbar .header .topbar-user__menu {
    left: auto;
    right: 0;
    width: calc(100% + var(--topbar-support-slot));
    min-width: 0;
    max-width: none;
  }
}

/* Tablet: the top bar hands off to the white fixed header and the hamburger
   drawer — the same chrome the phone layout uses, logo included. The base
   sheet only wires that up below 768px, so its pieces are repeated here. The
   triage drawers clear this 72px bar via geosmart-drawers.js (same offset as
   phone); the 90px top-bar offsets are not used in this range. */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .page__wrapper {
    padding-left: 0;
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    box-sizing: border-box;
    width: 100%;
    height: 72px;
    max-width: 100%;
    margin: 0;
    padding: 0 32px;
    border-bottom: 1px solid var(--geosmart-border);
    background: var(--geosmart-chrome-glass-bg);
    -webkit-backdrop-filter: blur(var(--geosmart-chrome-glass-blur));
    backdrop-filter: blur(var(--geosmart-chrome-glass-blur));
  }

  /* Notification menu must sit above triage drawers (z-index 1200). The tablet
     header is only z-index 50, so raise it while the menu is open. */
  .header:has(.notifications.active) {
    z-index: 1300;
  }

  .header .notifications.active .notifications__wrap {
    z-index: 1300;
  }

  /* The field is a dropdown opened from the icon, not an inline input. The
     full-bleed drawer treatment only kicks in below 768, so here the panel
     hangs off the bar the way it does on desktop. */
  .header .search {
    position: absolute;
    top: calc(100% + 12px);
    left: auto;
    right: 32px;
    z-index: 60;
    flex-grow: 0;
    width: min(360px, calc(100vw - 64px));
    height: auto;
    max-width: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    /* Delay hiding visibility until the fade finishes; show it immediately so
       the input can take focus on open (visibility:hidden blocks focus). */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  .header .search.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }

  .header .search__field {
    padding: 8px;
    border: 1px solid var(--geosmart-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--v0-panel-shadow);
  }

  .header .search__input {
    height: 40px;
    padding: 0 12px;
    border-radius: 9px;
    background: #f4f6fb;
    color: #11142d;
  }

  .header .search__input:focus {
    background: #f4f6fb;
  }

  .header .search.active .search__toggle {
    width: 40px;
  }

  .header .search.active .search__input {
    padding-left: 40px;
  }

  .header .search .global-search-typeahead {
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: auto;
  }

  .header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin-left: -15px;
    transform: translate(-50%, -50%);
  }

  .header__logo__pic {
    width: 165px;
  }

  .header__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    box-shadow: none;
  }

  .header .notifications {
    margin-right: -12px;
  }

  /* Clears the fixed bar. The phone layout gets this from the 72px minimum on
     the head row's header column, which the top bar pages do not have. */
  .page__center,
  .page__center.page__center_fluid {
    padding-top: 72px !important;
  }

  /* On the pages still rendering the header inside the head row, that column
     is now empty — the bar it held is fixed to the viewport. */
  .page__row_head .page__col:nth-child(2) {
    min-height: 0;
    margin-bottom: 0;
  }

  /* Same search + bell scale as phone (≤767). */
  .header .header__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
  }

  .header .header__search .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .header .notifications__open {
    width: 36px;
    height: 36px;
  }

  .header .notifications__open .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  /* Same orange unread dot as phone (≤767) — not the numbered desktop badge. */
  .header .notifications__counter,
  .notifications__counter {
    top: 5px;
    right: 5px;
    min-width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 0;
  }
}

/* Phones: shrink the search + bell glyphs and their hit boxes by 10%, and
   shift the pair 7px toward the right edge. */
@media only screen and (max-width: 767px) {
  /* Matches app.min.css; the Swup touch-target sheet used to reassert -14px. */
  .header__burger {
    margin-left: -23px;
  }

  .header .header__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
  }

  .header .header__search .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  /* Base sheet parks the bell at -12px past the bar padding; -19px is 7px
     further right, and because the auto-margin on the burger packs search +
     bell against that edge, the search icon rides along. */
  .header .notifications {
    margin-right: -19px;
  }

  .header .notifications__open {
    width: 36px;
    height: 36px;
  }

  .header .notifications__open .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
}

/* Fade the desktop header (glass bar + logo + toolbars) as one unit on intro.
   Glass paint is on __inner; never put transform on .portal-topbar itself
   (that breaks position:fixed/sticky and makes the chrome scroll away). */
@media only screen and (min-width: 1024px) {
  html.geosmart-dashboard-intro .portal-topbar__inner,
  html.geosmart-portal-intro .portal-topbar__inner {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.geosmart-dashboard-intro.geosmart-header-intro-ready .portal-topbar__inner,
  html.geosmart-portal-intro.geosmart-header-intro-ready .portal-topbar__inner {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.geosmart-dashboard-intro .portal-topbar__inner,
  html.geosmart-portal-intro .portal-topbar__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Remaining legacy accent blue in the shell
   -------------------------------------------------------------------------- */

/* Desktop search trigger sits on the chrome bar — keep the soft plate.
   Mobile/tablet white header: active search uses brand blue, fading like the
   bell (explicit idle plate + background/fill transitions — not transition:all). */
@media only screen and (min-width: 1024px) {
  .header__search.active {
    background: var(--geosmart-topbar-bg);
  }
}

@media only screen and (max-width: 1023px) {
  .header__search,
  .header .header__search {
    background-color: transparent;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
  }

  .header__search .icon,
  .header .header__search .icon {
    fill: #1b1d21;
    transition: fill 0.25s ease;
  }

  .header__search.active,
  .header .header__search.active {
    background-color: var(--geosmart-brand-blue, #1844be);
  }

  .header__search.active .icon,
  .header .header__search.active .icon {
    fill: #ffffff;
  }
}

/* Alert badge on the bell — desktop chrome uses topbar surface; mobile/tablet
   keep the base #FF754C counter on the white fixed header. */
@media only screen and (min-width: 1024px) {
  .header .notifications__counter,
  .portal-topbar .notifications__counter {
    background: var(--geosmart-topbar-surface) !important;
    color: var(--geosmart-topbar-ink) !important;
  }
}

.notifications__item:hover {
  background: #f4f6fb !important;
}

/* Row wrapper is what notifications.js paints on desktop hover. */
.notifications__item-row:hover > button.notifications__item,
.header .notifications .notifications__item-row:hover > button.notifications__item,
.dashboard-notifications .notifications__item-row:hover > button.notifications__item,
.geosmart-mobile-header-drawer-layer .notifications__wrap .notifications__item-row:hover > button.notifications__item {
  background: #f4f6fb !important;
}

/* Base sheet forces white text for the old navy hover; keep dark on #f4f6fb. */
.notifications__item:hover .notifications__user,
.notifications__item:hover .notifications__time,
.notifications__item:hover .notifications__text,
.notifications__item:hover .notifications__project,
.notifications__item-row:hover .notifications__user,
.notifications__item-row:hover .notifications__time,
.notifications__item-row:hover .notifications__text,
.notifications__item-row:hover .notifications__project {
  color: inherit;
}

.notifications__item:hover .notifications__user,
.notifications__item-row:hover .notifications__user {
  color: #11142d;
}

.notifications__item:hover .notifications__time,
.notifications__item:hover .notifications__text,
.notifications__item-row:hover .notifications__time,
.notifications__item-row:hover .notifications__text {
  color: #808191;
}

.notifications__item:hover .notifications__project,
.notifications__item-row:hover .notifications__project {
  color: #11142d;
}

/* --------------------------------------------------------------------------
   Fluid 12-column dashboard layout

   Opt-in BEM modifiers that replace the boxed flex layout with a fluid grid.
   The base sheet sets these on .page__center / .page__row / .page__col across
   several breakpoints, so !important is what keeps the modifiers winning
   without editing app.min.css.
   -------------------------------------------------------------------------- */

/* 1. Fluid container override */
.page__center.page__center_fluid {
  max-width: none !important;
  width: 100% !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Scrollbar offset via --scrollbar-width (set in JS). Only below the
   ultra-wide zoom breakpoint — at 1729px+ keep a plain gutter. */
@media (min-width: 768px) and (max-width: 1023px) {
  .page__center.page__center_fluid {
    padding-right: calc(40px - var(--scrollbar-width, 0px)) !important;
  }
}

/* Match the compact topbar’s 28px side padding on small laptops. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .page__center.page__center_fluid {
    padding-left: 28px !important;
    padding-right: calc(28px - var(--scrollbar-width, 0px)) !important;
  }
}

@media (min-width: 1280px) and (max-width: 1728px) {
  .page__center.page__center_fluid {
    padding-right: calc(40px - var(--scrollbar-width, 0px)) !important;
  }
}

@media (min-width: 1729px) {
  .page__center.page__center_fluid {
    padding-right: 27px !important;
  }
}

/* 2. Fluid grid — 6/4 from 1024–1450, 7/4 above that */
.page__row_fluid-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 25px !important;
  width: 100% !important;
}

@media (min-width: 1024px) and (max-width: 1450px) {
  .page__row_fluid-grid {
    grid-template-columns: 6fr 4fr !important;
  }
}

@media (min-width: 1451px) {
  .page__row_fluid-grid {
    grid-template-columns: 7fr 4fr !important;
  }
}

/* Applications: keep 7/4 from 1024 up (skip the shared mid-tier 6/4). */
@media (min-width: 1024px) {
  .applications-metrics-row.page__row_fluid-grid {
    grid-template-columns: 7fr 4fr !important;
  }
}

/* 3. Border stripping modifier */
.page__row_no-border {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
}

.page__row_no-border::after,
.page__row_no-border::before {
  display: none !important;
}

/* 4. Column resets for grid children.
   min-width:0 stops the tracks being floored at their content's min-content
   size, which otherwise skews the 7/4 split and lets wide cards overflow.

   The column is itself a flex stack so the space between cards comes from one
   gap rather than each card's own bottom margin, which is what kept the left
   column 3px off the right one. */
.page__row_fluid-grid > .page__col {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 25px !important;
}

.page__row_fluid-grid > .page__col > * {
  margin: 0 !important;
}

/* 5. Keep the right-hand group stacked at every width.
   The base sheet turns .page__group into a 50/50 flex row below 1340px,
   because the legacy layout had already collapsed to a single full-width
   column by then and only ever held two cards. The group now holds three,
   so that row is unwound everywhere and the vertical rhythm restored. */
.page__row_fluid-grid .page__group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 25px !important;
  margin: 0 !important;
}

/* The 50/50 track sizing sits on whichever wrapper each card uses, so reset
   every direct child rather than .widget alone. */
.page__row_fluid-grid .page__group > * {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.page__row_fluid-grid .page__group .widget {
  max-width: none !important;
}

/* Base sheet stacks the second column under the first below 1340 with a
   32px top margin. On the fluid 2-col grid that gap sits above Quick Actions
   and must not apply. */
@media (max-width: 1339px) {
  .page__row_fluid-grid > .page__col:nth-child(2) {
    margin-top: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Split dashboard cards

   The KPI metrics used to be the last block inside the Funding Volume card.
   They now live in their own card stacked above it.
   -------------------------------------------------------------------------- */

/* Spacing between the split cards comes from the column's gap now. */

/* .details__row carried a 30px bottom margin as a separator from the KPI list
   it used to sit above. As the last block in the chart card it would now just
   add dead space under the chart, on top of the container's own padding. */
.details__container > .details__row:last-child {
  margin-bottom: 0 !important;
}

@media (min-width: 768px) {
  /* Three application-count metrics in equal columns; Active Pipeline moved
     into the Funding Volume card. The Applications pipeline card runs the same
     three-up list (_three), so both share this treatment. The base sheet sizes
     the items with percentage widths for the old flex row; those have to be
     dropped or they resolve against the grid track instead of the row.

     No gap: the tracks meet, and the divider is the left border of each item
     after the first, so it lands exactly on the one-third boundary. A gap
     would leave the borders floating off-centre between the columns. */
  .details_pipeline .details__list_four,
  .details_pipeline .details__list_three {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
  }

  .details_pipeline .details__list_four .details__item,
  .details_pipeline .details__list_three .details__item {
    width: auto !important;
    flex: none !important;
    min-width: 0 !important;
    padding: 0 40px !important;
    border-right: none !important;
    border-left: 1px solid var(--geosmart-border) !important;
  }

  /* The outer two align flush with the card's own padding rather than adding
     to it, so the row spans the full content width. */
  .details_pipeline .details__list_four .details__item:first-child,
  .details_pipeline .details__list_three .details__item:first-child {
    padding-left: 0 !important;
    border-left: none !important;
  }

  .details_pipeline .details__list_four .details__item:last-child,
  .details_pipeline .details__list_three .details__item:last-child {
    padding-right: 0 !important;
  }

  /* Three-up KPI metrics — equal content boxes across the columns.

     Even thirds leave the middle metric narrowest, because each column carries
     a different amount of chrome: one item padding on the first, two plus its
     1px divider on the second, one plus its divider on the third — four
     paddings and two dividers in all. Giving every track that same content
     width plus its own chrome allowance ends the first column short and starts
     the third late, which is the offset that lets the counters and indicators
     match. Card padding and dividers are untouched.

     The percentage resolves against whichever grid uses the value, so both the
     Applications pipeline card and the Dashboard KPI card share one definition,
     each with its own item padding. The Dashboard list holds a fourth item, but
     Active Pipeline is desktop-hidden, so three columns is right there too. */
  .applications-metrics-row,
  .dashboard-kpi-card {
    --details-metric-content: calc((100% - (var(--details-metric-pad) * 4 + 2px)) / 3);
    --details-metric-tracks:
      calc(var(--details-metric-content) + var(--details-metric-pad))
      calc(var(--details-metric-content) + var(--details-metric-pad) * 2 + 1px)
      calc(var(--details-metric-content) + var(--details-metric-pad) + 1px);
  }

  .dashboard-kpi-card {
    --details-metric-pad: 40px;
  }

  .applications-metrics-row {
    --details-metric-pad: 30px;
  }

  .applications-metrics-row .details_pipeline .details__list_three,
  .dashboard-kpi-card .details_pipeline .details__list_four {
    grid-template-columns: var(--details-metric-tracks) !important;
  }

  /* Applications only: tighter gutters either side of each divider. */
  .applications-metrics-row .details_pipeline .details__list_three .details__item {
    padding: 0 var(--details-metric-pad) !important;
  }

  .applications-metrics-row .details_pipeline .details__list_three .details__item:first-child {
    padding-left: 0 !important;
  }

  .applications-metrics-row .details_pipeline .details__list_three .details__item:last-child {
    padding-right: 0 !important;
  }

  /* Funding Volume: figures / chart.
     ≤1550: 4/6 · 1551–1900: 5/6 · >1900: 5/5 */
  .details_pipeline .details__row {
    display: grid !important;
    grid-template-columns: 4fr 6fr !important;
    gap: 2rem;
  }

  .details_pipeline .details__top {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .details_pipeline .details__col:first-child {
    padding-right: 30px !important;
  }
}

@media (min-width: 1551px) {
  .details_pipeline .details__row {
    grid-template-columns: 5fr 6fr !important;
  }
}

@media (min-width: 1901px) {
  .details_pipeline .details__row {
    grid-template-columns: 5fr 5fr !important;
  }
}

/* Sparkline / trend block under Total Funded Volume — mobile only. */
.details_pipeline .details__bottom {
  display: none !important;
}

@media (max-width: 767px) {
  .details_pipeline .details__bottom {
    display: block !important;
  }
}

.details_pipeline .details__header {
  margin-bottom: 15px;
}

.funding-volume-card:has(.details__header) .details__container {
  min-height: 452px;
}

/* Nested frame around the blue plot, so the fill reads as a panel sitting on
   the card rather than a block bleeding into its edge. */
.funding-chart-frame {
  padding: 7px;
  border: 1px solid var(--geosmart-border);
  border-radius: 31px;
  background: #f9fafc;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  margin-right: -10px;
}

/* Timeline labels overlay the plot bottom: left / middle / right along the
   period, with left and right in the gaps beside the end bars. */
.details_pipeline .details__chart_counter {
  position: relative;
  /* Timeline hangs 8px below the host; keep visible even while Safari's
     chart-intro clip is active on other chart shells. */
  overflow: visible;
}

.details_pipeline .details__chart_counter #chart-users-counter {
  overflow: hidden;
}

.funding-volume-timeline {
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 16px;
  pointer-events: none;
  z-index: 2;
}

.funding-volume-timeline__label {
  position: absolute;
  top: 0;
  font-family: var(--font-inter, Inter, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 16px;
  color: #ffffff;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* 7 equal bar slots → gap after bar 1 is at 1/7; center at 1/2;
   gap before last is at 6/7. */
.funding-volume-timeline__label--left {
  left: calc(100% / 7);
}

.funding-volume-timeline__label--middle {
  left: 50%;
}

.funding-volume-timeline__label--right {
  left: calc(100% * 6 / 7);
}

/* Active Pipeline sits under the sparkline in the left column, set off by the
   same divider spacing used above the rule. */
.funding-secondary-metric {
  margin-top: 40px;
  padding-top: 50px;
  border-top: 1px solid var(--geosmart-border);
}

.funding-secondary-metric .details__item {
  display: block;
  margin: 0;
  padding: 0;
}

/* Active Pipeline rail — full on mobile; 83% from 768–1550; 70% above. */
.funding-secondary-metric .details__indicator,
.details_pipeline .pipeline-metric_mobile .details__indicator {
  width: 70%;
}

@media (min-width: 768px) and (max-width: 1550px) {
  .funding-secondary-metric .details__indicator,
  .details_pipeline .pipeline-metric_mobile .details__indicator {
    width: 83%;
  }
}

/* KPI / Active Pipeline metric links → Applications with status filter.
   Hover: CTA arrow fades/slides in along its 45° diagonal (~8px); leave only
   fades it out from that end position so it does not slide back. */
.metric-link {
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Sit beside the caption in .details__head (icon · label · arrow). */
.metric-link .details__head {
  align-items: center;
  overflow: visible;
}

.metric-link__caption {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.metric-link .details__text {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1.4;
}

.metric-link__arrow {
  position: relative;
  top: 4px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-left: 0;
  color: #6c7280;
  opacity: 0;
  transform: translate(5.7px, -5.7px);
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.metric-link__arrow svg {
  display: block;
  width: 22px;
  height: 22px;
}

.metric-link:hover .metric-link__arrow,
.metric-link:focus-visible .metric-link__arrow,
.applications-attention-row[data-attention-app-id]:hover .metric-link__arrow,
.applications-attention-row[data-attention-app-id]:focus-visible .metric-link__arrow {
  opacity: 1;
  animation: metric-link-arrow-in 0.28s ease both;
}

/* Touch scroll can leave :hover stuck on pipeline cards; keep arrows hidden on phones. */
@media (max-width: 767px) {
  .metric-link:hover .metric-link__arrow,
  .applications-attention-row[data-attention-app-id]:hover .metric-link__arrow {
    opacity: 0;
    animation: none;
  }
}

@keyframes metric-link-arrow-in {
  from {
    opacity: 0;
    transform: translate(0, 0);
  }

  to {
    opacity: 1;
    transform: translate(5.7px, -5.7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .metric-link__arrow {
    transform: none;
  }

  .metric-link:hover .metric-link__arrow,
  .metric-link:focus-visible .metric-link__arrow,
  .applications-attention-row[data-attention-app-id]:hover .metric-link__arrow,
  .applications-attention-row[data-attention-app-id]:focus-visible .metric-link__arrow {
    animation: none;
  }
}

/* Active Pipeline is in the markup twice and only ever visible once: in the
   Funding Volume card on desktop, and back in its original KPI slot on mobile. */
@media (min-width: 768px) {
  .details_pipeline .details__list_four .pipeline-metric_mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .funding-secondary-metric {
    display: none !important;
  }

  /* Mobile stack: Funding Volume (date picker + chart), then Applications KPI,
     then Top Programs (DOM order of --3 and the right column is unchanged). */
  #swup[data-dashboard-data-root] > .page__col:first-child > .dashboard-funding-volume-reveal {
    order: 1;
  }

  #swup[data-dashboard-data-root] > .page__col:first-child > .dashboard-kpi-card {
    order: 2;
  }

  #swup[data-dashboard-data-root] > .page__col:first-child > .dashboard-card-reveal--3 {
    order: 3;
  }

  /* Mobile KPI card: Total Applications + Active Pipeline stacked; hide
     Approved and Declined. */
  .dashboard-kpi-card .details__list_four,
  .details_pipeline .details__list_four {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .dashboard-kpi-card .details__list_four .details__item,
  .details_pipeline .details__list_four .details__item {
    flex: none !important;
    width: 100% !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    padding: 0 !important;
  }

  .details_pipeline .details__list_four .pipeline-metric_mobile {
    border-top: none !important;
    padding-top: 24px !important;
    margin-top: 24px !important;
  }

  /* Applications KPI: the base sheet's 24px item padding pushed the stacked rows
     in from the card edge the Dashboard's rows sit flush with. Drop it and let
     even space either side of the divider carry the rhythm instead. */
  .details_pipeline .details__list_three .details__item {
    padding: 0 !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
  }

  .details_pipeline .details__list_three .details__item:not(:first-child) {
    padding-top: 24px !important;
    margin-top: 24px !important;
    border-top: none !important;
  }

  .dashboard-kpi-card .details__indicator,
  .details_pipeline .details__list_four .details__indicator,
  .details_pipeline .pipeline-metric_mobile .details__indicator {
    width: 100% !important;
  }

  .details_pipeline .details__indicator {
    margin-top: 7px;
  }

  .dashboard-kpi-card .details__list_four .details__item:has([data-dashboard-metric="approved"]),
  .dashboard-kpi-card .details__list_four .details__item:has([data-dashboard-metric="declined"]),
  .details_pipeline .details__list_four .details__item:has([data-dashboard-metric="approved"]),
  .details_pipeline .details__list_four .details__item:has([data-dashboard-metric="declined"]) {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Chart heights

   The fluid grid widened the chart containers but their heights are fixed in
   the base sheet (200px / 205px), so the plots read flatter than they used to.

   These heights have to stay *definite*. charts.js builds every plot with
   height: '100%', so ApexCharts measures the container and renders to fill it.
   Give the container a content-derived height (height: auto, or a percentage
   against an auto-height parent) and each re-render feeds the previous canvas
   height back in, growing the chart ~15px every time the range changes. The
   base sheet used fixed pixels for exactly this reason.

   Fixed pixels rather than vw: ultra-wide-tiers.js caps the content at
   centerMaxWidth and scales the page with CSS zoom above 1729px, so these
   containers only span ~500px of layout width no matter how wide the monitor
   gets. vw would keep growing past that and then get multiplied by the zoom
   again, stretching the plots out of proportion on large displays. A fixed
   height rides the same zoom as everything else. Width stays 100%, so the
   charts remain horizontally responsive.
   -------------------------------------------------------------------------- */

.page__row_fluid-grid .details__chart_counter {
  height: 259px !important;
  width: 100% !important;
}

@media (max-width: 1400px) {
  .page__row_fluid-grid .details__chart_counter {
    height: 224px !important;
  }
}

@media (max-width: 1300px) {
  .page__row_fluid-grid .details__chart_counter {
    height: 209px !important;
  }
}

@media (max-width: 1150px) {
  .page__row_fluid-grid .details__chart_counter {
    height: 159px !important;
  }
}

@media (max-width: 1023px) {
  .page__row_fluid-grid .details__chart_counter {
    height: 239px !important;
  }
}

@media (max-width: 767px) {
  .page__row_fluid-grid .details__chart_counter {
    height: 195px !important;
  }

  .details_pipeline .details__box {
    padding: 5px 5px 20px 0px;
  }

  .funding-chart-frame {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    margin-right: 0;
  }

  .funding-chart-frame .details__box {
    border-radius: 15px !important;
  }
}

.page__row_fluid-grid .widget__chart_earning {
  height: 170px !important;
  width: 100% !important;
}

/* Recent Notifications renders through the same notifications.js pipeline as
   the header bell, so it inherits the dropdown's own layout. Strip the parts
   that only make sense inside a floating panel. */
.dashboard-notifications {
  min-height: 452px;
}

@media (max-width: 767px) {
  .dashboard-notifications,
  .dashboard-card-reveal:has(.dashboard-notifications) {
    display: none !important;
  }
}

.dashboard-notifications__inner {
  position: static;
}

.dashboard-notifications .notifications__head {
  padding: 0 !important;
  margin-bottom: 15px !important;
}

/* Rows carry their own 20px side padding; pull the list out to line the
   avatars up with the card title and keep the hover pill evenly inset. */
.dashboard-notifications .notifications__list {
  margin: 0 -20px !important;
}

.dashboard-notifications .notifications__list:last-child {
  margin-bottom: 0 !important;
}

/* Keep the timestamp / unread dot immediately after the title, not pinned to
   the far edge of the row (base sheet puts margin-right: auto on the title). */
.dashboard-notifications .notifications__line {
  align-items: center;
  gap: 8px;
}

.dashboard-notifications .notifications__user {
  margin-right: 0 !important;
}

.dashboard-notifications .notifications__time {
  margin-left: 0 !important;
}

/* ==========================================================================
   Enterprise re-skin — typography and sharpened geometry

   The portal is on Inter throughout; the second family the base sheet used to
   carry for headings and card titles is gone, so nothing has to be forced
   here.
   ========================================================================== */

/* Page canvas. The base sheet leaves body/.page transparent, so without this
   the browser default white shows through around the cards. */
body,
.page {
  background: #f4f6fb !important;
}

/* Chart panel fills — Funding Volume bar well and Active Pipeline card. */
.details__box,
.widget_purple {
  background: var(--geosmart-brand-blue) !important;
}

/* --------------------------------------------------------------------------
   Figures
   -------------------------------------------------------------------------- */

/* .h2/.h3/.h4 are extra-bold 800; the flat -1px track from the base sheet
   is far too tight once the figure drops to the 24px mobile size. */
.details__counter,
.details__number,
.widget__number {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Eyebrow labels — card headers, metric titles, page greeting
   -------------------------------------------------------------------------- */

/* The card header on each page carries its own class rather than a shared one:
   .widget__title on the dashboard and marketing, .page__title on funding,
   .applications-pipeline__title on applications, .notification__title and
   .filters__title on the notifications page. They all get the same eyebrow. */
.page__hello,
.details__title,
.widget__title,
.details__text,
.widget__category,
.page__title,
.applications-pipeline__title,
.notification__container-head .notification__title,
.notifications-page-layout .filters__title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #4e4e4f;
}

.page__hello,
.details__title,
.widget__title,
.details__text,
.widget__category,
.page__title,
.applications-pipeline__title,
.notification__container-head .notification__title,
.notifications-page-layout .filters__title {
  font-size: 13px;
  line-height: 1.4;
}

.page__hello {
  position: relative;
  left: 3px;
}

.marketing-hub-head__copy .page__hello,
#marketing-hub-subhead.page__hello {
  left: 2px;
}

.page:has(.support-intro-row) .page__row_head .page__hello {
  left: 4px;
}

.widget_users .widget__category {
  line-height: 1.3;
  color: #4e4e4f;
  padding-right: 25px;
}

@media (max-width: 1023px) {
  .page__hello,
  .details__title,
  .widget__title,
  .details__text,
  .widget__category,
  .caption-sm {
    font-size: 12px;
  }
}

/* KPI / Active Pipeline labels — pin to the shared eyebrow so they match
   widget titles even if a leftover utility class fights the cascade. */
.details_pipeline .details__list_four .details__text,
.funding-secondary-metric .details__text {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4e4e4f;
}

@media (max-width: 1023px) {
  .details_pipeline .details__list_four .details__text,
  .funding-secondary-metric .details__text {
    font-size: 12px;
  }
}

/* Active Pipeline (12 Months) sits on the purple card. .color-white and
   .widget__title have equal specificity, so without this the grey above wins
   on cascade order and the title disappears into the panel. */
.widget__title.color-white {
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Card geometry
   -------------------------------------------------------------------------- */

/* .card-shadow-wrapper is a marker class with no styles of its own, so the
   border goes on the panel itself rather than the wrapper — otherwise the
   three nested wrappers around the Funding Volume card would stack borders. */
.widget,
.details__container {
  border-radius: 13px !important;
  border: 1px solid var(--geosmart-border) !important;
  padding: 45px !important;
}

/* 45px is a desktop figure. Once the grid collapses to one column the cards
   are only as wide as the viewport, and heavy horizontal padding leaves too
   little room for the KPI figures. Step both the card and the page gutter
   back down there. */
@media (max-width: 767px) {
  .widget,
  .details__container {
    padding: 24px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Same fixed-header clearance the tablet band already gets — without it
     titles slide under the 72px mobile bar on topbar pages. */
  .page__center.page__center_fluid {
    padding-top: 72px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* The grid is one stack here, so its 25px desktop gaps read as the rhythm
     between cards. Match the page gutter above so the space around a card is
     even on all four sides. Covers the gap between columns, between cards
     within a column, and inside the right-hand group. */
  .page__row_fluid-grid,
  .page__row_fluid-grid > .page__col,
  .page__row_fluid-grid .page__group {
    gap: 16px !important;
  }
}

/* Applications, funding and notifications build their cards from their own
   container classes instead of .widget, so the same geometry is spelled out
   for them. The inner .page__stat wrappers only carry the radius — they sit
   inside the framed table container and would otherwise double the border. */
.banner__container,
.page__stat,
.applications-table-layout,
.funding-table-layout,
.notifications-page-layout .filters__container,
.notifications-page-layout .notification__container {
  border-radius: 13px !important;
}

.notifications-page-layout .filters__container,
.notifications-page-layout .notification__container {
  border: 1px solid var(--geosmart-border) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

@media (min-width: 768px) {
  .applications-table-layout,
  .funding-table-layout {
    border: 1px solid var(--geosmart-border) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
  }
}

/* Phones trade those framed tables for a stack: the controls panel, then one
   card per row. Both shipped with the base sheet's heavy two-layer ambient
   shadow and no outline, so they read as a different family from every other
   card. Same hairline border and near-invisible shadow as .widget instead. */
@media (max-width: 767px) {
  .applications-table-wrap--controls.page__stat,
  .funding-table-wrap--controls.page__stat,
  .applications-grid .products__row:not(.products__row_head):not(.products__empty-row),
  .funding-grid .products__row:not(.products__row_head):not(.products__empty-row) {
    border: 1px solid var(--geosmart-border) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
  }

  /* One 16px rhythm down the whole stack, matching the page gutter: between the
     controls panel and the list, and between the row cards. */
  .applications-table-layout,
  .funding-table-layout {
    gap: 16px !important;
  }

  .applications-grid .products__row:not(.products__row_head):not(.products__empty-row),
  .funding-grid .products__row:not(.products__row_head):not(.products__empty-row) {
    margin-bottom: 16px !important;
  }

  /* The steps into each page's table section were set before the cards had a
     shared rhythm: 25px under the applications metrics, 24px under the funding
     overview, and 25px / 32px between the marketing hub's stacked cards. */
  .applications-metrics-row {
    margin-bottom: 16px !important;
  }

  .funding-overview-row .page__col {
    padding-bottom: 16px !important;
  }

  .flyer-builder-layout,
  #tab-pricing-matrices .matrix-sheets-stack {
    gap: 16px !important;
  }
}

/* On wider screens keep the same module gap under the overview cards as
   applications uses under the metrics row (25px). Table frame padding matches
   .applications-table-layout (50px 45px 40px). */
@media (min-width: 768px) {
  .funding-overview-row .page__col {
    padding-bottom: 25px !important;
  }
}

/* The purple chart card is a filled panel; a light grey hairline reads as a
   seam against it. */
.widget_purple {
  border-color: transparent !important;
}

/* Active Pipeline plot area used to sit in a white nested panel. Drop that so
   the bars read against the card's own blue fill. */
.widget_chart.widget_purple .widget__wrap {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Top Loan Programs and Active Pipeline padded these inner sections
   themselves because their cards were set to 0 / 8px sides. Against the card's
   own 60px they stack, pushing those two titles ~30px further in than every
   other card's. The head also carried a fixed 88px so it could centre its
   title in an unpadded card; it now sits inside the padding like the rest. */
.page__row_fluid-grid .widget__head,
.page__row_fluid-grid .widget_chart .widget__title {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page__row_fluid-grid .widget__head {
  height: auto !important;
  margin-bottom: 32px !important;
}

/* Replaces the two-layer 70px/190px ambient shadow the base sheet flags
   !important on .widget_shadow. */
.widget,
.funding-volume-card__face .details__container {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

/* Panels nested inside the cards: the KPI list and the white plot area on the
   purple card stay sharp. The blue Funding Volume well is rounder so it reads
   against the soft outer frame. */
.details__list_four,
.widget__wrap {
  border-radius: 2px !important;
}

.details__box {
  border-radius: 24px !important;
}

.details__list {
  border: none !important;
}

/* KPI metric chrome: thicker progress bar + larger status preview icon */
.details_pipeline .details__indicator {
  height: 7px;
  margin-top: 3px;
}

.details_pipeline .details__head .details__preview {
  width: 30px;
  height: 30px;
}

/* Notification row hover pill, squared off to match the panels it sits in.
   The Active Pipeline row is the same treatment, set where that block is
   styled further up. */
.notifications__item {
  border-radius: 12px !important;
}

/* --------------------------------------------------------------------------
   Top Loan Programs — same equal columns + vertical divider as the KPI row
   -------------------------------------------------------------------------- */

.page__row_fluid-grid .widget_users:has(.top-programs-grid),
.page__row_fluid-grid .widget_chart.widget_purple {
  min-height: 291px;
}

@media (max-width: 767px) {
  .page__row_fluid-grid .widget_chart.widget_purple {
    min-height: 0;
  }
}

@media (min-width: 768px) {
  .page__row_fluid-grid .widget_users:has(.top-programs-grid) {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }
}

.top-programs-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
}

.top-programs-grid .widget__flex {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: start;
  margin: 0 !important;
  padding: 0 40px !important;
  border-left: 1px solid var(--geosmart-border) !important;
  box-shadow: none !important;
}

.top-programs-grid .widget__flex:first-child {
  padding-left: 0 !important;
  border-left: none !important;
}

.top-programs-grid .widget__flex:last-child {
  padding-right: 0 !important;
}

.top-programs-grid .widget__desc {
  margin-right: 0 !important;
  min-width: 0;
}

/* Keep program titles on a single line; arrow sits in the caption row. */
.top-programs-grid .metric-link__caption {
  margin-bottom: 17px;
}

.top-programs-grid .widget__category {
  white-space: nowrap;
  padding-right: 0;
  margin-bottom: 0;
}

.top-programs-grid .metric-link__arrow {
  top: 4px;
  left: 6px;
}

/* ~90% of the original 120×100 chart size, centered in the right column. */
.top-programs-grid .widget__chart_users {
  width: 108px !important;
  height: 90px !important;
  flex: none !important;
  justify-self: center;
  margin: 0 !important;
}

/* Same figure size as Active Pipeline's .details__counter.h3. */
.top-programs-grid .widget__number {
  font-size: 40px !important;
  line-height: 1.2 !important;
}

/* "Top share" / "Second share" label text only. */
.top-programs-grid .widget__percent {
  color: #62b25b;
}

/* Progress rail under each program — same geometry as the KPI indicators.
   Fill stays on the legacy metric blue; ApexCharts bars use brand blue. */
.top-programs-grid .details__indicator {
  grid-column: 1 / -1;
  margin-top: 16px;
  width: 66.666%;
  height: 7px;
}

.top-programs-grid .details__progress {
  background: var(--v0-metric-blue);
}

/* Solid bars for Top Loan Programs only — do not touch Funding Volume. */
.top-programs-grid #chart-users-blue .apexcharts-bar-area path,
.top-programs-grid #chart-users-blue .apexcharts-series path,
.top-programs-grid #chart-users-purple .apexcharts-bar-area path,
.top-programs-grid #chart-users-purple .apexcharts-series path {
  fill: #1844be !important;
  fill-opacity: 1 !important;
  opacity: 1 !important;
}

@media (max-width: 767px) {
  .top-programs-grid {
    grid-template-columns: 1fr !important;
  }

  .top-programs-grid .widget__flex {
    padding: 24px 0 0 !important;
    border-left: none !important;
    border-top: none !important;
  }

  .top-programs-grid .widget__flex:first-child {
    padding-top: 0 !important;
    border-top: none !important;
  }

  .top-programs-grid .details__indicator {
    width: 100% !important;
  }

  .top-programs-grid .widget__chart_users {
    position: relative;
    top: 17px;
    scale: 80%;
  }
}

/* Equal 50/50 CTAs with a 30px gutter. The base sheet's 32px item margin has
   to go or it shows up under the row. Buttons drop their content-width max so
   they fill each track. */
@media (min-width: 768px) {
  .page__row_fluid-grid .widget:has(> .goal) {
    box-sizing: border-box;
    height: 195px;
  }
}

.page__row_fluid-grid .goal__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;
}

.page__row_fluid-grid .goal__item:not(:last-child) {
  margin-bottom: 0;
}

.page__row_fluid-grid .goal__item {
  display: flex;
  min-width: 0;
}

.page__row_fluid-grid .goal__item .btn_cta {
  width: 100%;
  min-width: 188px;
  max-width: none;
  justify-content: space-between;
}

/* 1024–1355: right column is too narrow for two 188px CTAs + gutter.
   Stack them so labels/icons keep their min width instead of clamping.
   Top Loan Programs: tighten caption/rail spacing and scale the share charts. */
@media (min-width: 1024px) and (max-width: 1355px) {
  .page__row_fluid-grid .widget:has(> .goal) {
    height: auto;
    min-height: 192px;
  }

  .page__row_fluid-grid .goal__list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page__row_fluid-grid .goal__item .btn_cta {
    min-width: 0;
  }

  .top-programs-grid .metric-link__caption {
    margin-bottom: 26px;
  }

  .top-programs-grid .details__indicator {
    margin-top: 20px;
  }

  .top-programs-grid .widget__chart_users {
    position: relative;
    top: 24px;
    left: 4px;
    scale: 75%;
  }
}

/* ≤768: stack Quick Actions so buttons aren't crushed side by side. */
@media (max-width: 768px) {
  .page__row_fluid-grid .widget:has(> .goal) {
    height: auto;
  }

  .page__row_fluid-grid .goal__list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page__row_fluid-grid .goal__item .btn_cta {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Recent Notifications — flat icons

   notifications.js injects its badge styles into a runtime <style> that lands
   after this file, so these need !important to land. Scoped to the card: the
   header bell keeps its coloured circles.
   -------------------------------------------------------------------------- */

.dashboard-notifications .notifications__item {
  padding-left: 5px !important;
}

.dashboard-notifications .notifications__ava,
.dashboard-notifications .geosmart-notification-badge {
  margin-right: 4px !important;
}

.dashboard-notifications .geosmart-notification-badge__circle {
  background: transparent !important;
  color: #1F2937 !important;
}

/* The sprite icons already paint with fill: currentColor and follow the
   colour above. The rest are <img> pointing at Lucide files with a baked-in
   stroke="#ffffff", which no colour property can reach — on the now-white
   badge they would disappear. brightness(0) collapses the artwork to black
   whatever its source colour, and the opacity lifts it back to roughly the
   same dark grey as the sprites. */
.dashboard-notifications .geosmart-notification-badge__circle .notifications__pic {
  filter: brightness(0) !important;
  opacity: 0.88;
}

/* The base sheet flips this badge white on hover for the dark #2251d6 fill it
   assumes. The card's rows hover #f4f6fb instead, so that would erase
   the icons; they stay dark and simply ride the tint. */
.dashboard-notifications .notifications__item:hover .geosmart-notification-badge__circle {
  color: #1F2937 !important;
}

/* The notifications page feed gets the same flat treatment. Its rows are
   rendered in the 'page' context, which swaps the badge's element classes
   (.notification__* instead of .notifications__*) around the same two shared
   structural ones. The unread dot is untouched. */
.notifications-page-layout__feed .geosmart-notification-badge__circle,
.notifications-page-layout__feed .notification__item:hover .geosmart-notification-badge__circle {
  background: transparent !important;
  color: #1F2937 !important;
  box-shadow: none !important;
}

.notifications-page-layout__feed .geosmart-notification-badge__circle .notification__pic {
  filter: brightness(0) !important;
  opacity: 0.88;
}

/* Without the coloured circle the 48px badge box is just empty space, and it
   centred a 25px glyph inside itself — leaving the artwork ~11px short of the
   row's content edge at every width. The box now hugs a larger glyph and packs
   it left, so the icon starts exactly where the "Recent Notification" caption
   does, from mobile through desktop. */
.notifications-page-layout__feed .notification__ava.geosmart-notification-badge,
.notifications-page-layout__feed .geosmart-notification-badge__circle {
  width: 32px !important;
  height: 32px !important;
}

.notifications-page-layout__feed .geosmart-notification-badge__circle {
  justify-content: flex-start !important;
}

.notifications-page-layout__feed .geosmart-notification-badge__circle .notification__pic {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
}

/* Edge-to-edge artwork — kept a hair smaller, as the base sizes do. */
.notifications-page-layout__feed .geosmart-notification-badge__circle .notification__pic[src*="circle-check-big.svg"] {
  width: 31px !important;
  height: 31px !important;
  max-width: 31px !important;
}

.notifications-page-layout__feed .geosmart-notification-badge__circle .icon {
  width: 30px !important;
  height: 30px !important;
}

/* A two-column grid replaces the flex row so the preview copy can step out of
   the text column and start on the same edge as the icon and the caption, while
   the icon centres against the title / category pair instead of the whole row.
   .notification__details is only a wrapper, so display: contents hands its
   children straight to this grid. Rows without an icon (the empty state) keep
   the flex layout — their wrapper must stay a box or the two lines go side by
   side. */
.notifications-page-layout__feed .notification__item:has(> .geosmart-notification-badge) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
}

.notifications-page-layout__feed .notification__item:has(> .geosmart-notification-badge) > .notification__details {
  display: contents;
}

/* The icon-less empty state keeps its wrapper and sits outside the list, so it
   misses both the grid and the row padding rules — drop its insets by hand to
   put its copy on the same edge. */
.notifications-page-layout__feed .notification__item:not(:has(> .geosmart-notification-badge)) {
  padding-left: 0;
}

.notifications-page-layout__feed .notification__item:not(:has(> .geosmart-notification-badge)) > .notification__details {
  padding-left: 0;
}

.notifications-page-layout__feed .notification__item > .geosmart-notification-badge {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.notifications-page-layout__feed .notification__author {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 2px;
}

.notifications-page-layout__feed .notification__line {
  grid-column: 2;
  grid-row: 2;
  margin-bottom: 0;
}

/* The base sheet pulls this left by 64px on phones for the inbox layout it was
   written for; the grid handles the alignment here. */
.notifications-page-layout__feed .inbox__text {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 10px 0 0;
}

.notifications-page-layout__feed .inbox__text:empty {
  display: none;
}

.notifications-page-layout__feed .notification__row-actions {
  grid-column: 1 / -1;
  grid-row: 4;
}

/* display: contents drops the wrapper box that carried the read-state dim, so
   it moves onto the text itself. The badge keeps its own copy of the rule. */
.notifications-page-layout__feed .notification__item--read .notification__author,
.notifications-page-layout__feed .notification__item--read .notification__line,
.notifications-page-layout__feed .notification__item--read .inbox__text,
.notifications-page-layout__feed .notification__item--read .notification__row-actions {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   Header bell dropdown and account menu — carry the search panel's chrome

   Both come off the base sheet as floating pills on 24px / 18px radii with no
   border. They take the search field's 12px radius, the widget border colour
   and the shared panel shadow, so the three read as one surface. The bell's
   rows then reuse the Recent Notifications card layout: flat icons, copy
   tucked in against them, and the timestamp / unread dot trailing the title.
   -------------------------------------------------------------------------- */

.header .notifications .notifications__wrap,
.topbar-user__menu {
  border-radius: 12px !important;
  border: 1px solid var(--geosmart-border) !important;
  box-shadow: var(--v0-panel-shadow) !important;
}

.notifications__wrap .notifications__head,
.notifications__wrap > .notifications__info {
  margin-bottom: 15px !important;
}

/* Injected into every bell panel; styled for the desktop dropdown only
   (mobile keeps the sidebar Demo Environment ribbon). */
.notifications__demo-ribbon {
  display: none;
}

/* Cut down to the width of the header bar, the panel drops the message body
   and takes the account menu's metrics instead: an 8px shell, 10px/14px rows
   on a 12px radius, an 18px icon 12px off the title, and a ruled head. What
   stays is the icon, the title, the time and unread dot, the hover plate and
   the dismiss control. Below 768px the bell opens the full-bleed drawer, which
   keeps its own metrics. */
@media only screen and (min-width: 768px) {
  .header .notifications .notifications__wrap {
    padding: 12px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .header .notifications .notifications__wrap .notifications__head {
    margin-bottom: 10px !important;
    padding: 10px 14px 12px;
    border-bottom: 1px solid #f0f3f6;
  }

  /* Same Demo Environment strip as the Apex account menu. */
  .header .notifications .notifications__wrap .notifications__demo-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 11px -12px 0;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.03);
    color: #808191;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    cursor: help;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
  }

  .header .notifications .notifications__wrap .notifications__demo-ribbon__inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    max-width: 100%;
    white-space: nowrap;
  }

  .header .notifications .notifications__wrap .notifications__demo-ribbon__text {
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .header .notifications .notifications__wrap .notifications__demo-ribbon__dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #e8940b;
    flex-shrink: 0;
  }

  /* Same eyebrow as the dashboard card titles. */
  .header .notifications .notifications__wrap .notifications__info {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #4e4e4f;
  }

  .header .notifications .notifications__wrap button.notifications__item {
    gap: 12px;
    padding: 10px 40px 10px 14px !important;
    border-radius: 12px;
  }

  .header .notifications .notifications__wrap .notifications__text {
    display: none;
  }

  .header .notifications .notifications__wrap .notifications__line {
    margin-bottom: 0;
  }

  .header .notifications .notifications__wrap .notifications__user {
    font-size: 14px;
    font-weight: 600;
    color: #11142d;
  }

  /* Meta reads a size down from the title, as in the account menu. */
  .header .notifications .notifications__wrap .notifications__time {
    font-size: 12px;
  }

  .header .notifications .notifications__wrap .geosmart-notification-badge,
  .header .notifications .notifications__wrap .geosmart-notification-badge__circle {
    width: 18px;
    height: 18px;
  }

  .header .notifications .notifications__wrap .geosmart-notification-badge__circle .notifications__pic,
  .header .notifications .notifications__wrap .geosmart-notification-badge__circle .icon {
    width: 18px;
    height: 18px;
    max-width: 18px;
  }

  /* The row is a flexbox, so the gap sets the icon-to-title distance. */
  .header .notifications .notifications__wrap .notifications__ava,
  .header .notifications .notifications__wrap .geosmart-notification-badge,
  .header .notifications .notifications__wrap button.notifications__item > .geosmart-notification-badge {
    margin-right: 0 !important;
  }

  .header .notifications .notifications__wrap .notifications__dismiss {
    right: 10px;
  }

  .header .notifications .notifications__wrap .notifications__list {
    margin-bottom: 0;
  }
}

/* The drawer below 768px keeps the full-size rows, but the icon sat in a 48px
   box that centred a 25px glyph, pushing it ~12px inside the 32px edge the
   panel title starts on. Size the box to the glyph and let the row gap carry
   the space to the copy, as the desktop panel does. */
@media only screen and (max-width: 767px) {
  .geosmart-mobile-header-drawer-layer .notifications__wrap .notifications__item,
  .header .notifications .notifications__wrap .notifications__item {
    gap: 12px;
  }

  .geosmart-mobile-header-drawer-layer .notifications__wrap .notifications__ava,
  .geosmart-mobile-header-drawer-layer .notifications__wrap .geosmart-notification-badge,
  .geosmart-mobile-header-drawer-layer .notifications__wrap button.notifications__item > .geosmart-notification-badge,
  .geosmart-mobile-header-drawer-layer .notifications__wrap .geosmart-notification-badge__circle,
  .header .notifications .notifications__wrap .notifications__ava,
  .header .notifications .notifications__wrap .geosmart-notification-badge,
  .header .notifications .notifications__wrap button.notifications__item > .geosmart-notification-badge,
  .header .notifications .notifications__wrap .geosmart-notification-badge__circle {
    width: 25px;
    height: 25px;
    margin-right: 0 !important;
  }

  /* The panel already carries 24px under the list, so the list's own bottom
     margin was doubling the gap beneath the last row. */
  .geosmart-mobile-header-drawer-layer .notifications__wrap .notifications__list,
  .header .notifications .notifications__wrap .notifications__list {
    margin-bottom: 0 !important;
  }
}

.notifications__wrap .geosmart-notification-badge__circle,
.notifications__wrap .notifications__item:hover .geosmart-notification-badge__circle,
.notifications__wrap .notifications__item-row:hover .geosmart-notification-badge__circle {
  background: transparent !important;
  color: #1F2937 !important;
}

/* Same reason as the card above: the Lucide <img> icons carry a baked-in white
   stroke that no colour property reaches once the disc is gone. */
.notifications__wrap .geosmart-notification-badge__circle .notifications__pic {
  filter: brightness(0) !important;
  opacity: 0.88;
}

.notifications__wrap .notifications__ava,
.notifications__wrap .geosmart-notification-badge,
.notifications__wrap button.notifications__item > .geosmart-notification-badge {
  margin-right: 4px !important;
}

.notifications__wrap .notifications__line {
  align-items: center;
  gap: 8px;
}

.notifications__wrap .notifications__user {
  margin-right: 0 !important;
}

.notifications__wrap .notifications__time {
  margin-left: 0 !important;
}

/* --------------------------------------------------------------------------
   Marketing Hub — title + filter pills in the page head
   -------------------------------------------------------------------------- */

.marketing-hub-head__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.marketing-hub-head__title-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px 20px;
  width: 100%;
  min-width: 0;
}

.marketing-hub-head__title-row .page__welcome {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: 100%;
}

#marketing-hub-pills {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}

/* Match the Marketing Hub body grid so the pills left-align with the
   live preview / matrix column (3fr / 7fr from 1280; 4fr / 7fr at 1024–1279). */
@media only screen and (min-width: 1024px) {
  .marketing-hub-head__title-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    column-gap: 25px;
    row-gap: 0;
    align-items: center;
  }

  #marketing-hub-pills {
    justify-self: start;
    align-self: center;
    top: 10px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .marketing-hub-head__title-row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}

/* Individual pills — same size/style as notification filter pills. */
#marketing-hub-pills .notification__tags {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  max-width: 100%;
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px;
  overflow-x: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  opacity: 1 !important;
}

#marketing-hub-pills .notification__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  border: 2px solid var(--geosmart-border);
  border-radius: 12px;
  padding: 6px 16px;
  line-height: 1.4;
  font-weight: 600;
  opacity: 1 !important;
  background-color: transparent;
  color: #11142D;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

#marketing-hub-pills .notification__tag:hover {
  background-color: var(--geosmart-brand-blue-hover) !important;
  border-color: var(--geosmart-brand-blue-hover) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

#marketing-hub-pills .notification__tag.active {
  background-color: var(--geosmart-brand-blue) !important;
  border-color: var(--geosmart-brand-blue) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Metric chip blues — Total Applications / Approved icon + indicator rails.
   Intentionally NOT --geosmart-brand-blue; chart wells / CTAs use that. */
.bg-purple,
.bg-blue {
  background: var(--v0-metric-blue) !important;
}

/* Shared purple / pill / filter accents — resolve through --geosmart-brand-blue
   so DevTools edits on :root retheme CTAs, notification pills, and Unselect all. */
.btn {
  height: 50px;
}

.btn_purple,
.btn_blue {
  background: var(--geosmart-brand-blue);
}

.btn_purple:hover {
  background: var(--geosmart-brand-blue-hover);
}

.notification__tag {
  border-radius: 12px;
}

.notification__tag:hover,
.notification__tag.active {
  background: var(--geosmart-brand-blue);
  border-color: var(--geosmart-brand-blue);
}

.checkbox:hover .checkbox__tick {
  border-color: var(--geosmart-brand-blue);
}

.checkbox__input:checked + .checkbox__in .checkbox__tick {
  background: var(--geosmart-brand-blue);
  border-color: var(--geosmart-brand-blue);
}

.radio:hover .radio__tick,
.radio__input:checked + .radio__in .radio__tick {
  background: var(--geosmart-brand-blue);
}

/* Dashboard Approved metric chip (applications page keeps Approved blue /
   Funded green below). Tied to the metric node — not the href — so deep-link
   changes (e.g. unfiltered Applications) do not drop the brand green. */
.details_pipeline a:has([data-dashboard-metric="approved"]) .details__preview.bg-green,
.details_pipeline a:has([data-dashboard-metric="approved"]) .details__progress.bg-green {
  background: #15aa0e !important;
}

/* Applications pipeline — Funded metric chip. */
.details_pipeline a[data-pipeline-status="Funded"] .details__preview.bg-green,
.details_pipeline a[data-pipeline-status="Funded"] .details__progress.bg-green {
  background: #15aa0e !important;
}

/* --------------------------------------------------------------------------
   Applications actions — Start Application / Send Reminders

   Each button belongs to the card it acts on: Download Ratesheets, Custom
   Flyer Builder, and Start Application under the pipeline metrics, Send
   Reminders under the Needs Attention list. The page head still carries a copy
   of Start Application and Send Reminders (swup re-injects them on enter), so
   those stay hidden at every width.
   -------------------------------------------------------------------------- */

#applications-page-head-action,
#applications-page-head-reminders {
  display: none;
}

/* Flush with the card's content edge, clearing the block above by the same
   step the cards use between their own blocks. */
.applications-metric-action,
.applications-attention-action {
  width: 100%;
  margin-top: 32px;
}

.applications-attention-action {
  display: flex;
}

/* The CTAs get their own fluid grid — three equal columns spanning the card's
   content width, with a 40px gutter between them. Deliberately independent of
   the metric tracks above, which keep their own padding and dividers. */
.applications-metric-action {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.applications-metric-action .btn_cta {
  width: 100%;
  max-width: none;
  justify-content: space-between;
}

/* 768–1390: hide the icon box so the three-up labels fit the narrower
   left column. Mobile (stacked) and ≥1391 keep the full CTA with arrow. */
@media (min-width: 768px) and (max-width: 1390px) {
  .applications-metric-action .btn_cta {
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .applications-metric-action .btn_cta__icon {
    display: none;
  }
}

/* Stack with the metrics when they leave the three-up row. Extra vertical
   space between CTAs; skip bottom on the last — the card container already
   clears the floor. */
@media (max-width: 767px) {
  .applications-metric-action {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 50px;
  }

  .applications-metric-action .btn_cta {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .applications-metric-action .btn_cta:first-child {
    margin-top: 0;
  }

  .applications-metric-action .btn_cta:last-child {
    margin-bottom: 0;
  }
}

.applications-attention-action .applications-reminder-btn {
  width: 100%;
  max-width: none;
}

/* The cards share one height from 1024 up, so both CTAs sit on their card's
   floor and line up with each other. The 32px becomes the minimum clearance
   for whichever card fills its height. */
@media (min-width: 1024px) {
  .applications-metrics-row .details__container,
  .applications-metrics-row .page__col > .widget {
    display: flex;
    flex-direction: column;
  }

  .applications-metric-action,
  .applications-attention-action {
    margin-top: auto;
    padding-top: 32px;
  }
}

@media (max-width: 1023px) {
  .marketing-hub-head__copy {
    align-items: flex-start;
    text-align: left;
  }

  .marketing-hub-head__title-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    text-align: left;
  }

  .marketing-hub-head__copy .page__hello,
  .marketing-hub-head__title-row .page__welcome {
    text-align: left;
    width: auto;
    max-width: 100%;
  }

  #marketing-hub-pills {
    align-self: flex-start;
    justify-self: start;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
  }

  #marketing-hub-pills .notification__tags {
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Support Center page
   ========================================================================== */

@media (min-width: 1024px) {
  /* Keep 7/4 from 1024 up (skip the shared mid-tier 6/4). */
  .support-intro-row.page__row_fluid-grid {
    grid-template-columns: 7fr 4fr !important;
    align-items: stretch;
  }

  .support-intro-row.page__row_fluid-grid > .page__col {
    display: flex;
    flex-direction: column;
  }

  .support-intro-row.page__row_fluid-grid > .page__col > .widget {
    flex: 1 1 auto;
    height: 100%;
    min-height: 100%;
  }
}

.support-hero.widget {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--geosmart-brand-blue) !important;
  border: none !important;
  color: #ffffff;
  /* Match shared .widget padding so the intro pair lines up with other pages. */
  padding: 45px !important;
  box-sizing: border-box;
}

.support-hero__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.support-hero__copy-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.support-hero__title {
  margin: 0;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.support-hero__copy {
  margin: 0;
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.6;
}

.support-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.support-aside.widget {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  padding: 45px !important;
  box-sizing: border-box;
}

/* Same 25px module gap applications uses under its metrics row. */
.support-intro-row {
  margin: 0 0 25px;
}

/* Support ticket — landscape on desktop; scroll + swipe-close on mobile. */
#supportTicketModal {
  width: 100%;
  max-width: 840px;
}

#supportTicketModal .popup__title {
  margin-bottom: 24px;
}

/* Match system/settings/drawer dimmer: rgba(17,20,45,.55) at full opacity.
   Opacity uses the class only — :has(#supportTicketModal) would drop mid-close
   when Magnific relocates the popup and snap the fade. */
.mfp-bg.mfp-support-ticket-modal-open,
.mfp-zoom-in.mfp-bg.mfp-support-ticket-modal-open,
.mfp-bg:has(+ .mfp-wrap #supportTicketModal) {
  background: rgba(17, 20, 45, 0.55);
}

.mfp-zoom-in.mfp-bg.mfp-support-ticket-modal-open,
.mfp-zoom-in.mfp-ready.mfp-bg.mfp-support-ticket-modal-open,
.mfp-zoom-in.mfp-removing.mfp-bg.mfp-support-ticket-modal-open {
  transition: opacity 0.2s ease-out;
}

.mfp-zoom-in.mfp-ready.mfp-bg.mfp-support-ticket-modal-open:not(.mfp-removing) {
  background: rgba(17, 20, 45, 0.55);
  opacity: 1;
}

.mfp-zoom-in.mfp-removing.mfp-bg.mfp-support-ticket-modal-open {
  opacity: 0;
}

@media only screen and (max-width: 767px) {
  #supportTicketModal {
    margin: 32px 0;
  }

  /* Same document-style scrollport as Account Settings (X rides with the card). */
  .mfp-wrap.mfp-support-ticket-modal-open {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .mfp-wrap.mfp-support-ticket-modal-open .mfp-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .mfp-wrap.mfp-support-ticket-modal-open .mfp-content,
  .mfp-wrap.mfp-support-ticket-modal-open #supportTicketModal {
    overflow: visible !important;
  }

  body.modal-open .mfp-wrap.mfp-support-ticket-modal-open .mfp-content,
  body.modal-open .mfp-wrap.mfp-support-ticket-modal-open #supportTicketModal {
    overflow: visible !important;
  }

  body.modal-open .mfp-wrap.mfp-support-ticket-modal-open #supportTicketModal .popup__form {
    overflow: hidden !important;
  }

  .mfp-wrap.mfp-support-ticket-modal-open.mfp-support-ticket-modal-swiping,
  body.modal-open .mfp-wrap.mfp-support-ticket-modal-open.mfp-support-ticket-modal-swiping {
    overflow: visible !important;
  }

  #supportTicketModal.is-support-ticket-modal-swipe-dragging {
    overflow: hidden;
  }

  #supportTicketModal.is-support-ticket-modal-swipe-dragging .popup__form {
    overflow: hidden;
  }
}

@media only screen and (min-width: 1024px) {
  .mfp-bg.mfp-support-ticket-modal-open {
    top: var(--geosmart-chrome-bar-height, 90px) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .mfp-wrap.mfp-support-ticket-modal-open {
    top: var(--geosmart-chrome-bar-height, 90px) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .mfp-wrap.mfp-support-ticket-modal-open .mfp-container {
    height: 100% !important;
    box-sizing: border-box !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #supportTicketModal {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}

#supportTicketModal .field__input,
#supportTicketModal .field__textarea,
#popup-settings .field__input,
#popup-settings .field__textarea {
  background: #f4f6fb;
}

#supportTicketModal .field__input:focus,
#supportTicketModal .field__textarea:focus,
#popup-settings .field__input:focus,
#popup-settings .field__textarea:focus {
  background: #ffffff;
}

/* Flyer Builder — match Dealer Number to the shared grey input fill
   (same as sorting / flyer-settings selects), not the legacy translucent grey. */
.flyer-settings #dealerInput,
.flyer-settings input.field__input {
  background: rgb(245 246 252);
}

.flyer-settings #dealerInput:focus,
.flyer-settings input.field__input:focus {
  background: #ffffff;
}

/* Keep the disabled Dealer ID in Account Settings on the same grey (browsers
   often force a lighter/opaque fill on :disabled). */
#popup-settings #setting-dealer:disabled,
#popup-settings .field__input:disabled {
  background: #f4f6fb;
  opacity: 1;
  color: #11142d;
  -webkit-text-fill-color: #11142d;
}

.support-faq {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
}

.support-faq > .page__col {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.support-faq__category.widget {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.support-faq__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}

.support-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  border-radius: 6px;
  background: #e1edff;
  color: #000000;
  font-size: 0;
}

.support-faq__icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.support-faq__title {
  margin: 0;
}

.support-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}

@media (min-width: 768px) {
  .support-faq__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.support-faq__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.support-faq__question {
  display: block;
  margin: 0;
}

.support-faq__question p {
  margin: 0;
  color: #11142d;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.support-faq__answer {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.support-contact__title {
  margin: 0;
}

.support-contact__text {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.support-contact__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.support-contact__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--geosmart-brand-blue);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

.support-contact__link:hover {
  color: var(--geosmart-brand-blue-hover);
}

.support-contact__link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media only screen and (max-width: 767px) {
  .support-hero__title {
    font-size: 20px;
  }

  .support-hero.widget,
  .support-aside.widget {
    padding: 24px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .support-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .support-hero__actions .btn_cta {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }

  /* Match the shared mobile card rhythm (16px = page gutter). */
  .support-intro-row {
    margin-bottom: 16px;
  }

  .support-faq > .page__col,
  .support-faq__grid {
    gap: 16px;
  }

  .support-faq__item {
    margin-top: 15px;
  }
}