/* =============================================================================
   A4 - modal, ported from HealthExpress by build/kit/port-css.py.

   Structure unchanged. Applied: 0 colour literal(s) -> on-accent, 3 rgb-channel
   tint(s) -> colour-mix, 0 hand-authored dark override(s) removed, 0 silent
   literal fallback(s) dropped, 1 black shadow(s) re-based on --ink,
   0 decorative glow(s) removed from bordered controls.

   No Bootstrap: these rules were already token-driven. Only the markup was ever
   coupled to it.
   ========================================================================== */

/* ============================================================================
   HealthExpress Theme - Modal Dialog
   Sizes, centered, fullscreen, animations
   ============================================================================ */

/* Backdrop */
.s-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--s-z-modal-backdrop);
  background-color: var(--s-overlay-bg);
  opacity: 0;
  transition: opacity 0.15s linear;
}

.s-modal-backdrop.show {
  opacity: 1;
}

/* Modal wrapper */
.s-modal {
  position: fixed;
  inset: 0;
  z-index: var(--s-z-modal);
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.s-modal.show {
  display: block;
}

/* Modal dialog */
.s-modal-dialog {
  position: relative;
  inline-size: auto;
  max-inline-size: 500px;
  margin-block: 1.75rem;
  margin-inline: auto;
  pointer-events: none;
  transform: translateY(-1rem);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.15s linear;
}

.s-modal.show .s-modal-dialog {
  transform: translateY(0);
  opacity: 1;
}

/* Modal content */
.s-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  pointer-events: auto;
  background-color: var(--s-card-bg);
  color: var(--s-body-color);
  background-clip: padding-box;
  border: var(--s-border-width) solid transparent;
  border-radius: var(--s-border-radius-lg);
  box-shadow: var(--s-shadow-xl);
  outline: 0;
}

/* Modal header */
.s-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.25rem;
  padding-inline: 1.5rem;
  border-block-end: var(--s-border-width) solid var(--s-border-color);
  border-start-start-radius: var(--s-border-radius-lg);
  border-start-end-radius: var(--s-border-radius-lg);
}

.s-modal-title {
  margin: 0;
  font-size: var(--s-h5-font-size);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-heading-color);
  line-height: var(--s-line-height-tight);
}

.s-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--s-muted-color);
  cursor: pointer;
  border-radius: var(--s-border-radius);
  font-size: 1.25rem;
  line-height: 1;
  transition: var(--s-transition-bg), var(--s-transition-color);
}

.s-modal-close:hover {
  background-color: var(--s-body-color-tint);
  color: var(--s-heading-color);
}

.s-modal-close:focus-visible {
  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
  outline-offset: 2px;
}

/* Modal body */
.s-modal-body {
  position: relative;
  flex: 1 1 auto;
  padding-block: 1.25rem;
  padding-inline: 1.5rem;
}

/* Modal footer */
.s-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-gap-3);
  padding-block: 1.25rem;
  padding-inline: 1.5rem;
  border-block-start: var(--s-border-width) solid var(--s-border-color);
  border-end-start-radius: var(--s-border-radius-lg);
  border-end-end-radius: var(--s-border-radius-lg);
}

/* ---------------------------------------------------------------------------
   Sizes
   --------------------------------------------------------------------------- */

.s-modal-sm .s-modal-dialog {
  max-inline-size: 300px;
}

.s-modal-lg .s-modal-dialog {
  max-inline-size: 800px;
}

.s-modal-xl .s-modal-dialog {
  max-inline-size: 1140px;
}

/* ---------------------------------------------------------------------------
   Centered
   --------------------------------------------------------------------------- */

.s-modal-centered .s-modal-dialog {
  display: flex;
  align-items: center;
  min-block-size: calc(100% - 3.5rem);
}

.s-modal-centered .s-modal-content {
  inline-size: 100%;
}

/* ---------------------------------------------------------------------------
   Fullscreen
   --------------------------------------------------------------------------- */

.s-modal-fullscreen .s-modal-dialog {
  max-inline-size: 100%;
  inline-size: 100%;
  margin: 0;
  block-size: 100%;
}

.s-modal-fullscreen .s-modal-content {
  block-size: 100%;
  border: 0;
  border-radius: 0;
}

.s-modal-fullscreen .s-modal-body {
  overflow-y: auto;
}

/* Responsive fullscreen */
@media (max-width: 575.98px) {
  .s-modal-fullscreen-sm-down .s-modal-dialog {
    max-inline-size: 100%;
    inline-size: 100%;
    margin: 0;
    block-size: 100%;
  }
  .s-modal-fullscreen-sm-down .s-modal-content {
    block-size: 100%;
    border: 0;
    border-radius: 0;
  }
}

