@layer components {
  /* Detail drawer — slide-in overlay panel for row detail view. */

  html.app-detail-drawer-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .app-detail-drawer {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
  }

  .app-detail-drawer[hidden] {
    display: none;
  }

  .app-detail-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.3);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: auto;
  }

  .app-detail-drawer.is-open .app-detail-drawer-backdrop {
    opacity: 1;
  }

  .app-detail-drawer-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(720px, 100vw);
    height: 100%;
    background: var(--app-card-background-color, #fff);
    border-left: 1px solid var(--app-muted-border-color, rgba(148, 163, 184, 0.35));
    box-shadow: -12px 0 30px rgba(15, 23, 42, 0.18);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    pointer-events: auto;
    outline: none;
  }

  .app-detail-drawer.is-open .app-detail-drawer-panel {
    transform: translateX(0);
  }

  .app-detail-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--app-muted-border-color, rgba(148, 163, 184, 0.25));
    background: var(--app-card-background-color, #fff);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .app-detail-drawer-stepper,
  .app-detail-drawer-actions {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
  }

  .app-detail-drawer-stepper[hidden] {
    display: none;
  }

  .app-detail-drawer-header button,
  .app-detail-drawer-header a {
    margin-bottom: 0;
  }

  .app-detail-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem 2rem;
    -webkit-overflow-scrolling: touch;
  }

  .app-detail-drawer-loading,
  .app-detail-drawer-error {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--app-color-muted, #6b7280);
  }

  .app-detail-drawer-error {
    color: var(--app-color-danger, #b91c1c);
  }

  @media (max-width: 900px) {
    .app-detail-drawer-panel {
      width: 100vw;
      border-left: none;
    }
  }

  /* Inside the drawer, force single-column layout for any .app-details-container
     regardless of viewport width (the grid rule in app-details.css triggers on
     viewport ≥968px, which is wrong for a 720px drawer). Any page that uses the
     standard details container gets stacked main + aside automatically. */
  .app-detail-drawer .app-details-container,
  .app-detail-drawer .app-details-container:has(> aside) {
    display: block;
    grid-template-columns: none;
    min-height: 0;
  }

  .app-detail-drawer .app-details-container > section {
    width: 100%;
  }

  .app-detail-drawer .app-details-container > aside {
    border-left: none;
    border-top: 1px solid var(--app-border);
    min-height: 0;
    padding: calc(var(--app-spacing) * 1.5) 0 0;
    margin-top: calc(var(--app-spacing) * 1.5);
  }
}