/* ==========================================================================
   XENTRA PRESENTATION SHELLS v1
   Container only. Feature content stays presentation-agnostic.
   ========================================================================== */

#x-presentation-root {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
}

#x-presentation-root[data-open="true"] {
  pointer-events: auto;
}

.x-presentation-shell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.x-presentation-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(15, 23, 42, .48);
  cursor: default;
}

.x-presentation-surface {
  position: relative;
  z-index: 1;
  width: min(540px, calc(100vw - 32px));
  max-height: min(90dvh, calc(100vh - 32px));
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .22);
  overscroll-behavior: contain;
}

.x-presentation-surface > [hidden] {
  display: block !important;
}

/* Bottom sheet disusun sebagai kolom: baris tombol tutup di atas, sheet menempel
   di bawah. Gutter sheet didefinisikan di sini supaya surface dan bar-nya sama. */
.x-presentation-bottom-sheet {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  --x-sheet-gutter: 16px;
}

.x-presentation-bottom-sheet .x-presentation-surface {
  width: min(640px, 100vw);
  max-height: min(90dvh, 800px);
  border-radius: 24px 24px 0 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.2);
  animation: x-presentation-sheet-in .26s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.x-presentation-bottom-sheet .x-presentation-surface::before {
  content: "";
  display: block;
  width: 42px;
  height: 5px;
  margin: 10px auto 4px;
  border-radius: 999px;
  background: #cbd5e1;
  flex-shrink: 0;
}

/* Ensure children such as legacy cards stretch seamlessly inside bottom-sheet */
.x-presentation-bottom-sheet .x-presentation-surface > .x-modal-card {
  max-width: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  max-height: 100% !important;
}

.x-presentation-bottom-sheet .x-presentation-surface > .x-modal-card > .x-form,
.x-presentation-bottom-sheet .x-presentation-surface > .x-modal-card > .x-modal-scroll-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Bottom sheet body contract --------------------------------------------
   Isi bottom sheet boleh berupa markup modal legacy (header + isi + footer).
   Di modal legacy casing-nya .x-modal-card, dan dari sana gutter blok isi
   datang (`.x-modal-card .x-form`). Di shell casing-nya .x-presentation-surface,
   jadi kontrak layout yang sama disediakan di sini — feature context tetap
   hanya mengurus isi, bukan gutter.

   Konten yang SUDAH berupa .x-modal-card dikecualikan supaya gutter-nya tidak
   dobel. Gutter dipasang pada blok isi (bukan pada <form>), karena footer ikut
   berada di dalam <form> dan harus tetap selebar sheet dengan gutter sendiri.
   -------------------------------------------------------------------------- */

/* Blok isi: label, input, dan helper text tidak menempel ke sisi sheet. */
.x-presentation-surface > :not(.x-modal-card) > .x-form > :not(.x-modal-footer),
.x-presentation-surface > :not(.x-modal-card) > .x-modal-scroll-body > * {
  padding-left: var(--x-sheet-gutter, 20px);
  padding-right: var(--x-sheet-gutter, 20px);
}

/* Header & footer memakai gutter yang sama dengan blok isi. Header legacy sudah
   16px di mobile, tetapi footer legacy masih 20px — disamakan di sini. */
.x-presentation-surface > :not(.x-modal-card) > .x-modal-header,
.x-presentation-surface > :not(.x-modal-card) > .x-modal-footer,
.x-presentation-surface > :not(.x-modal-card) > .x-form > .x-modal-footer {
  padding-left: var(--x-sheet-gutter, 20px);
  padding-right: var(--x-sheet-gutter, 20px);
}

/* Konten master-inline (quick-create Product/Menu/Category/Sub Category/Rasa dan
   sheet input lain) memakai gutter sheet yang sama dengan header/footer. Tanpa
   ini isinya menempel ke sisi sheet, dan action bar sticky-nya (yang memakai
   margin -16px untuk melebar penuh) justru keluar dari sheet di mobile. */
.x-presentation-surface > :not(.x-modal-card) > .x-master-inline-sheet-content {
  padding-left: var(--x-sheet-gutter, 20px);
  padding-right: var(--x-sheet-gutter, 20px);
}

/* Blok judul header dibiarkan menyusut supaya judul panjang tidak meluber. */
.x-presentation-surface > :not(.x-modal-card) > .x-modal-header > div {
  min-width: 0;
}

/* Tombol tutup bottom sheet tinggal di casing (bukan di dalam surface), di atas
   sheet, dan memakai animasi naik/turun yang sama dengan sheet-nya. */
.x-presentation-sheet-bar {
  position: relative;
  z-index: 1;
  width: min(640px, 100vw);
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--x-sheet-gutter, 20px) 10px;
}

.x-presentation-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: #334155;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .2);
  animation: x-presentation-sheet-in .18s ease-out;
  -webkit-tap-highlight-color: transparent;
}

.x-presentation-sheet-close:hover { background: #f1f5f9; }
.x-presentation-sheet-close:active { transform: scale(.96); }
.x-presentation-sheet-close:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }

/* Tombol tutup asli di header disembunyikan: sudah dipindah ke casing. */
.x-presentation-close-relocated .x-modal-close {
  display: none;
}

/* Sisakan ruang untuk baris tombol tutup supaya tidak terpotong di layar pendek. */
.x-presentation-bottom-sheet:has(> .x-presentation-sheet-bar) .x-presentation-surface {
  max-height: min(calc(86dvh - 56px), 704px);
}

@media (max-width: 768px) {
  /* Ritme native di layar kecil: jarak header → isi → footer dirapatkan. */
  .x-presentation-surface > :not(.x-modal-card) > .x-form {
    margin-top: 16px;
    gap: 16px;
  }
}

.x-presentation-dialog .x-presentation-surface {
  width: min(420px, calc(100vw - 32px));
}

@keyframes x-presentation-sheet-in {
  from { transform: translateY(100%); opacity: 0.95; }
  to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 769px) {
  /* Tablet/desktop: gutter 20px, sama dengan padding header/footer legacy. */
  .x-presentation-bottom-sheet {
    --x-sheet-gutter: 20px;
  }

  .x-presentation-bottom-sheet .x-presentation-surface {
    width: min(560px, calc(100vw - 48px));
    max-height: min(760px, calc(100vh - 48px));
    border-radius: 18px;
  }

  .x-presentation-sheet-bar {
    width: min(560px, calc(100vw - 48px));
  }

  .x-presentation-bottom-sheet:has(> .x-presentation-sheet-bar) .x-presentation-surface {
    max-height: min(704px, calc(100vh - 104px));
  }
}

.x-presentation-confirm-content { padding: 20px; }
.x-presentation-confirm-header h3 { margin: 0 0 6px; font-size: 17px; }
.x-presentation-confirm-header p { margin: 0; color: #64748b; line-height: 1.5; font-size: 13px; }
.x-presentation-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.x-presentation-confirm-actions button { min-height: 42px; }


/* Focused Page composition for complex feature contexts that originated from legacy modal markup. */
.x-feature-page-surface {
  margin: 0;
  box-sizing: border-box;
  overflow: visible !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .x-feature-page-surface {
    border-radius: 0 !important;
    width: 100% !important;
  }
}