/* ==========================================================================
   ORGANISMS / modal / modal.css
   --------------------------------------------------------------------------
   HTML PATTERN:
     <!-- Trigger -->
     <button class="btn btn-primary" data-modal-open="modal-contoh">Buka Modal</button>

     <!-- Modal -->
     <div class="modal-overlay" id="modal-contoh" role="dialog"
          aria-modal="true" aria-labelledby="modal-contoh-title" hidden>
       <div class="modal">
         <div class="modal-header">
           <h2 class="modal-title" id="modal-contoh-title">Judul Modal</h2>
           <button class="modal-close" aria-label="Tutup modal" data-modal-close>
             <!-- svg X -->
           </button>
         </div>
         <div class="modal-body">
           <p>Konten modal di sini.</p>
         </div>
         <div class="modal-footer">
           <button class="btn btn-secondary" data-modal-close>Batal</button>
           <button class="btn btn-primary">Konfirmasi</button>
         </div>
       </div>
     </div>
   ========================================================================== */

/* Overlay / backdrop */
.modal-overlay {
  position:         fixed;
  inset:            0;
  z-index:          var(--z-modal);
  background-color: var(--color-bg-overlay);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          var(--size-400);
  animation:        ds-fade-in var(--duration-normal) var(--ease-default) both;
  overflow-y:       auto;
}

/* Dialog box */
.modal {
  position:         relative;
  background-color: var(--color-bg-surface);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-2xl);
  box-shadow:       var(--shadow-2xl);
  width:            100%;
  max-width:        560px;   /* default md */
  max-height:       calc(100dvh - var(--size-800));
  display:          flex;
  flex-direction:   column;
  animation:        ds-scale-in var(--duration-moderate) var(--ease-spring) both;
}

/* Sizes */
.modal-sm  { max-width: 400px; }
.modal-lg  { max-width: 720px; }
.modal-xl  { max-width: 960px; }
.modal-full {
  max-width:  none;
  width:      calc(100vw - var(--size-800));
  max-height: calc(100dvh - var(--size-800));
}

/* Header */
.modal-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--size-400);
  padding:         var(--size-600) var(--size-600) var(--size-400);
  flex-shrink:     0;
}

.modal-title {
  font-size:   var(--text-heading-sm-size);
  font-weight: var(--text-heading-sm-weight);
  color:       var(--color-text-primary);
  margin:      0;
  line-height: var(--leading-snug);
}

.modal-subtitle {
  font-size:  var(--text-body-sm-size);
  color:      var(--color-text-secondary);
  margin:     var(--size-100) 0 0;
}

.modal-close {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  background:      none;
  border:          none;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  color:           var(--color-text-secondary);
  padding:         0;
  transition:      var(--transition-base);
  margin-top:      -2px;
}
.modal-close:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); }
.modal-close:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* Body */
.modal-body {
  flex:        1;
  overflow-y:  auto;
  padding:     var(--size-200) var(--size-600) var(--size-600);
}

.modal-body::-webkit-scrollbar       { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }

/* Footer */
.modal-footer {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--size-300);
  padding:         var(--size-400) var(--size-600) var(--size-600);
  border-top:      1px solid var(--color-border-default);
  flex-shrink:     0;
  flex-wrap:       wrap;
}

.modal-footer-start { margin-right: auto; }

/* Divider between header and body (opsional) */
.modal-header + .modal-body { padding-top: 0; }
.modal-header-divider { border-bottom: 1px solid var(--color-border-default); }

/* Closing animation */
.modal-overlay.is-closing {
  animation: ds-fade-out var(--duration-normal) var(--ease-in) both;
}
.modal-overlay.is-closing .modal {
  animation: ds-fade-out var(--duration-fast) var(--ease-in) both;
}

/* Mobile: full screen */
@media (max-width: 479px) {
  .modal-overlay {
    align-items: flex-end;
    padding:     0;
  }
  .modal {
    max-width:     100%;
    max-height:    92dvh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    animation:     ds-slide-up var(--duration-moderate) var(--ease-spring) both;
  }
}