/* XENTRA OWNER DASHBOARD — CATALOG, CATEGORIES & EDITOR MODULE CSS */
/* ==========================================================================
   OWNER MASTER REFERENCE — TAB + MOBILE CARD LIST
   ========================================================================== */
/* Tab Kategori/Rasa dan isinya adalah satu kesatuan, jadi keduanya dibingkai sebagai
   SATU kartu: tab menjadi bagian atas (tanpa garis bawah, sudut atas membulat), panel
   isinya menjadi bagian bawah (tanpa garis atas, sudut bawah membulat). Sambungannya
   tidak terlihat karena kedua bagian memakai latar dan garis yang sama. */
.x-master-reference-tabs{
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  margin-top: 14px;
  margin-bottom: 12px;   /* jeda antara bagian atas dan bawah */
}
.x-master-reference-panel{
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  margin-top: 0;
}

/* Tab Item memakai komponen kartu yang sama dengan tab master (ikon + nama +
   status + toggle aktif/nonaktif + menu aksi). Pengelolaan SKU ada di halaman
   edit item, jadi tidak ada baris SKU di sini. */
.x-master-reference-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.x-master-reference-toolbar > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.x-master-reference-toolbar strong{
  font-size:15px;
  color:#0f172a;
}
.x-master-reference-toolbar .text-muted{
  font-size:12px;
}
.x-master-reference-card-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.x-master-reference-card{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 14px 12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.x-master-item-card-clickable{
  cursor:pointer;
}
.x-master-reference-card:hover{
  border-color:#d1d5db;
  box-shadow:0 6px 18px rgba(15,23,42,.07);
  transform:translateY(-1px);
}
.x-master-item-card-clickable:active{
  transform:scale(0.995);
}
.x-master-reference-card-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
}
.x-master-reference-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.x-master-reference-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
.x-master-reference-icon-category{
  background:#f3f0ff;
  color:#6d28d9;
}
.x-master-reference-icon-flavor{
  background:#fff7ed;
  color:#ea580c;
}
.x-master-reference-icon-complement{
  background:#eff6ff;
  color:#2563eb;
}
.x-master-reference-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.x-master-reference-copy strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  color:#0f172a;
}
.x-master-reference-copy span{
  font-size:11px;
  color:#94a3b8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.x-master-reference-copy span.x-master-category-menu-list{
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
  line-height:1.4;
}
.x-cat-menu-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.x-cat-menu-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.x-cat-menu-card-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.x-cat-menu-card-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #0f172a;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
}
.x-cat-menu-card-delete {
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #fee2e2;
  border-radius: 8px;
  background: #ffffff;
  color: #ef4444;
  cursor: pointer;
  transition: all .15s ease;
}
.x-cat-menu-card-delete:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}
.x-master-reference-card-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.x-master-reference-status{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
}
.x-master-reference-status.is-active{
  background:#ecfdf5;
  color:#15803d;
}
.x-master-reference-status.is-inactive{
  background:#f1f5f9;
  color:#64748b;
}
@media(max-width:768px){
  .x-master-reference-card-list{
    grid-template-columns:1fr;
  }
  .x-master-reference-toolbar{
    align-items:flex-start;
  }
  .x-master-reference-card{
    padding:13px 12px;
  }
  .x-master-reference-status{
    display:none;
  }
}


/* ==========================================================================
   MASTER PRODUCT EDITOR PAGE — RESPONSIVE
   The editor is a normal page inside the Catalog Products tab, never an overlay.
   ========================================================================== */
