/*
 * AICS Project-Wide Row Action Alignment V3 - 2 Sep 2026
 * Presentation only. Existing action contents, permissions, workflows and JS remain untouched.
 */
:root {
  --aics-row-action-mobile-size: 44px;
  --aics-row-action-mobile-inset: 12px;
  --aics-row-action-mobile-reserve: 58px;
}

.actions-cell > .actions-menu,
[data-row-action="1"] > .actions-menu { vertical-align: middle; }

@media (max-width: 767px) {
  /* One mobile trigger size everywhere the standard three-dot system is used. */
  :where(.actions-menu > .actions-toggle, .aics-row-actions-trigger) {
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    height: var(--aics-row-action-mobile-size) !important;
    min-height: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--aics-row-action-mobile-size) !important;
    box-sizing: border-box !important;
  }

  /* Directory cards: Users & Staff + Participants. The card itself owns the
     top/right geometry so module-specific header grids cannot shift the trigger. */
  :where(.aics-directory-card, .staff-mobile-card, .participant-mobile-card) {
    position: relative !important;
  }
  :where(.aics-directory-card-header, .staff-mobile-card-header, .participant-mobile-card-header) {
    position: static !important;
    padding-right: var(--aics-row-action-mobile-reserve) !important;
    box-sizing: border-box !important;
  }
  :where(.aics-directory-card, .staff-mobile-card, .participant-mobile-card)
    > :where(.aics-directory-card-header, .staff-mobile-card-header, .participant-mobile-card-header)
    > .actions-menu {
    position: absolute !important;
    top: var(--aics-row-action-mobile-inset) !important;
    right: var(--aics-row-action-mobile-inset) !important;
    left: auto !important;
    bottom: auto !important;
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    height: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    display: block !important;
    z-index: 8 !important;
    overflow: visible !important;
  }

  /* Participant Documents dedicated cards. */
  .participant-document-card-v2 { position: relative !important; }
  .participant-document-card-v2 > .participant-document-card-header-v2 {
    position: static !important;
    padding-right: var(--aics-row-action-mobile-reserve) !important;
  }
  .participant-document-card-v2 > .participant-document-card-header-v2 > .actions-menu {
    position: absolute !important;
    top: var(--aics-row-action-mobile-inset) !important;
    right: var(--aics-row-action-mobile-inset) !important;
    left: auto !important;
    bottom: auto !important;
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    height: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    z-index: 8 !important;
    overflow: visible !important;
  }

  /* Staff Details -> Approved Documents dedicated cards. */
  .approved-doc-mobile-card { position: relative !important; }
  .approved-doc-mobile-card > .approved-doc-mobile-card-header {
    position: static !important;
    padding-right: var(--aics-row-action-mobile-reserve) !important;
    box-sizing: border-box !important;
  }
  .approved-doc-mobile-card > .approved-doc-mobile-card-header > .approved-doc-mobile-actions[data-row-action="1"] {
    position: absolute !important;
    top: var(--aics-row-action-mobile-inset) !important;
    right: var(--aics-row-action-mobile-inset) !important;
    left: auto !important;
    bottom: auto !important;
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    height: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 8 !important;
  }
  .approved-doc-mobile-card > .approved-doc-mobile-card-header > .approved-doc-mobile-actions[data-row-action="1"] .actions-menu {
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Employment Documents already has an absolute top-right actions cell.
     Standardise only its position/size. */
  .aics-employment-documents-stage5-v1 table.employment-documents-table > tbody > tr {
    position: relative !important;
  }
  .aics-employment-documents-stage5-v1 table.employment-documents-table > tbody > tr > td.actions-cell,
  html.aics-mobile-standard-v2-ready body .aics-employment-documents-stage5-v1 table.employment-documents-table > tbody > tr > td.aics-mobile-actions-cell {
    top: var(--aics-row-action-mobile-inset) !important;
    right: var(--aics-row-action-mobile-inset) !important;
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    min-height: var(--aics-row-action-mobile-size) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Keep popovers viewport-safe. Existing shared app.js/CSS still owns left/top. */
  :where(.actions-popover:not([hidden]), .aics-report-actions-popover:not([hidden])) {
    max-width: calc(100vw - 20px) !important;
  }

  /* Shift/Incident report mobile cards intentionally keep their readable
     Actions row/button and are not converted to a top-right icon. */
  #report-list-section .aics-report-mobile-actions .aics-report-actions-menu--mobile,
  #report-list-section .aics-report-mobile-actions .aics-report-actions-toggle {
    position: relative;
  }
}

/* AICS_PROJECT_WIDE_ROW_ACTION_ALIGNMENT_V3_1_STRONG_20260902
 * Strong specificity correction.
 * The first V3 alignment layer was intentionally generic, but legacy module rules
 * such as `html body #staffListSection ... .actions-menu {position:relative!important}`
 * can outrank generic :where() selectors when both are !important.
 * These exact mobile-card selectors make the OUTER card the positioning anchor.
 * Presentation only: menu items, permissions, JS, routes and workflows are unchanged.
 */
