/**
 * Fluid Framework - Modal/Dialog Component
 * @layer components
 *
 * Modal dialogs for focused interactions.
 * Built on the native <dialog> element for accessibility.
 * CSS-only backdrop and transitions; JS needed only for open/close.
 *
 * Usage:
 *   <dialog class="modal">
 *     <div class="modal__content">
 *       <header class="modal__header">
 *         <h2 class="modal__title">Title</h2>
 *         <button class="modal__close" aria-label="Close">&times;</button>
 *       </header>
 *       <div class="modal__body">Content here</div>
 *       <footer class="modal__footer">
 *         <button data-variant="ghost">Cancel</button>
 *         <button>Confirm</button>
 *       </footer>
 *     </div>
 *   </dialog>
 *
 * Sizes: data-size="sm|lg|full"
 * Variants: data-variant="centered|drawer-right|drawer-left"
 *
 * JS API:
 *   dialog.showModal()  — open with backdrop
 *   dialog.close()      — close
 */

@layer components {
  /* ========================================
     BASE MODAL (native <dialog>)
     ======================================== */

  .modal {
    /* Reset dialog defaults */
    border: none;
    padding: 0;
    max-inline-size: none;
    max-block-size: none;
    background: transparent;
    color: var(--color-text);
    overflow: visible;

    /* Full viewport overlay */
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: var(--z-modal);

    /* Center the content by default */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);

    /* Closed state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Transition */
    transition:
      opacity var(--duration-normal) var(--ease-fluid),
      visibility var(--duration-normal) var(--ease-fluid);
  }

  /* Open state */
  .modal[open] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Native backdrop */
  .modal::backdrop {
    background: oklch(0% 0 0 / 0.5);
  }


  /* ========================================
     MODAL CONTENT PANEL
     ======================================== */

  .modal__content {
    --_modal-width: min(90vw, 32rem);

    position: relative;
    display: flex;
    flex-direction: column;
    inline-size: var(--_modal-width);
    max-block-size: min(90vh, 40rem);

    background: var(--color-background);
    color: var(--color-text);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-card);
    overflow: hidden;
  }


  /* ========================================
     MODAL SECTIONS
     ======================================== */

  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-block-end: var(--border-width) solid var(--color-border-subtle);
    flex-shrink: 0;
  }

  .modal__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin: 0;
  }

  .modal__close {
    --_btn-bg: transparent;
    --_btn-bg-hover: var(--color-surface);

    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border-radius: var(--radius-control);
    font-size: var(--font-size-xl);
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-fluid),
                background-color var(--duration-fast) var(--ease-fluid);
  }

  .modal__close:hover {
    color: var(--color-text);
    background-color: var(--color-surface);
  }

  .modal__body {
    flex: 1;
    padding: var(--space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-block-start: var(--border-width) solid var(--color-border-subtle);
    flex-shrink: 0;
  }


  /* ========================================
     SIZE VARIANTS
     ======================================== */

  /* Small - alerts, confirmations */
  .modal[data-size="sm"] .modal__content {
    --_modal-width: min(90vw, 24rem);
  }

  /* Large - forms, complex content */
  .modal[data-size="lg"] .modal__content {
    --_modal-width: min(90vw, 48rem);
    max-block-size: min(90vh, 50rem);
  }

  /* Full - immersive experiences */
  .modal[data-size="full"] .modal__content {
    --_modal-width: min(95vw, 72rem);
    max-block-size: 95vh;
  }


  /* ========================================
     DRAWER VARIANTS
     Slide in from edges
     ======================================== */

  /* Right drawer */
  .modal[data-variant="drawer-right"] {
    justify-content: flex-end;
    padding: 0;
  }

  .modal[data-variant="drawer-right"] .modal__content {
    --_modal-width: min(90vw, 28rem);
    max-block-size: 100vh;
    block-size: 100vh;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    transform: translateX(100%);
  }

  .modal[data-variant="drawer-right"][open] .modal__content {
    transform: translateX(0);
  }

  /* Left drawer */
  .modal[data-variant="drawer-left"] {
    justify-content: flex-start;
    padding: 0;
  }

  .modal[data-variant="drawer-left"] .modal__content {
    --_modal-width: min(90vw, 28rem);
    max-block-size: 100vh;
    block-size: 100vh;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    transform: translateX(-100%);
  }

  .modal[data-variant="drawer-left"][open] .modal__content {
    transform: translateX(0);
  }


  /* ========================================
     DESTRUCTIVE CONFIRMATION MODIFIER
     Wider gap in footer, mobile stacking
     ======================================== */

  .modal[data-destructive] .modal__footer {
    gap: var(--space-5);
  }

  @media (max-width: 40rem) {
    .modal[data-destructive] .modal__footer {
      flex-direction: column-reverse;
    }

    .modal[data-destructive] .modal__footer > button {
      inline-size: 100%;
    }
  }



  /* ========================================
     RESPONSIVE
     ======================================== */

  @media (max-width: 40rem) {
    .modal {
      padding: var(--space-3);
      align-items: flex-end;
    }

    .modal__content {
      --_modal-width: 100%;
      max-block-size: 85vh;
      border-radius: var(--radius-card) var(--radius-card) 0 0;
      transform: translateY(100%);
    }

    .modal[open] .modal__content {
      transform: translateY(0);
    }

    /* Drawers become bottom sheet on mobile */
    .modal[data-variant="drawer-right"],
    .modal[data-variant="drawer-left"] {
      justify-content: center;
      align-items: flex-end;
      padding: 0;
    }

    .modal[data-variant="drawer-right"] .modal__content,
    .modal[data-variant="drawer-left"] .modal__content {
      block-size: auto;
      max-block-size: 85vh;
      border-radius: var(--radius-card) var(--radius-card) 0 0;
      transform: translateY(100%);
    }

    .modal[data-variant="drawer-right"][open] .modal__content,
    .modal[data-variant="drawer-left"][open] .modal__content {
      transform: translateY(0);
    }
  }


  /* ========================================
     REDUCED MOTION
     ======================================== */

  @media (prefers-reduced-motion: reduce) {
    .modal__content { transform: none; }

    .modal[open] .modal__content {
      transform: none;
    }
  }
}