/* 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;
  }
}