/*
 * Admin accessibility overrides.
 *
 * AB#9521 - Left navigation missing a visible keyboard focus indicator.
 * WCAG 2.4.7 Focus Visible (AA), 1.4.11 Non-text Contrast (3:1).
 *
 * Metronic defines no :focus-visible style for .menu-link, so keyboard focus in
 * the left nav fell back to the browser default ring, which is not discernible
 * against the sidebar background.
 *
 * The ring is drawn INSIDE the element (negative outline-offset + inset
 * box-shadow) because sidebars clip overflow - an outset ring would be cut off.
 *
 * Two tones are used on purpose: whichever way the sidebar theme renders, one of
 * white / blue clears 3:1 against it, so the indicator survives a light or dark
 * sidebar without hard-coding the theme's background colour.
 *
 * :focus-visible only - pointer users see no change.
 */

.app-sidebar .menu-link:focus-visible,
.app-sidebar .menu-item > a:focus-visible,
.app-sidebar a:focus-visible,
aside#nav a:focus-visible,
aside#nav .nav-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #0d6efd;
  border-radius: 6px;
}

/* Older engines with no :focus-visible support fall back to :focus. */
@supports not selector(:focus-visible) {
  .app-sidebar .menu-link:focus,
  .app-sidebar a:focus,
  aside#nav a:focus,
  aside#nav .nav-link:focus {
    outline: 3px solid #fff;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px #0d6efd;
    border-radius: 6px;
  }
}

/*
 * AB#8219 - baseline keyboard focus ring for the Metronic shells.
 * WCAG 2.4.7 Focus Visible (AA), 1.4.11 Non-text Contrast (3:1).
 *
 * The legacy admin pages get a global ring from app.css ("*:focus"), which
 * Default-Head.cshtml links whenever ViewBag.UseMaterialize is false. The
 * Metronic layouts (body#kt_app_body) never load app.css, so on those pages
 * there was no global ring at all - anything Bootstrap or Metronic did not
 * style individually took focus with nothing visible. /EmailSMS shows both
 * halves of this: the BS3 shell (EmailSMSMain.cshtml) has app.css and a ring,
 * the BS5 shell (EmailSMSMainBS5.cshtml) has neither.
 *
 * [data-kt-app-layout] is on the <body> of every Metronic layout, so this
 * reaches all of them and nothing else - the legacy pages keep app.css's ring
 * rather than getting two.
 *
 * Specificity is deliberately (0,2,0) and this block is deliberately FIRST, so
 * every component-specific treatment below still wins: the sidebar keeps
 * AB#9521's two-tone inset ring, .menu-link and .header-tab-item keep theirs.
 *
 * #0072c6 is --pi-blue-accessible from admin-contrast.css: 4.97:1 on white,
 * 3.64:1 on the Metronic dark page background (#151521). Both clear 3:1, so one
 * colour covers light and dark without a theme override.
 */