.x-product-editor-breadcrumb-row {
  min-width: 0;
}
.x-product-editor-breadcrumb-row > #prod-editor-breadcrumb {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  #product-editor-view.x-card-panel,
  #category-editor-view.x-card-panel {
    padding: 16px;
    padding-bottom: 5px !important;
  }

  #product-editor-view > .x-card,
  #category-editor-view > .x-card,
  #product-editor-view .x-product-editor-main-card,
  #category-editor-view .x-product-editor-main-card {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 16px !important;
    margin: 0 !important;
  }

  #product-editor-view .x-product-editor-breadcrumb-row,
  #category-editor-view .x-product-editor-breadcrumb-row {
    flex-wrap: wrap;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  #product-editor-view .x-form-row,
  #category-editor-view .x-form-row {
    grid-template-columns: 1fr !important;
  }

  #product-editor-view .x-image-upload-control,
  #category-editor-view .x-image-upload-control {
    width: 100%;
    box-sizing: border-box;
  }

  /* Dynamic POS option editors use inline grids; collapse them on phones so
     the first text field never gets squeezed into an unusable sliver. */
  #category-editor-view .x-product-editor-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #category-editor-view .x-product-editor-actions button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Item Editor Actions (2 Rows: Row 1 = [ Batal ] [ Hapus ], Row 2 = Full-Width [ Simpan ] #00A637) */
  #product-editor-view .x-product-editor-actions,
  #product-editor-view .x-item-editor-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 20px !important;
    margin-bottom: 5px !important;
  }

  #product-editor-view .x-item-editor-actions-row1 {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #product-editor-view .x-item-editor-actions-row1 button,
  #product-editor-view .x-item-editor-actions-row1 #btn-cancel-product-editor,
  #product-editor-view .x-item-editor-actions-row1 #btn-delete-item-editor {
    flex: 1 1 0 !important;
    width: 50% !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  #product-editor-view #btn-save-product-editor {
    width: 100% !important;
    flex: none !important;
    height: 46px !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #00A637;
  }
}

@media (max-width: 480px) {
  #product-editor-view.x-card-panel,
  #category-editor-view.x-card-panel {
    padding: 12px;
  }

  #product-editor-view > .x-card,
  #category-editor-view > .x-card,
  #product-editor-view .x-product-editor-main-card,
  #category-editor-view .x-product-editor-main-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  #product-editor-view .x-product-editor-breadcrumb-row > #prod-editor-breadcrumb,
  #category-editor-view .x-product-editor-breadcrumb-row > #category-editor-breadcrumb {
    max-width: 100%;
  }
}

/* Product Image Action Buttons in Item Editor (Row: [Pilih/Ganti] [Hapus] [Refresh]) */
.x-prod-image-btn-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

#btn-prod-image-pick {
  height: 40px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

#btn-prod-image-remove {
  height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid #FEE2E2 !important;
  background: #FEF2F2 !important;
  color: #EF4444 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
}

/* Quick Add Round Button in Item Master filter row (Item Master mockup) */
.x-btn-round-add {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0 !important;
  transition: transform 0.12s ease, background-color 0.12s ease !important;
}

.x-btn-round-add:hover {
  background: #1E293B !important;
  transform: scale(1.05);
}

.x-btn-round-add:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  #product-list-view .x-master-products-head {
    margin-bottom: 18px !important;
  }
  #product-list-view .x-master-products-head .x-header-buttons {
    display: none !important;
  }
  #product-list-view .x-master-products-search-wrap {
    margin-top: 18px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
  }
  #master-products-card-panel.x-master-reference-panel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 16px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #master-products-card-panel .x-category-control-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  /* On mobile, ONLY show the mobile cards container; hide desktop table */
  #product-list-view .x-table-responsive {
    display: none !important;
  }
  #master-products-cards-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  #master-products-cards-container .x-master-reference-card,
  #master-products-cards-container .x-hub-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }
  #master-products-cards-container .x-master-reference-card:hover,
  #master-products-cards-container .x-master-reference-card:active,
  #master-products-cards-container .x-hub-card:hover,
  #master-products-cards-container .x-hub-card:active {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
  }
  #master-products-cards-container .x-master-reference-card-main {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  #master-products-cards-container .x-master-reference-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }
  #master-products-cards-container .x-master-reference-icon img,
  #master-products-cards-container .x-master-reference-icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
  }
}

@media (min-width: 769px) {
  /* On desktop, hide mobile cards; show desktop table */
  #master-products-cards-container {
    display: none !important;
  }
  #product-list-view .x-table-responsive {
    display: block !important;
  }
}

/* Post-Save Item Prompt Modal (Frame 240.png) - Hidden by default */
.x-modal-item-saved {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.x-modal-item-saved.open,
.x-modal-item-saved.active {
  display: flex !important;
}

.x-modal-item-saved-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 340px !important;
  padding: 24px !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
  animation: xFadeScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes xFadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}