/* Shared accessibility layer for managed Admin and Petugas pages. */
:root {
  --ui-a11y-focus: #0b63ce;
  --ui-a11y-focus-offset: 3px;
}

.ui-sr-only,
.ui-table-caption {
  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;
  white-space: nowrap !important;
  border: 0 !important;
}

.ui-skip-link {
  position: fixed;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
  z-index: 2147483647;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #0f3f75;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .28);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  transform: translateY(calc(-100% - 20px));
  transition: transform .15s ease;
}

.ui-skip-link:focus,
.ui-skip-link:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
  transform: translateY(0);
}

body:is(.ui-managed-page,.ui-accessibility-page) :where(
  a[href],
  button,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"]),
  [role="button"],
  [role="tab"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"]
):focus-visible {
  outline: 3px solid var(--ui-a11y-focus) !important;
  outline-offset: var(--ui-a11y-focus-offset) !important;
  box-shadow: 0 0 0 5px rgba(11, 99, 206, .18) !important;
}

body:is(.ui-managed-page,.ui-accessibility-page) :where(input, select, textarea, .ui-control, .ui-form-control):focus-visible {
  border-color: var(--ui-a11y-focus) !important;
}

body:is(.ui-managed-page,.ui-accessibility-page) :where([aria-invalid="true"], .ui-control--invalid) {
  border-color: #b42318 !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .16) !important;
}

body:is(.ui-managed-page,.ui-accessibility-page) :where([aria-disabled="true"], [disabled]) {
  cursor: not-allowed;
}

body:is(.ui-managed-page,.ui-accessibility-page) [role="button"]:not(button):not(a) {
  cursor: pointer;
}

body:is(.ui-managed-page,.ui-accessibility-page) :where(.alert-danger, .alert-error, .flash-error, .error-message) {
  border-left: 4px solid #b42318 !important;
}

body:is(.ui-managed-page,.ui-accessibility-page) :where(.alert-success, .flash-success, .success-message) {
  border-left: 4px solid #18794e !important;
}

body:is(.ui-managed-page,.ui-accessibility-page) :where(.alert-warning, .flash-warning, .warning-message) {
  border-left: 4px solid #9a6700 !important;
}

body:is(.ui-managed-page,.ui-accessibility-page).ui-a11y-dialog-open {
  overflow: hidden !important;
}

body:is(.ui-managed-page,.ui-accessibility-page) :where(
  .custom-modal[aria-hidden="false"],
  .modal[aria-hidden="false"],
  .lz-modal-overlay[aria-hidden="false"]
) {
  overscroll-behavior: contain;
}

body:is(.ui-managed-page,.ui-accessibility-page) :where(table) caption.ui-table-caption:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 8px !important;
  clip: auto !important;
  white-space: normal !important;
}

@media (forced-colors: active) {
  .ui-skip-link,
  body:is(.ui-managed-page,.ui-accessibility-page) :where(a[href], button, input, select, textarea, [tabindex]):focus-visible {
    border: 2px solid ButtonText !important;
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }

  body:is(.ui-managed-page,.ui-accessibility-page) :where(.badge, .chip, .pill, .status-badge, .petugas-status, .petugas-history-status) {
    border: 1px solid ButtonText !important;
  }
}

@media (prefers-contrast: more) {
  body:is(.ui-managed-page,.ui-accessibility-page) {
    --ui-muted: #435267;
    --text-light: #526173;
    --ui-border: #9aa8b8;
    --ui-border-strong: #718096;
  }

  body:is(.ui-managed-page,.ui-accessibility-page) :where(.ui-panel, .card, .panel, .data-table-card, .table-card) {
    border-width: 2px !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body:is(.ui-managed-page,.ui-accessibility-page) :where(
    .top-bar,
    .topbar,
    .ui-page-header,
    .sidebar-overlay,
    .modal,
    .custom-modal,
    .simple-faq__panel
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-skip-link {
    transition: none;
  }
}

@media print {
  .ui-skip-link,
  .ui-a11y-announcer {
    display: none !important;
  }
}