[data-kt-app-layout] :focus-visible {
  outline: 2px solid var(--pi-blue-accessible, #0072c6);
  outline-offset: 2px;
}

@supports not selector(:focus-visible) {
  [data-kt-app-layout] :focus {
    outline: 2px solid var(--pi-blue-accessible, #0072c6);
    outline-offset: 2px;
  }
}

/*
 * AB#8219 - the same gap for .menu-link and the .header-tab-item tab strips.
 * WCAG 2.4.7 Focus Visible (AA), 1.4.11 Non-text Contrast (3:1).
 *
 * AB#9521 above is scoped to .app-sidebar / aside#nav, but Metronic ships no
 * :focus state for .menu-link ANYWHERE - only :hover and .active. The sub-navs,
 * header menus and dropdown menus that reuse the class had nothing either, and
 * the Metronic layouts do not load app.css, whose global *:focus ring is what
 * covers the legacy admin pages. On the Meetings sub-nav, whose tabs sit on a
 * roving tabindex, that left the arrow keys moving focus invisibly - they are
 * the only way to traverse a tablist, so there was no way to tell where you
 * were.
 *
 * Same two-tone inset ring as AB#9521, for the same two reasons: whichever way
 * the menu is themed one of white / blue clears 3:1 against it, and drawing the
 * ring inside the element keeps a scrolling or overflow-hidden container from
 * clipping it.
 *
 * border-radius is deliberately NOT set here. AB#9521 can pin 6px because it
 * only ever applies to the sidebar; applied to every .menu-link it would round
 * the hover and active BACKGROUNDS of menus meant to be square. The outline
 * follows whatever radius the element already has (Metronic gives .menu-rounded
 * .menu-link 0.475rem).
 *
 * Lower specificity than the .app-sidebar rules above on purpose, so the left
 * navigation keeps its own vetted treatment.
 *
 * The 6px inset clears Metronic's 0.65rem/1rem .menu-link padding. The only
 * zero-padding variant is .menu-fit, which this codebase does not use.
 *
 * .header-tab-item is the Email & Text / CRM / Marketing tab strip. It gets the
 * same ring rather than the baseline above so the indicator matches across the
 * BS3 and BS5 shells of /EmailSMS, which do not share a stylesheet. Its 15px
 * padding clears the inset, and it has no border-radius to follow.
 */
.menu-link:focus-visible,
.header-tab-item:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #0d6efd;
}

/* Older engines with no :focus-visible support fall back to :focus. */
@supports not selector(:focus-visible) {
  .menu-link:focus,
  .header-tab-item:focus {
    outline: 3px solid #fff;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px #0d6efd;
  }
}

/*
 * AB#9518 - "Skip to main content" link missing (application-wide).
 * WCAG 2.4.1 Bypass Blocks (Level A).
 *
 * Every admin layout renders the header and the whole left navigation before
 * the main region, so a keyboard or screen-reader user tabs through the entire
 * nav on every page load. The skip link is the bypass mechanism.
 *
 * NOTE ON DETECTION: axe-core does NOT report this. Its `bypass` rule is
 * satisfied by the presence of a main landmark alone, which the Metronic
 * layouts already have. Siteimprove - which is what MDOT actually runs - checks
 * for the skip link itself. So a green axe scan is not evidence this is fixed;
 * the check is that a skip link is the first focusable element in the body.
 *
 * .visually-hidden and .visually-hidden-focusable are Bootstrap 5 utilities,
 * but the admin layouts pull Bootstrap from a CDN. They are redefined here so
 * the skip link degrades to hidden - never to a stray visible link at the top
 * of every admin page - if that CDN is blocked or slow.
 *
 * The two selectors below are deliberately NOT combined into one rule. CSS
 * discards an entire selector LIST when any selector in it fails to parse, so
 * an engine that does not understand :focus-within would drop the
 * .visually-hidden fallback along with it - and the fallback existing on older
 * engines is the whole point of declaring it here. Kept apart, each stands or
 * falls on its own.
 */

/*
 * WHY !important HERE, AND WHY THE FOCUSABLE VARIANT MUST FOLLOW
 * -------------------------------------------------------------
 * !important on every property: this is a LAST-RESORT fallback that has to win
 * against whatever the page already loaded (Metronic's bundle, app.css, the
 * legacy BS3 sheet all define competing positioning on the same utility), and
 * this file is linked late but not always last. Without it the fallback loses
 * and a stray "Skip to main content" link paints at the top of every page.
 *
 * That strength is also why .visually-hidden-focusable MUST be handled below.
 * Bootstrap 5 markup routinely pairs the two classes
 * (class="visually-hidden visually-hidden-focusable") and relies on BS5's own
 * `:not(:focus):not(:focus-within)` guard to reveal the element on focus. Our
 * unguarded .visually-hidden above outranks that, so a FOCUSED control would
 * stay clipped to 1x1 - a keyboard user's focus lands somewhere invisible,
 * which is a worse 2.4.7 / 2.4.11 failure than the one being fixed. The
 * restore rules therefore carry !important too: they have to beat the
 * !important block above, not merely the theme.
 *
 * The :focus and :focus-within restores are kept as SEPARATE rules for the
 * same reason as the .admin-skip-link pair further down - a selector list is
 * discarded whole if any selector in it fails to parse, and :focus-within is
 * the one an older engine may not understand.
 */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; /* legacy fallback; flagged deprecated in devtools */
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

.visually-hidden-focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

.admin-skip-link:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; /* legacy fallback; flagged deprecated in devtools */
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.admin-skip-link:focus,
.admin-skip-link:focus-visible {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2000; /* above the Metronic fixed header (z-index 100-ish) */
  width: auto;
  height: auto;
  padding: 0.6rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  background: #fff;
  /* #0061a8 on #fff is 6.4:1 - clears 1.4.3 AA for text. */
  color: #0061a8;
  font-weight: 600;
  text-decoration: underline;
  border-radius: 6px;
  /* 3:1 non-text contrast for the focus ring, per 1.4.11. */
  outline: 3px solid #0061a8;
  outline-offset: 2px;
  box-shadow: 0 4px 16px rgba(24, 28, 50, 0.28);
}

/* The skip target itself must not draw a focus ring - it is only focusable so
   that the skip link can move focus into it programmatically. It is the
   existing main landmark (Metronic's #kt_app_main), not a second id for the
   same element. */
#kt_app_main:focus,
[role="main"][tabindex="-1"]:focus,
main[tabindex="-1"]:focus {
  outline: none;
}

/*
 * AB#9519 / AB#10015 - main landmark for the LEGACY admin layouts.
 *
 * WHAT AB#9519 DID, AND WHAT IT BROKE
 * -----------------------------------
 * AB#9519 wrapped @RenderBody() in _CustomerLayout.cshtml with
 * <section id="legacy-main-content" role="main">. That wrapper sits directly
 * inside <section class="hbox stretch">, and app.css:806 declares
 *
 *     .hbox > aside, .hbox > section { display: table-cell; height: 100%; }
 *
 * This is SELECTOR matching, not box inheritance. Before the wrapper, the
 * view's own <section class="content"> was the direct child of .hbox, so it
 * matched that rule and received height:100%. After the wrapper, the WRAPPER is
 * the direct child, so the wrapper takes the table-cell slot - and the view's
 * section, now a grandchild, matches nothing and falls back to a plain block
 * with height:auto. Inside a table-cell with no intrinsic height that resolves
 * to 0. app.css:781 sets `body { overflow: hidden }`, so everything below the
 * first ~50px was clipped away. The content was in the DOM the whole time - the
 * form measured 1204px tall - it just could not paint.
 *
 * Six views render through _CustomerLayout with <section class="content"> as
 * their root and were affected: Customer/Settings, Customer/CustomerHome,
 * Customer/Project, Customer/ProjectMeetingSeriesAdmin, Audience/AudiencesHome,
 * Taxonomy/Index. Views rooted in .vbox set their own height:100% and were not.
 *
 * WHAT THE ORIGINAL VERIFICATION ACTUALLY COVERED - READ THIS BEFORE TRUSTING IT
 * -----------------------------------------------------------------------------
 * The comment this replaces claimed the geometry was measured before and after
 * and was unchanged. That claim was WRONG, and it survived three review rounds.
 *
 *   Measured:     WIDTH and horizontal position, on /Customer/Settings only
 *                 (x=200, w=1080 before and after). Both were genuinely
 *                 unchanged - a table-cell fills the row's width either way.
 *   NOT measured: HEIGHT. Height is the axis the wrapper broke, and nothing in
 *                 the round-1 validation looked at it.
 *   NOT measured: any _CustomerLayout view other than /Customer/Settings.
 *
 * Nor did the scanner catch it: axe skips descendants of a zero-size clipped
 * ancestor, so a page whose entire content section collapsed to height 0
 * reports FEWER findings, not more. The clean axe runs on these pages after
 * round 1 were false passes.
 *
 * THE FIX
 * -------
 * Give the inner section back the height the selector no longer grants it.
 * display:contents on the wrapper is NOT a substitute: it removes the wrapper's
 * box but does nothing to selector matching, so the inner section still fails
 * to match `.hbox > section` and still never receives height:100%.
 *
 * The same interception applies to bootstrap-3-shim.css:1157 (`display:
 * table-cell !important` on .hbox > section) and to the unscoped duplicate of
 * the app.css rule in Civic-Front.css:2731. Both only set display, which the
 * wrapper now legitimately carries; height is the only property that has to be
 * handed back down.
 *
 * E2E/a11y/verify-skiplink.mjs asserts the landmark is reachable.
 */
#legacy-main-content > section.content {
  height: 100%;
}


