/* Shph 2.0.3 - interaction, accessibility, and responsive finishing layer */

html {
  scrollbar-gutter: stable;
}

/* Keep popovers and menus usable when a card is otherwise visually clipped. */
:where(.public-page, .page-body) .card:has(.dropdown-menu),
:where(.public-page, .page-body) .card:has(.popover),
:where(.public-page, .page-body) .card:has(.tooltip) {
  overflow: visible;
}

/* Long labels, filenames, URLs, and status text must never force page overflow. */
:where(.public-page, .page-body) :is(.card, .modal-content, .alert, .dropdown-menu, td, th) {
  min-width: 0;
}
:where(.public-page, .page-body) :is(code, pre, .form-text, .text-muted, .shph-code) {
  overflow-wrap: anywhere;
  word-break: break-word;
}
:where(.public-page, .page-body) pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
}

/* Give browser validation and dynamically repaired labels a clear visual state. */
:where(.public-page, .page-body) :is(.form-control, .form-select)[aria-invalid="true"] {
  border-color: var(--bs-danger, #dc3545);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-danger, #dc3545) 14%, transparent);
}
:where(.public-page, .page-body) [aria-busy="true"] {
  cursor: progress;
}

/* Modal content remains reachable on short phones and landscape tablets. */
.modal-dialog {
  margin-top: max(.75rem, env(safe-area-inset-top));
  margin-bottom: max(.75rem, env(safe-area-inset-bottom));
}
.modal-content {
  max-height: calc(100dvh - max(1.5rem, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom))));
  overflow: hidden;
}
.modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-header,
.modal-footer {
  flex: 0 0 auto;
}

/* The persistent desktop admin rail is visible to assistive technology. */
@media (min-width: 992px) {
  .shph-nav-drawer[aria-hidden="true"] {
    visibility: visible !important;
  }
}

@media (max-width: 991.98px) {
  body.shph-sidebar-open {
    overflow: hidden;
    overscroll-behavior: none;
  }
}

@media (min-width: 768px) {
  /* Let an open desktop action menu escape the table scroller and card boundary. */
  .table-responsive:has(.dropdown-menu.show) {
    overflow: visible;
  }
}

@media (max-width: 767.98px) {
  /* Expanding table action menus in-flow avoids clipping inside horizontal scrollers. */
  .table-responsive .dropdown-menu.show {
    position: static !important;
    inset: auto !important;
    width: max-content;
    max-width: min(78vw, 320px);
    margin: .5rem 0 0 auto !important;
    transform: none !important;
    white-space: normal;
  }

  .modal-dialog {
    width: auto;
    margin-inline: .65rem;
  }
  .modal-header,
  .modal-body,
  .modal-footer {
    padding-inline: 1rem;
  }

  :where(.public-page, .page-body) :is(.card-header, .card-footer) > .d-flex,
  :where(.public-page, .page-body) .shph-toolbar {
    min-width: 0;
  }
}

@media (max-width: 479.98px) {
  /* Compact control groups should stay compact even when ordinary actions stack. */
  :where(.public-page, .page-body) :is(.input-group, .btn-group, .dropdown, .modal-header, .header-actions) > .btn,
  :where(.public-page, .page-body) .modal-header .btn-close {
    width: auto;
  }

  .modal-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
  }
  .modal-footer > :is(.btn, form),
  .modal-footer > form > .btn {
    width: 100%;
    margin: 0;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
  }
  .shph-page-masthead,
  :where(.public-page, .page-body) .card {
    border: 1px solid CanvasText;
  }
}