@media (max-width: 767px) {
  /* USERS & STAFF --------------------------------------------------------- */
  html body .aics-users-page-v1 #staffListSection article.staff-mobile-card.aics-directory-card {
    position: relative !important;
  }
  html body .aics-users-page-v1 #staffListSection article.staff-mobile-card.aics-directory-card
    > header.staff-mobile-card-header.aics-directory-card-header {
    position: static !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding-right: var(--aics-row-action-mobile-reserve) !important;
    box-sizing: border-box !important;
  }
  html body .aics-users-page-v1 #staffListSection article.staff-mobile-card.aics-directory-card
    > header.staff-mobile-card-header.aics-directory-card-header
    > .actions-menu {
    position: absolute !important;
    top: var(--aics-row-action-mobile-inset) !important;
    right: var(--aics-row-action-mobile-inset) !important;
    left: auto !important;
    bottom: auto !important;
    display: block !important;
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    height: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
    overflow: visible !important;
  }

  /* PARTICIPANTS --------------------------------------------------------- */
  html body .participant-list-card.aics-directory--participants article.participant-mobile-card.aics-directory-card {
    position: relative !important;
  }
  html body .participant-list-card.aics-directory--participants article.participant-mobile-card.aics-directory-card
    > header.participant-mobile-card-header.aics-directory-card-header {
    position: static !important;
    padding-right: var(--aics-row-action-mobile-reserve) !important;
    box-sizing: border-box !important;
  }
  html body .participant-list-card.aics-directory--participants article.participant-mobile-card.aics-directory-card
    > header.participant-mobile-card-header.aics-directory-card-header
    > .actions-menu {
    position: absolute !important;
    top: var(--aics-row-action-mobile-inset) !important;
    right: var(--aics-row-action-mobile-inset) !important;
    left: auto !important;
    bottom: auto !important;
    flex: none !important;
    display: block !important;
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    height: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
    overflow: visible !important;
  }

  /* PARTICIPANT DOCUMENTS ------------------------------------------------ */
  html body article.participant-document-card-v2 {
    position: relative !important;
  }
  html body article.participant-document-card-v2 > header.participant-document-card-header-v2 {
    position: static !important;
    padding-right: var(--aics-row-action-mobile-reserve) !important;
    box-sizing: border-box !important;
  }
  html body article.participant-document-card-v2 > header.participant-document-card-header-v2 > .actions-menu {
    position: absolute !important;
    top: var(--aics-row-action-mobile-inset) !important;
    right: var(--aics-row-action-mobile-inset) !important;
    left: auto !important;
    bottom: auto !important;
    display: block !important;
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    height: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
    overflow: visible !important;
  }

  /* STAFF DETAILS -> APPROVED DOCUMENTS --------------------------------- */
  html body article.approved-doc-mobile-card {
    position: relative !important;
  }
  html body article.approved-doc-mobile-card > header.approved-doc-mobile-card-header {
    position: static !important;
    padding-right: var(--aics-row-action-mobile-reserve) !important;
    box-sizing: border-box !important;
  }
  html body article.approved-doc-mobile-card > header.approved-doc-mobile-card-header
    > .approved-doc-mobile-actions[data-row-action="1"] {
    position: absolute !important;
    top: var(--aics-row-action-mobile-inset) !important;
    right: var(--aics-row-action-mobile-inset) !important;
    left: auto !important;
    bottom: auto !important;
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    height: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
  }
  html body article.approved-doc-mobile-card > header.approved-doc-mobile-card-header
    > .approved-doc-mobile-actions[data-row-action="1"] > .actions-menu {
    position: static !important;
    display: block !important;
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    height: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* EMPLOYMENT DOCUMENTS ------------------------------------------------- */
  html body .aics-employment-documents-stage5-v1 table.employment-documents-table > tbody > tr {
    position: relative !important;
  }
  html body .aics-employment-documents-stage5-v1 table.employment-documents-table > tbody > tr
    > td.actions-cell,
  html.aics-mobile-standard-v2-ready body .aics-employment-documents-stage5-v1 table.employment-documents-table > tbody > tr
    > td.aics-mobile-actions-cell {
    position: absolute !important;
    top: var(--aics-row-action-mobile-inset) !important;
    right: var(--aics-row-action-mobile-inset) !important;
    left: auto !important;
    bottom: auto !important;
    width: var(--aics-row-action-mobile-size) !important;
    min-width: var(--aics-row-action-mobile-size) !important;
    max-width: var(--aics-row-action-mobile-size) !important;
    min-height: var(--aics-row-action-mobile-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
    overflow: visible !important;
  }

  /* Do not convert specialised report Action rows into top-right icons. */
  html body #report-list-section .aics-report-mobile-actions,
  html body #report-list-section .aics-report-mobile-actions .aics-report-actions-menu--mobile,
  html body #report-list-section .aics-report-mobile-actions .aics-report-actions-toggle {
    position: relative;
  }
}

/* AICS_PROJECT_WIDE_ROW_ACTION_MENU_LEFT_ALIGN_V3_2_20260902
 * Shared action-popover content alignment.
 * Presentation only: keeps trigger/popover geometry, menu order, permissions,
 * routes, forms and destructive-action semantics unchanged.
 */
html body :where(.actions-popover, .aics-report-actions-popover):not([hidden]) > :where(a, button),
html body :where(.actions-popover, .aics-report-actions-popover):not([hidden]) > form > :where(a, button),
html body :where(.actions-popover, .aics-report-actions-popover):not([hidden]) > details > :where(summary, a, button),
html body :where(.actions-popover, .aics-report-actions-popover):not([hidden]) > details > form > :where(a, button) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

html body :where(.actions-popover, .aics-report-actions-popover):not([hidden]) > form,
html body :where(.actions-popover, .aics-report-actions-popover):not([hidden]) > details,
html body :where(.actions-popover, .aics-report-actions-popover):not([hidden]) > details > form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}