/* Icon-only control rendered inline in a run of text or icons. Exists so an
   activatable control can be a <button> - focusable, and allowed an
   accessible name - without inheriting the button padding and background that
   would move the icon off its baseline. An <a> with no href was previously
   used for these: it is not keyboard focusable and, having no role, is not
   permitted an aria-label at all (axe: aria-prohibited-attr).

   Lives in admin-a11y.css, not app-custom.css: the Bootstrap 5 admin layout
   has app-custom.css commented out, so the buttons this class supports
   rendered with default button chrome on ProjectBS5. Both admin layouts load
   THIS file, which is also where a rule that exists to support an
   accessibility fix belongs. */
.btn-icon-inline {
  padding: 0;
  background-color: transparent;
  border: 0;
  vertical-align: baseline;
  line-height: inherit;
}

.offlineEventModalParent .btn-icon-inline,
.editEventModal .btn-icon-inline {
  color: inherit;
}


/*
 * AB#9517 - Hidden Metronic sidebar regions (mobile drawer + collapsed
 * accordion groups) kept a tab stop despite being visually hidden.
 * WCAG 2.4.3 Focus Order / 2.4.7 Focus Visible.
 *
 * display:flex + translateX(-100%) (drawer) and height:0; overflow:hidden
 * (collapsed accordion groups) do not remove descendants from the tab order.
 * visibility:hidden does, and is inherited by descendants.
 */