@media (max-width: 767.98px) {
  .s-modal-fullscreen-md-down .s-modal-dialog {
    max-inline-size: 100%;
    inline-size: 100%;
    margin: 0;
    block-size: 100%;
  }
  .s-modal-fullscreen-md-down .s-modal-content {
    block-size: 100%;
    border: 0;
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------------------
   Scrollable
   --------------------------------------------------------------------------- */

.s-modal-scrollable .s-modal-dialog {
  max-block-size: calc(100% - 3.5rem);
}

.s-modal-scrollable .s-modal-content {
  overflow: hidden;
}

.s-modal-scrollable .s-modal-body {
  overflow-y: auto;
}

/* ---------------------------------------------------------------------------
   No header / borderless variant
   --------------------------------------------------------------------------- */

.s-modal-borderless .s-modal-header {
  border-block-end: 0;
}

.s-modal-borderless .s-modal-footer {
  border-block-start: 0;
}

/* Body scroll lock when modal is open */
body.s-modal-open {
  overflow: hidden;
  padding-inline-end: var(--s-scrollbar-width, 0);
}

/* ============================================================================
   Dialog (Window-style overlay with action buttons)
   ============================================================================ */

/* Backdrop */
.s-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1059;
  background-color: color-mix(in srgb, var(--ink) 50%, transparent);
  animation: s-dialog-fade-in 0.15s ease-out;
}

/* Dialog wrapper — centered */
.s-dialog {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* Dialog panel */
.s-dialog-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: 480px;
  max-block-size: calc(100vh - 3rem);
  background-color: var(--s-card-bg);
  color: var(--s-body-color);
  border-radius: var(--s-border-radius-lg);
  box-shadow: var(--s-shadow-xl);
  animation: s-dialog-slide-in 0.2s ease-out;
}

/* Sizes */
.s-dialog-sm  { max-inline-size: 340px; }
.s-dialog-lg  { max-inline-size: 680px; }
.s-dialog-xl  { max-inline-size: 960px; }

/* Header */
.s-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.875rem;
  padding-inline: 1.25rem;
  border-block-end: var(--s-border-width) solid var(--s-border-color);
  border-start-start-radius: var(--s-border-radius-lg);
  border-start-end-radius: var(--s-border-radius-lg);
  background-color: var(--s-card-bg);
  flex-shrink: 0;
}

.s-dialog-title-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-inline-size: 0;
}

.s-dialog-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.s-dialog-title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--s-font-weight-semibold, 600);
  color: var(--s-heading-color);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action buttons (top-right) */
.s-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.s-dialog-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--s-muted-color);
  cursor: pointer;
  border-radius: var(--s-border-radius);
  font-size: 1.25rem;
  line-height: 1;
  transition: var(--s-transition-bg), var(--s-transition-color);
}

.s-dialog-action-btn:hover {
  background-color: var(--s-body-color-tint);
  color: var(--s-heading-color);
}

.s-dialog-close-btn:hover {
  background-color: var(--s-danger-tint);
  color: var(--s-danger);
}

.s-dialog-action-btn:focus-visible {
  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
  outline-offset: 2px;
}

/* Body */
.s-dialog-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

/* Footer (command buttons) */
.s-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-block: 0.875rem;
  padding-inline: 1.25rem;
  border-block-start: var(--s-border-width) solid var(--s-border-color);
  border-end-start-radius: var(--s-border-radius-lg);
  border-end-end-radius: var(--s-border-radius-lg);
  background-color: var(--s-card-bg);
  flex-shrink: 0;
}

.s-dialog-footer-start  { justify-content: flex-start; }
.s-dialog-footer-center { justify-content: center; }
.s-dialog-footer-stretch { justify-content: stretch; }
.s-dialog-footer-stretch > * { flex: 1; }

/* Theme color header accents */
.s-dialog-primary   .s-dialog-header { border-block-end-color: var(--s-primary); }
.s-dialog-primary   .s-dialog-icon   { color: var(--s-primary); }
.s-dialog-success   .s-dialog-header { border-block-end-color: var(--s-success); }
.s-dialog-success   .s-dialog-icon   { color: var(--s-success); }
.s-dialog-danger    .s-dialog-header { border-block-end-color: var(--s-danger); }
.s-dialog-danger    .s-dialog-icon   { color: var(--s-danger); }
.s-dialog-warning   .s-dialog-header { border-block-end-color: var(--s-warning); }
.s-dialog-warning   .s-dialog-icon   { color: var(--s-warning); }
.s-dialog-info      .s-dialog-header { border-block-end-color: var(--s-info); }
.s-dialog-info      .s-dialog-icon   { color: var(--s-info); }
.s-dialog-secondary .s-dialog-header { border-block-end-color: var(--s-secondary); }
.s-dialog-secondary .s-dialog-icon   { color: var(--s-secondary); }

/* Animations */
@keyframes s-dialog-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes s-dialog-slide-in {
  from {
    opacity: 0;
    transform: translateY(-0.75rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Body scroll lock when dialog is open */
body.s-dialog-open {
  overflow: hidden;
}