/* Shared Back Office presentation. Use the existing palette layer so legacy
   important utility colors cannot separate button text from its background. */
@layer govtech {
  html body :is(#systemsSection, #backofficePage) .bo-logo-frame {
    width: 88px !important;
    height: 88px !important;
    max-width: 100%;
    flex-shrink: 0;
  }
  html body :is(#systemsSection, #backofficePage) .bo-logo-image {
    width: 100% !important;
    height: 100% !important;
    padding: 6px !important;
    object-fit: contain;
    flex-shrink: 0;
  }
  /* These square assets have no side padding, unlike the wide DLA images. */
  html body :is(#systemsSection, #backofficePage) .bo-logo-image:is(
    [src*="/bo_4e0041219c6ac8c9783a1d7048bf94b7.png"],
    [src*="/bo_8b9055161726460e7de167a55755ba47.png"],
    [src*="/bo_87bd3bd9eef88a22e97bf2d04dc470c9.png"],
    [src*="/bo_8236056b96f96d9440ff9d5ab8b4c246.png"]
  ) {
    width: 44% !important;
    height: 44% !important;
    padding: 0 !important;
  }
  @media (min-width: 640px) {
    html body :is(#systemsSection, #backofficePage) .bo-logo-frame { width: 112px !important; height: 112px !important; }
  }
  @media (min-width: 768px) {
    html body :is(#systemsSection, #backofficePage) .bo-logo-frame { width: 120px !important; height: 120px !important; }
  }

  html body :is(#systemsSection, #backofficePage) :is(.idx-system-card, .system-card) h3 {
    color: var(--site-ink, #0f172a) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body :is(#systemsSection, #backofficePage) :is(.idx-system-card, .system-card):is(:hover, :focus-visible) h3 {
    color: var(--site-accent, #237d38) !important;
  }
  html body :is(#systemsSection, #backofficePage) :is(.idx-open-app, .bo-open-app, .bo-back-link, .idx-filter-btn, .sys-filter-btn) {
    background: var(--site-soft, #edf7ee) !important;
    color: var(--site-accent, #237d38) !important;
    border-color: var(--site-soft-border, #cfe5d3) !important;
    -webkit-text-fill-color: currentColor !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  html body :is(#systemsSection, #backofficePage) :is(.idx-filter-btn, .sys-filter-btn, .bo-back-link) {
    background: var(--site-surface, #fff) !important;
    color: var(--site-ink, #0f172a) !important;
  }
  html body :is(#systemsSection, #backofficePage) :is(.idx-filter-btn, .sys-filter-btn):is(:hover, :focus-visible) {
    background: var(--site-soft, #edf7ee) !important;
    color: var(--site-accent, #237d38) !important;
    border-color: var(--site-accent, #237d38) !important;
  }
  html body :is(#systemsSection, #backofficePage) :is(.idx-filter-btn, .sys-filter-btn)[aria-pressed="true"],
  html body #systemsSection .idx-view-all {
    background: var(--site-button, #237d38) !important;
    color: #fff !important;
    border-color: var(--site-button, #237d38) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body :is(#systemsSection, #backofficePage) :is(.idx-system-card, .system-card):is(:hover, :focus-visible, :active) :is(.idx-open-app, .bo-open-app),
  html body :is(#systemsSection, #backofficePage) :is(.idx-view-all, .bo-back-link):is(:hover, :focus-visible, :active),
  html body :is(#systemsSection, #backofficePage) :is(.idx-filter-btn, .sys-filter-btn)[aria-pressed="true"]:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--site-button, #237d38) 80%, #000) !important;
    color: #fff !important;
    border-color: var(--site-button, #237d38) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body :is(#systemsSection, #backofficePage) :is(.idx-view-all, .idx-open-app, .bo-open-app, .bo-back-link) *,
  html body :is(#systemsSection, #backofficePage) :is(.idx-view-all, .idx-open-app, .bo-open-app, .bo-back-link) i::before {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body :is(#systemsSection, #backofficePage) :is(.idx-view-all, .idx-system-card, .system-card, .bo-back-link, .idx-filter-btn, .sys-filter-btn):focus-visible {
    outline: 3px solid var(--site-accent, #237d38) !important;
    outline-offset: 3px !important;
  }
}

/* Index logos: source seals sit inside 300 x 141 canvases with empty side
   margins. Fill their square frames without modifying the source assets.
   Wide wordmarks retain contain so their lettering remains intact. */
@layer govtech {
  html body #systemsSection .bo-logo-image:is(
    [src*="/bo_7a16f2c77295c8c722b22a35a6369984.png"],
    [src*="/bo_bcee87f5629f231c7faae4fbcd165615.png"],
    [src*="/bo_7650d9439132caeab41d21162440d3a3.png"],
    [src*="/bo_52c188318711b12312af6b70535763f7.png"],
    [src*="/bo_c8d26ddf63d3c8d54803dc834de1f2c6.png"],
    [src*="/bo_0c06585d35513d367782af6dcb71be8d.png"],
    [src*="/bo_9d5caac8f7a06dca97c35bb4f391d03a.png"],
    [src*="/bo_d411bcd5346f0d59c00eea738dc650af.png"],
    [src*="/bo_80a513a0112abe35d23ee6cd9796053c.png"],
    [src*="/bo_c054787b4a2b758c8858d47641e23eae.png"]
  ) {
    object-fit: cover !important;
    object-position: center;
  }
  /* This wider emblem needs gentler enlargement to retain its full width. */
  html body #systemsSection .bo-logo-image[src*="/bo_84a51c0c79a7545f77fe220707db81aa.png"] {
    transform: scale(1.42) !important;
  }
}