.drawer:not(.drawer-on) {
  visibility: hidden;
  transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s !important;
}

@media (min-width: 992px) {
  [data-kt-app-sidebar-minimize="on"][data-kt-app-sidebar-hoverable="true"]
    .app-sidebar:not(:hover)
    .app-sidebar-menu
    .menu-item.show
    > .menu-sub {
    visibility: hidden;
  }
}

#default-admin-embed-code-builder .modal-body,
#default-admin-embed-code-builder .modal-body > div {
  min-width: 0;
}

.admin-embed-code {
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow-x: auto;
}

.dropdown-select > li > a > input {
  pointer-events: none;
}

.switch > .control-label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible {
  outline: 2px solid var(--pi-blue-accessible, #0072c6);
  outline-offset: 2px;
}

.dataTables_wrapper thead th:focus-visible {
  outline: 2px solid var(--pi-blue-accessible, #0072c6);
  outline-offset: -2px;
}

@supports not selector(:focus-visible) {
  .dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    outline: 2px solid var(--pi-blue-accessible, #0072c6);
    outline-offset: 2px;
  }

  .dataTables_wrapper thead th:focus {
    outline: 2px solid var(--pi-blue-accessible, #0072c6);
    outline-offset: -2px;
  }
}

.pa-email-ui .pa-email-search:focus-within {
  outline: 2px solid var(--pi-blue-accessible, #0072c6);
  outline-offset: 1px;
}

.email-communications-email-outer aside.bg-primary a:focus-visible,
.email-communications-email-outer
  aside.bg-primary
  [role="button"]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #0d6efd;
  border-radius: 4px;
}

@supports not selector(:focus-visible) {
  .email-communications-email-outer aside.bg-primary a:focus,
  .email-communications-email-outer aside.bg-primary [role="button"]:focus {
    outline: 3px solid #fff;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px #0d6efd;
    border-radius: 4px;
  }
}

.panel-heading .panel-heading-inline-title {
  display: inline;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
