/* ==========================================================================
   XENTRA CORE — MERCHANT & OWNER DASHBOARD STYLES
   ========================================================================== */

:root {
  color-scheme: light;
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --bg-app: #0f172a;
  --bg-sidebar: #1e293b;
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --primary-color: #b6ff00;
  --primary-text: #0f172a;
  --accent-blue: #3b82f6;
  --accent-green: #10b981;
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --topbar-height-desktop: 72px;
  --topbar-height-mobile: 68px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);

  /* Typography Scale Standard (Mobile-Native & Desktop Standard) */
  --font-size-display: 26px;
  --font-size-h1: 22px;
  --font-size-h2: 18px;
  --font-size-h3: 16px;
  --font-size-h4: 14.5px;
  --font-size-body: 13.5px;
  --font-size-body-sm: 12.5px;
  --font-size-caption: 11.5px;

  /* Font Weight Standard */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Height Standard */
  --line-height-tight: 1.18;
  --line-height-snug: 1.32;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

input, button, select, textarea, optgroup {
  font-family: inherit;
}

button, a, input, select, textarea, label, summary, [role="button"], [tabindex] {
  -webkit-tap-highlight-color: transparent;
}

/* Remove default browser tap highlight and click focus ring for mouse/touch */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.x-btn:focus:not(:focus-visible),
.x-tab-btn:focus:not(:focus-visible) {
  outline: none;
}

.x-dash-layout,
.x-auth-fullscreen,
#x-merchant-dashboard-app,
#x-merchant-login-app {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   STANDARDIZED TYPOGRAPHY (H1, H2, H3, H4, P, SMALL, STRONG)
   Consistent font-size, font-weight, and line-height across all merchant views.
   ========================================================================== */

h1, .x-h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  color: var(--text-main);
  letter-spacing: -0.025em;
  margin: 0;
}

h2, .x-h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--text-main);
  letter-spacing: -0.015em;
  margin: 0;
}

h3, .x-h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--text-main);
  letter-spacing: -0.01em;
  margin: 0;
}

h4, .x-h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--text-main);
  letter-spacing: -0.005em;
  margin: 0;
}

p, .x-p, .x-body {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--text-main);
  margin: 0;
}

.x-body-sm, .x-caption-text {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.x-text-desc, .x-desc {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  color: var(--text-muted);
}

small, .x-small {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--text-muted);
}

strong, b, .x-strong {
  font-weight: var(--font-weight-bold);
}

/* Weight Utility Classes */
.x-font-regular { font-weight: var(--font-weight-regular) !important; }
.x-font-medium { font-weight: var(--font-weight-medium) !important; }
.x-font-semibold { font-weight: var(--font-weight-semibold) !important; }
.x-font-bold { font-weight: var(--font-weight-bold) !important; }
.x-font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* Layout */
.x-dash-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.x-dash-sidebar {
  width: 260px;
  height: 100vh;
  position: sticky;
  top: 0;
  background-color: var(--bg-sidebar);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-sizing: border-box;
}

.x-dash-xentra-brand {
  padding: 14px 16px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.x-dash-xentra-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: invert(1) brightness(1.2);
}

.x-dash-brand-header {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.x-dash-logo-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.x-dash-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.x-dash-brand-info h2 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}

.x-dash-badge-pro {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 2px;
}

/* Navigation Links */
.x-dash-nav {
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.x-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  color: #94a3b8;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  width: 100%;
  text-align: left;
  flex-shrink: 0;
}

.x-nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.x-nav-item.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 700;
}

.x-nav-item.active svg {
  stroke: var(--primary-color);
}

.x-dash-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.x-btn-view-store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.2s;
}

.x-btn-view-store:hover {
  background: var(--primary-color);
  color: var(--primary-text);
}

/* Main Content */
.x-dash-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: #f8fafc;
}

/* Topbar */
.x-dash-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  min-height: var(--topbar-height-desktop);
  box-sizing: border-box;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.x-topbar-left h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
}

.x-topbar-left p {
  font-size: 13px;
  color: var(--text-muted);
}

.x-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.x-live-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-green);
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
}

.x-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
}

.x-admin-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.x-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1e293b;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

.x-user-meta {
  display: flex;
  flex-direction: column;
}

.x-user-meta span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.x-user-role {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.x-btn-logout {
  background: #fee2e2;
  color: #dc2626;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.2s;
}

.x-btn-logout:hover {
  background: #fca5a5;
}

/* Tab Contents
   Outer .x-tab-content sections must NEVER apply transform or animation:
   1. Any transform on an ancestor traps position:fixed children/portals.
   2. Competing vertical fadeIn on outer sections clashes with directional horizontal slide transitions on inner page shells. */
.x-tab-content {
  display: none;
  padding: 32px;
  animation: none;
  transform: none;
}

.x-tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Metric Cards */
.x-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.x-metric-card {
  background: var(--bg-card);
  padding: 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 16px;
}

.x-metric-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-metric-icon.bg-green { background: #ecfdf5; color: #10b981; }
.x-metric-icon.bg-blue { background: #eff6ff; color: #3b82f6; }
.x-metric-icon.bg-amber { background: #fffbeb; color: #f59e0b; }

.x-metric-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.x-metric-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
}

/* Panels */
/* Tanda wajib pada label form. Kategori Master adalah komposisi wajib;
   Rasa bersifat opsional dan tidak lagi memakai tanda wajib. */
.x-required-mark {
  color: #dc2626;
  font-weight: 700;
  margin-left: 3px;
}

.x-card-panel {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

/* Judul, deskripsi, dan CTA Produk Master TIDAK dibungkus kartu — mereka mengalir
   langsung. Kelas .x-card tidak punya definisi apa pun, jadi tidak ada gaya yang perlu
   dibatalkan di sini. */

.x-panel-header h3 {
  font-size: 18px;
  font-weight: 700;
}

.x-panel-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.x-panel-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.x-header-buttons {
  display: flex;
  gap: 10px;
}

.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }

/* Quick Actions Grid */
.x-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.x-quick-btn {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.x-quick-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-2px);
}

.x-quick-btn span {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.x-quick-btn small {
  font-size: 12px;
  color: var(--text-muted);
}

/* Brand Split Grid */
.x-brand-split-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}

/* Forms */
.x-form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.x-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Atribut `hidden` bawaan browser memakai display:none, tetapi kalah oleh aturan kelas
   seperti .x-form-group { display: flex } karena spesifisitasnya lebih rendah. Akibatnya
   elemen bertanda hidden tetap terlihat. Aturan ini mengembalikan artinya. */
[hidden] {
  display: none !important;
}

.x-form-group label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.x-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: #ffffff;
  color: var(--text-main);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.x-input:focus {
  /* Fokus tanpa kilau biru. Kolomnya tetap terlihat sedang aktif dari warnanya yang
     sedikit lebih gelap, jadi penanda fokusnya tidak hilang sama sekali. */
  outline: none;
  border-color: #94a3b8;
  box-shadow: none;
}

.x-input-with-action {
  display: flex;
  gap: 10px;
}

.x-help {
  font-size: 12px;
  color: var(--text-muted);
}

.x-color-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.x-color-input {
  -webkit-appearance: none;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  background: none;
}

.x-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.x-color-input::-webkit-color-swatch {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
}

.x-hex-input {
  width: 140px;
  font-family: monospace;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.x-color-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.x-swatch-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.x-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px var(--border-color);
  cursor: pointer;
  transition: transform 0.15s;
}

.x-swatch:hover {
  transform: scale(1.15);
}

.x-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.x-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0f172a;
}

/* Buttons */
.x-btn-primary {
  background: #0f172a;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.x-btn-primary:hover {
  background: #1e293b;
  box-shadow: var(--shadow-sm);
}

.x-btn-secondary {
  background: #f1f5f9;
  color: #334155;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.x-btn-secondary:hover {
  background: #e2e8f0;
}

/* Phone Mockup */
.x-preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.x-phone-mockup {
  width: 300px;
  height: 580px;
  background: #1e293b;
  border-radius: 36px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  margin-top: 16px;
  position: relative;
}

.x-phone-notch {
  width: 100px;
  height: 18px;
  background: #0f172a;
  border-radius: 0 0 12px 12px;
  margin: 0 auto;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.x-phone-screen {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.x-mock-header {
  padding: 34px 16px 14px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.x-mock-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.x-mock-logo {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
}

.x-mock-text strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
}

.x-mock-text span {
  font-size: 11px;
  color: #64748b;
}

.x-mock-categories {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
}

.x-mock-pill {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: #f1f5f9;
  color: #64748b;
}

.x-mock-pill.active {
  background: var(--primary-color);
  color: var(--primary-text);
}

.x-mock-product {
  margin: 10px 16px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.x-mock-prod-info h4 {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.x-mock-prod-info p {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.3;
}

.x-mock-price {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  display: block;
  margin-top: 4px;
}

.x-mock-prod-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.x-mock-img {
  width: 50px;
  height: 50px;
  background: #f8fafc;
  border-radius: 8px;
  background-image: url('https://images.unsplash.com/photo-1598515214211-89d3c73ae83b?w=200');
  background-size: cover;
  background-position: center;
}

.x-mock-add-btn {
  background: var(--primary-color);
  color: var(--primary-text);
  border: none;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
}

.x-mock-cart-dock {
  margin-top: auto;
  background: #0f172a;
  color: #ffffff;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.x-mock-dock-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.x-mock-dock-left strong {
  display: block;
  font-size: 11px;
}

.x-mock-dock-left span {
  font-size: 11px;
  color: #94a3b8;
}

.x-mock-cart-cta {
  background: var(--primary-color);
  color: var(--primary-text);
  border: none;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 8px;
}

/* Tables */
.x-table-responsive {
  overflow-x: auto;
}

.x-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.x-table th {
  padding: 12px 14px;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.x-table td {
  padding: 14px;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  vertical-align: middle;
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }

.x-table-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: #f1f5f9;
}

/* Status Badges & Switches */
.x-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.x-badge-success { background: #dcfce7; color: #15803d; }
.x-badge-danger { background: #fee2e2; color: #b91c1c; }
.x-badge-warning { background: #fef3c7; color: #b45309; }
.x-badge-info { background: #e0e7ff; color: #4338ca; }
.x-badge-muted { background: #f1f5f9; color: #64748b; }

.x-btn-danger-outline {
  background: transparent;
  color: #ef4444;
  border: 1px solid #fca5a5;
}
.x-btn-danger-outline:hover {
  background: #fee2e2;
  color: #b91c1c;
}

.x-btn-success-outline {
  background: transparent;
  color: #15803d;
  border: 1px solid #86efac;
}
.x-btn-success-outline:hover {
  background: #dcfce7;
  color: #166534;
}

/* Filter Tabs */
.x-catalog-filters {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.x-cat-filter-btn {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  background: #f1f5f9;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.x-cat-filter-btn.active {
  background: #0f172a;
  color: #ffffff;
}

/* Modal & Overlay Architecture */
.x-modal-backdrop,
.x-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  font-family: var(--font-family);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.x-modal-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  max-width: min(520px, calc(100vw - 32px));
  width: 100%;
  max-height: min(90vh, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalPop 0.2s ease forwards;
  font-family: var(--font-family);
  color: var(--text-main);
  box-sizing: border-box;
  margin: auto;
  position: relative;
}

.x-modal-card.x-modal-sm { max-width: min(440px, calc(100vw - 32px)); }
.x-modal-card.x-modal-md { max-width: min(540px, calc(100vw - 32px)); }
.x-modal-card.x-modal-lg { max-width: min(720px, calc(100vw - 32px)) !important; }
.x-modal-card.x-modal-xl { max-width: min(960px, calc(100vw - 32px)) !important; }

.x-modal-card * {
  font-family: inherit;
  box-sizing: border-box;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.x-modal-handle {
  display: none;
}

.x-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: #ffffff;
  box-sizing: border-box;
  width: 100%;
}

.x-modal-header h3 {
  font-size: 17px;
  font-weight: 800;
  font-family: var(--font-family);
  color: var(--text-main);
  margin: 0;
}

.x-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-family);
  padding: 4px 8px;
  border-radius: 4px;
}

.x-modal-close:hover {
  background: #f1f5f9;
  color: var(--text-main);
}

.x-modal-card .x-form,
.x-modal-scroll-body {
  padding: 20px;
  margin-top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.x-modal-card label {
  font-family: var(--font-family);
}

.x-modal-card input,
.x-modal-card select,
.x-modal-card textarea,
.x-modal-card button {
  font-family: var(--font-family);
}

.x-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.x-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  background: #ffffff;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-sizing: border-box;
  width: 100%;
  flex-shrink: 0;
}

/* Normalized File Input & Upload Wrap */
input[type="file"].x-input,
.x-input[type="file"],
.x-file-input {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 12px;
  color: #475569;
  background: #f8fafc;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.x-file-upload-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.x-file-upload-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
}

.x-file-upload-info small,
.x-file-upload-wrap small {
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .x-file-upload-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Branches Grid */
.x-branches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.x-branch-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.x-branch-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.x-branch-card-header h4 {
  font-size: 16px;
  font-weight: 800;
}

/* Toggle switch cabang: hijau = aktif, merah = nonaktif */
.x-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  cursor: pointer;
  flex-shrink: 0;
}
.x-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.x-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ef4444;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.x-toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
}
.x-toggle input:checked + .x-toggle-slider,
.x-toggle.x-toggle-on .x-toggle-slider {
  background: #10b981;
}
.x-toggle input:checked + .x-toggle-slider::before,
.x-toggle.x-toggle-on .x-toggle-slider::before {
  transform: translateX(22px);
}
.x-toggle input:disabled + .x-toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}
.x-toggle input:disabled {
  cursor: not-allowed;
}

.x-branch-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-color);
}

.x-branch-detail-row span:first-child {
  color: var(--text-muted);
}

.x-branch-detail-row span:last-child {
  font-weight: 700;
}

/* ==========================================================================
   OWNER DASHBOARD SHELL — PHASE 0 ADDITIONS
   ========================================================================== */

/* Nav group labels */
.x-nav-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  padding: 12px 14px 4px 14px;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}

.x-nav-group-label:first-child {
  padding-top: 4px;
}

/* Nav item — data-route attribute (new routing system) */
.x-nav-item[data-route] {
  position: relative;
}

/* Catalog parent — chevron toggle */
.x-nav-parent {
  justify-content: flex-start;
}

.x-nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.5;
}

.x-nav-parent[aria-expanded="true"] .x-nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Catalog sub-nav */
.x-nav-sub {
  display: none;
  flex-direction: column;
  padding: 3px 0 4px 42px;
  gap: 3px;
}

.x-nav-sub.open {
  display: flex;
}

.x-nav-sub-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: #94a3b8;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
  position: relative;
}

.x-nav-sub-item::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 10px;
  opacity: 0.4;
  flex-shrink: 0;
}

.x-nav-sub-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.x-nav-sub-item:hover::before {
  opacity: 1;
}

.x-nav-sub-item.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

.x-nav-sub-item.active::before {
  opacity: 1;
  background: var(--primary-color);
}

/* Mobile sidebar close button */
.x-sidebar-close {
  display: none;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
}

.x-sidebar-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile sidebar overlay */
.x-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* Hamburger button (hidden on desktop) */
.x-hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.x-hamburger svg {
  pointer-events: none;
}

.x-hamburger:hover {
  background: #f1f5f9;
}

/* Topbar left — flex for hamburger + title */
.x-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Topbar icon buttons (search, notifications) */
.x-topbar-icon-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.x-topbar-icon-btn:hover {
  background: #f1f5f9;
  color: var(--text-main);
  border-color: #cbd5e1;
}

/* Brand context badge */
.x-topbar-brand-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  flex-shrink: 0;
}

/* Branch context selector */
.x-branch-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid #475569;
  border-radius: 20px;
  padding: 0 12px;
  height: 38px;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
  transition: all 0.15s ease;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

.x-branch-selector:hover {
  border-color: #1e293b;
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.x-branch-pin-icon {
  color: #475569;
  flex-shrink: 0;
}

.x-branch-chevron-icon {
  color: #64748b;
  flex-shrink: 0;
  pointer-events: none;
}

/* Branch context badge (BM locked branch context) */
.x-branch-context-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  flex-shrink: 0;
}

.x-branch-select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  outline: none;
  padding: 0;
  min-width: 100px;
  max-width: 200px;
  appearance: none;
  -webkit-appearance: none;
}

.x-branch-select:focus {
  outline: none;
}

/* Branch inline custom dropdown */
.x-branch-dropdown {
  position: relative;
  cursor: pointer;
}

.x-branch-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  max-width: 160px;
  min-width: 0;
}

.x-branch-current-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.x-branch-selector .x-branch-chevron-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.x-branch-dropdown.open .x-branch-chevron-icon {
  transform: rotate(180deg);
}

.x-branch-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  min-width: 200px;
  max-width: 280px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.14), 0 6px 10px -4px rgba(0, 0, 0, 0.07);
  padding: 6px;
  z-index: 200;
  display: none;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}

.x-branch-dropdown.open .x-branch-dropdown-menu {
  display: flex;
  animation: branchDropdownIn 0.15s ease-out;
}

@keyframes branchDropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.x-branch-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease, color 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x-branch-dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.x-branch-dropdown-item.active {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
}

.x-branch-dropdown-item .x-branch-check-icon {
  opacity: 0;
  flex-shrink: 0;
  color: #334155;
  margin-left: 8px;
}

.x-branch-dropdown-item.active .x-branch-check-icon {
  opacity: 1;
}

/* ==========================================================================
   REUSABLE FLOATING DROPDOWN COMPONENT TEMPLATE (.x-floating-dropdown)
   Standardized floating dropdown language (topbar branch selector, filters, etc.)
   ========================================================================== */
.x-floating-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}

.x-floating-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: var(--radius-sm, 8px);
  padding: 0 12px;
  height: 40px;
  min-height: 40px;
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main, #0f172a);
  cursor: pointer;
  user-select: none;
  outline: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: all 0.15s ease;
  box-sizing: border-box;
  text-align: left;
}

/* Optional pill variant (e.g. for topbar badges/pills) */
.x-floating-dropdown.x-floating-dropdown-pill .x-floating-dropdown-trigger,
.x-floating-dropdown-trigger.x-pill {
  border-radius: 20px;
  padding: 0 14px;
  height: 38px;
  min-height: 38px;
  width: auto;
}

.x-floating-dropdown-trigger:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

.x-floating-dropdown-trigger:focus-visible,
.x-floating-dropdown.open .x-floating-dropdown-trigger,
.x-floating-dropdown-trigger[aria-expanded="true"] {
  background: #ffffff;
  border-color: #334155;
  box-shadow: 0 0 0 2px rgba(51, 65, 85, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
}

.x-floating-dropdown-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.x-floating-dropdown-chevron {
  flex-shrink: 0;
  color: #64748b;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.x-floating-dropdown.open .x-floating-dropdown-chevron,
.x-floating-dropdown-trigger[aria-expanded="true"] .x-floating-dropdown-chevron {
  transform: rotate(180deg);
}

.x-floating-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: 100%;
  max-width: 360px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.14), 0 6px 10px -4px rgba(0, 0, 0, 0.07);
  padding: 6px;
  z-index: 220;
  display: none;
  flex-direction: column;
  gap: 2px;
  max-height: 290px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

.x-floating-dropdown.open .x-floating-dropdown-menu {
  display: flex;
  animation: floatingDropdownIn 0.15s ease-out;
}

@keyframes floatingDropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.x-floating-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
  box-sizing: border-box;
  white-space: nowrap;
}

.x-floating-dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.x-floating-dropdown-item.active {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
}

.x-floating-dropdown-item .x-floating-check-icon {
  opacity: 0;
  flex-shrink: 0;
  color: #0f172a;
  margin-left: 8px;
  transition: opacity 0.12s ease;
}

.x-floating-dropdown-item.active .x-floating-check-icon {
  opacity: 1;
}

.x-floating-dropdown-item.is-disabled,
.x-floating-dropdown-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Route placeholder pages */
.x-route-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  text-align: center;
  gap: 12px;
  min-height: 300px;
}

.x-route-placeholder-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
}

.x-route-placeholder h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.x-route-placeholder p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 400px;
  margin: 0;
  line-height: 1.6;
}


@media (max-width: 900px) {
  .x-brand-split-grid {
    grid-template-columns: 1fr;
  }
  .x-branch-selector {
    display: none;
  }
}

@media (max-width: 1023px) {
  /* Show hamburger on mobile & tablet */
  .x-hamburger {
    display: flex;
  }
  /* Show sidebar close button on mobile & tablet */
  .x-sidebar-close {
    display: flex;
  }

  /* Sidebar becomes a fixed off-canvas drawer on mobile & tablet */
  .x-dash-layout {
    flex-direction: row;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
  }
  .x-dash-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px !important;
    max-width: 85vw !important;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
  }
  .x-dash-sidebar.open {
    transform: translateX(0);
  }
  .x-sidebar-overlay.open {
    display: block;
  }
  .x-dash-xentra-brand {
    padding: 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .x-dash-brand-header {
    padding: 12px 16px;
  }
  .x-dash-brand-info {
    display: block !important;
  }
  body:not(.x-merchant-app) .x-dash-nav {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    padding: 8px 12px !important;
    gap: 2px !important;
  }
  /* Nav group labels */
  body:not(.x-merchant-app) .x-nav-group-label {
    display: block !important;
  }
  body:not(.x-merchant-app) .x-nav-item {
    padding: 10px 14px !important;
    white-space: normal !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    flex-shrink: 0;
  }
  body:not(.x-merchant-app) .x-nav-item span {
    display: inline-block !important;
  }
  .x-dash-footer {
    display: block !important;
  }
  .x-dash-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
  .x-dash-topbar {
    padding: 12px 16px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .x-topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .x-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    cursor: pointer !important;
  }
  .x-topbar-left > div {
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .x-topbar-left h1 {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
  .x-topbar-left p {
    display: none !important;
  }
  .x-topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .x-topbar-icon-btn {
    display: none;
  }
  #btn-notifications.x-topbar-icon-btn,
  #btn-messages.x-topbar-icon-btn {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  .x-admin-profile .x-user-meta {
    display: none;
  }
  .x-topbar-brand-badge {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    padding: 4px 8px;
  }
  .x-topbar-brand-badge span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .x-branch-selector {
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 20px !important;
    max-width: 175px !important;
    font-size: 13.5px !important;
  }
  .x-branch-select {
    max-width: 125px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 0 !important;
  }
  .x-branch-context-badge {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    padding: 4px 8px;
  }
  .x-branch-context-badge span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .x-tab-content {
    padding: 20px 16px;
  }
  .x-metrics-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .x-quick-actions-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .x-phone-mockup {
    max-width: 100%;
    margin: 0 auto;
  }
  .x-panel-header-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .x-header-buttons {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .x-header-buttons button {
    flex: 1;
  }
}

/* =========================================================================
   MERCHANT AUTH FULLSCREEN STYLES

   ========================================================================= */
.x-auth-fullscreen {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, #1e293b 0%, #0f172a 100%);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.x-auth-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  max-width: 440px;
  width: 100%;
  padding: 36px 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.x-auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.x-auth-logo-wrap {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: #f1f5f9;
  margin: 0 auto 12px auto;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-auth-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.x-auth-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
}

.x-auth-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.x-auth-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -6px;
  margin-bottom: 6px;
}

.x-btn-block {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-auth-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  background: #f8fafc;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-color);
  margin-top: 14px;
}

/* Branch Catalog Manager Modal Styles */
.x-modal-lg {
  max-width: 960px !important;
  width: 95% !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.x-modal-scroll-body {
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.x-catalog-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.x-catalog-section-title h4 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.x-badge-lock {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-weight: 700;
  font-size: 11px;
}

.x-badge-range {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  font-weight: 700;
  font-size: 11px;
}

.x-branch-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.x-product-card-simple {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: all 0.2s;
}

.x-product-card-simple:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-sm);
}

.x-product-card-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: #f1f5f9;
  flex-shrink: 0;
}

.x-product-card-content {
  flex: 1;
  min-width: 0;
}

.x-product-card-content h5 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x-product-card-price {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 4px;
}

.x-product-card-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Phase 4: Overview & Reports Styles */
.x-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.x-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.x-date-input {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: #ffffff;
  color: var(--text-main);
}

.x-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 960px) {
  .x-overview-grid {
    grid-template-columns: 1fr;
  }
}

.x-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.x-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.x-data-table th {
  padding: 10px 14px;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-color);
  background: #f8fafc;
  white-space: nowrap;
}

.x-data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  vertical-align: middle;
}

.x-data-table tr:hover td {
  background: #f8fafc;
}

.x-empty-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

.x-empty-state-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.x-subnav-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.x-subnav-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.x-subnav-tab:hover {
  color: var(--text-main);
}

.x-subnav-tab.active {
  color: #0f172a;
  border-bottom-color: #0f172a;
  font-weight: 700;
}

.x-alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: #fffbeb;
  border: 1px solid #fef3c7;
  color: #b45309;
  font-size: 13px;
  margin-bottom: 16px;
}

/* =========================================================================
   SETTINGS LAYOUT & RESPONSIVE FORM RULES
   ========================================================================= */

.settings-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
}

.settings-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-sizing: border-box;
}

.settings-content-panel {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Base table wrapper for horizontal scrolling on narrow screens */
.x-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1023px) {
  .settings-layout {
    flex-direction: column;
    gap: 16px;
  }

  .settings-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px;
  }

  .settings-content-panel {
    width: 100% !important;
  }

  .x-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .x-filter-group {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  /* Settings form multi-column grids become single-column on mobile */
  .settings-content-panel div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Filter date inputs full width or wrap nicely */
  .x-date-input {
    flex: 1 1 auto;
    min-width: 130px;
  }

  /* Cards have comfortable padding on mobile */
  .x-card {
    padding: 16px !important;
  }

  /* Ensure inputs & buttons fit neatly inside cards */
  .x-input, select.x-input {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Mobile Bottom Sheet Architecture for All Modals */
  .x-modal-backdrop,
  .x-modal {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    inset: 0 !important;
  }

  .x-modal-card {
    max-width: min(640px, 100vw) !important;
    width: 100% !important;
    max-height: min(90dvh, calc(100dvh - 20px)) !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin: 0 auto !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.25) !important;
    animation: x-modal-sheet-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  .x-modal-handle {
    display: block !important;
    width: 42px !important;
    height: 5px !important;
    background: #cbd5e1 !important;
    border-radius: 999px !important;
    margin: 6px auto 14px auto !important;
    flex-shrink: 0 !important;
  }

  .x-modal-header {
    padding: 14px 16px !important;
  }

  .x-modal-card .x-form,
  .x-modal-scroll-body {
    padding: 16px !important;
  }

  .x-modal-scroll-body {
    flex: 1 1 auto;
    max-height: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Form row elements stack vertically on narrow screens */
  .x-form-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Unggah foto di dalam modal. Aturan dasarnya flex-wrap: nowrap, jadi di layar sempit
     kotak pratinjau, keterangan, dan tombolnya berdesakan dan tidak bisa turun baris.
     Di sini isinya dibiarkan membungkus. */
  .x-image-upload-control {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .x-image-upload-actions {
    flex-wrap: wrap !important;
  }

  /* Responsive topbar adjustments on tablet/narrow screens */
  .x-dash-topbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .x-topbar-left h1 {
    font-size: 17px;
  }
  .x-topbar-right {
    gap: 8px;
  }
  #topbar-brand-badge {
    display: none !important;
  }
  #x-branch-selector {
    display: none !important;
  }
  .x-live-status {
    padding: 3px 8px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .x-modal-backdrop,
  .x-modal {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .x-modal-card {
    max-width: 100vw !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin: 0 !important;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .x-modal-footer {
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 8px;
  }

  .x-modal-footer button {
    flex: 1 1 100%;
  }

}

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

/* BM Add Catalog Picker Card Styles */
.x-catalog-picker-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-md);
  background: #ffffff;
  gap: 12px;
  transition: all 0.15s ease;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
}

.x-catalog-picker-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.x-catalog-picker-card.is-selected {
  border-color: #059669 !important;
  background: #ecfdf5 !important;
  box-shadow: 0 0 0 1px #059669;
}

.x-catalog-picker-card.is-selected:hover {
  border-color: #047857 !important;
  background: #d1fae5 !important;
}

.x-catalog-picker-card.is-adopted {
  background: #f8fafc;
  border-color: #e2e8f0;
  opacity: 0.82;
  cursor: default;
}

.x-catalog-picker-card.is-adopted:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.x-catalog-picker-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #059669;
}

/* Master Category Filter Pills */
.x-master-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.x-master-cat-pill:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}

.x-master-cat-pill.is-active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
}

.x-master-cat-pill .pill-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

.x-master-cat-pill.is-active .pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Master Product Composition — Owner → Customer PWA preview */
.x-master-composition-preview-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:4px 0 8px;
}
.x-master-composition-preview-head > div {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.x-master-composition-preview-head strong {
  font-size:12px;
  font-weight:800;
  color:#0f172a;
}
.x-master-composition-preview-head span {
  font-size:10px;
  color:#64748b;
}
.x-master-customer-preview {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.x-master-customer-preview-card {
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  padding:11px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.x-master-customer-preview-info {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.x-master-customer-preview-title {
  font-size:14px;
  line-height:19px;
  font-weight:800;
  color:#0f172a;
}
.x-master-customer-preview-subtitle {
  font-size:14px;
  line-height:19px;
  font-weight:800;
  color:#0f172a;
  margin-top:2px;
}
.x-master-customer-preview-detail {
  font-size:11px;
  line-height:16px;
  color:#64748b;
}
.x-master-customer-preview-subtitle:empty,
.x-master-customer-preview-detail:empty,
.x-master-customer-preview-indicator:empty {
  display:none;
}
.x-master-customer-preview-indicator {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  color:#ef4444;
  font-size:10px;
  font-weight:700;
}
.x-master-customer-preview-spice-label {
  flex:0 0 auto;
}
.x-master-customer-preview-spice-dots {
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.x-master-customer-preview-spice-dot {
  width:6px;
  height:6px;
  flex:0 0 6px;
  border:1.25px solid #ef4444;
  border-radius:50%;
  background:transparent;
  box-sizing:border-box;
}
.x-master-customer-preview-spice-dot.is-filled {
  background:#ef4444;
}
.x-spice-selector {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
}
.x-spice-dots-row {
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.x-spice-dot-btn {
  width:24px;
  height:24px;
  border-radius:50%;
  border:2px solid #cbd5e1;
  background:#ffffff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:all 0.15s ease;
}
.x-spice-dot-btn:hover {
  border-color:#ef4444;
  background:#fee2e2;
}
.x-spice-dot-btn.is-active {
  border-color:#ef4444;
  background:#ef4444;
}
.x-spice-dot-btn:focus-visible {
  outline:2px solid #ef4444;
  outline-offset:2px;
}
.x-master-customer-preview-price {
  margin-top:7px;
  font-size:13px;
  line-height:18px;
  font-weight:800;
  color:#0f172a;
}
.x-master-customer-preview-media {
  width:72px;
  height:72px;
  flex:0 0 72px;
  border-radius:9px;
  overflow:hidden;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  font-size:25px;
}
.x-master-customer-preview-media img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.x-master-customer-preview-note {
  margin-top:7px;
  font-size:10px;
  line-height:14px;
  color:#64748b;
}
@media (max-width:480px) {
  .x-master-composition-preview-head {
    align-items:flex-start;
  }
  .x-master-composition-preview-head .x-badge {
    flex:0 0 auto;
  }
  .x-master-customer-preview-card {
    gap:9px;
    padding:9px;
  }
  .x-master-customer-preview-media {
    width:64px;
    height:64px;
    flex-basis:64px;
  }
}

/* Category Checkbox Multi-Select UI Card in Edit Menu */
.x-category-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  box-sizing: border-box;
}

.x-category-chip-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.x-category-chip-card:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

.x-category-chip-card.is-checked {
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.x-category-chip-card .override-cat-checkbox {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: #2563eb;
  margin: 0;
  flex-shrink: 0;
}

.x-category-chip-card span {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .x-catalog-picker-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .x-category-select-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   UNIFIED IMAGE UPLOAD & PREVIEW CONTROLS
   ========================================================================= */
.x-image-upload-control {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  flex-wrap: nowrap;
  box-sizing: border-box;
  width: 100%;
}

.x-image-upload-preview-box {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  border: 1.5px dashed #cbd5e1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.x-image-upload-preview-box.is-banner {
  width: 140px;
  height: 72px;
}

.x-image-upload-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.x-image-upload-empty {
  font-size: 24px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  width: 100%;
  height: 100%;
}

.x-image-upload-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.x-image-upload-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.x-image-specs-text {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.4;
  word-break: break-word;
}

@media (max-width: 480px) {
  .x-image-upload-control {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }
  .x-image-upload-preview-box {
    width: 68px;
    height: 68px;
  }
}

/* =========================================================================
   SAAS POLISH: BRAND PROFILE & SETTINGS ENHANCEMENTS
   ========================================================================= */
.x-brand-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  background: #ffffff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.x-brand-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.x-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.x-field-hint {
  font-size: 11.5px;
  font-weight: 400;
  color: #94a3b8;
}

.x-color-picker-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.x-color-swatches-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: var(--radius-sm);
  border: 1px dashed #e2e8f0;
}

/* Polished Brand Panel Layout */
.x-brand-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}

.x-brand-split-grid .x-card-panel {
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

.x-brand-split-grid .x-panel-header h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.x-brand-split-grid .x-panel-header p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* Button & Upload Control Polish */
.x-image-upload-control {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  transition: border-color 0.2s, background-color 0.2s;
}

.x-image-upload-control:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.x-image-upload-actions .x-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  margin: 0;
  box-sizing: border-box;
}

.x-image-upload-actions label.x-btn-secondary {
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.x-image-upload-actions .x-btn-secondary:hover:not(:disabled),
.x-image-upload-actions label.x-btn-secondary:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.x-image-upload-actions .x-btn-secondary:active,
.x-image-upload-actions label.x-btn-secondary:active {
  transform: translateY(0);
}

.x-image-upload-actions .x-btn-secondary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.x-file-input-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}

/* Phone Mockup Saas Polish */
.x-phone-mockup {
  margin: 12px auto 0 auto;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.25);
  border: 4px solid #0f172a;
}

/* ==========================================================================
   OWNER MASTER REFERENCE — CATEGORY + FLAVOR
   ========================================================================== */
.x-master-reference-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.x-master-reference-card{
  border:1px solid var(--border-color,#e2e8f0);
  border-radius:14px;
  background:#fff;
  padding:16px;
}
.x-master-reference-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.x-master-reference-card-head h4{margin:0;font-size:15px;}
.x-master-reference-card-head p{margin:4px 0 0;font-size:12px;color:#64748b;}
.x-master-inline-add{
  width:30px;
  height:30px;
  min-width:30px;
  padding:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  line-height:1;
}
@media(max-width:768px){
  .x-master-reference-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   MOBILE-FIRST ACTION UX SYSTEM (POPOVERS, OVERFLOW MENUS, ACTION GROUPS)
   ========================================================================== */

/* Item actions container in tables / cards */
.x-item-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
}

/* Desktop-only action buttons (hidden on mobile) */
.x-action-desktop-only {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Branch card responsive action row */
.x-branch-actions-row {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
}

.x-branch-primary-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Product card action footer */
.x-product-card-simple .x-product-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

/* Mobile Breakpoint Optimizations */
@media (max-width: 768px) {
  /* Tables on mobile: keep action column compact */
  .x-table td.text-right,
  .x-data-table td.text-right {
    white-space: nowrap;
    padding: 10px 8px;
  }

  /* In table rows on mobile, hide secondary text buttons that are now in the `⋯` menu */
  .x-action-desktop-only {
    display: none !important;
  }

  /* Branch card actions on mobile */
  .x-branch-actions-row {
    flex-wrap: nowrap;
  }

  .x-branch-primary-actions {
    flex: 1 1 auto;
    min-width: 0;
  }

  .x-branch-primary-actions button {
    flex: 1 1 auto;
    padding: 8px 10px !important;
    font-size: 12px !important;
    text-align: center;
    justify-content: center;
  }

}

@media (max-width: 480px) {
  .x-item-actions {
    gap: 4px;
  }


  /* Header action buttons: wrap or stack cleanly */
  .x-header-buttons {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .x-header-buttons button {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: 12.5px;
  }
}

/* =========================================================================
   BRANCH MANAGER OPERATIONAL CENTER (BM-1) STYLES
   ========================================================================= */
.x-bm-hero-banner {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  position: relative;
  overflow: hidden;
}

.x-bm-branch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.25);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.x-status-dot-open {
  background: var(--accent-green, #10b981) !important;
  box-shadow: 0 0 8px var(--accent-green, #10b981) !important;
}

.x-status-dot-closed {
  background: #dc2626 !important;
  box-shadow: 0 0 8px #dc2626 !important;
}

.x-status-dot-paused {
  background: var(--accent-amber, #f59e0b) !important;
  box-shadow: 0 0 8px var(--accent-amber, #f59e0b) !important;
}


/* [MODULARIZED] Marketing & Banners CSS extracted to modules/marketing.css */

/* ==========================================================================
   BRANCH MANAGER OPERATIONAL CENTER: MOBILE ORDER CARDS & ATTENTION
   ========================================================================== */

/* Responsive switching between desktop table and mobile cards */
.bm-orders-desktop-table {
  display: block;
}

.bm-orders-mobile-cards {
  display: none;
}

@media (max-width: 768px) {
  .bm-orders-desktop-table {
    display: none !important;
  }

  .bm-orders-mobile-cards {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
}

/* Operational Card Component */
.bm-order-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  padding: 16px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

/* Attention pulse / highlight for genuinely new pending orders */
.bm-order-card.bm-order-card-attention {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25), var(--shadow-md);
  animation: bmOrderPulse 1.8s ease-in-out infinite alternate;
}

@keyframes bmOrderPulse {
  0% {
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2), var(--shadow-sm);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.4), var(--shadow-md);
  }
}

/* Card Header */
.bm-order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.bm-order-card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bm-order-card-number {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
  word-break: break-all;
}

.bm-order-card-time {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}

/* Card Customer & Fulfillment Meta */
.bm-order-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bm-order-card-customer {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  word-break: break-word;
}

.bm-order-card-phone {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.bm-order-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.bm-order-card-table {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

/* Card Total & Status Row */
.bm-order-card-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-main, #f8fafc);
  border-radius: var(--radius-sm, 8px);
  gap: 8px;
}

.bm-order-card-total-wrap {
  display: flex;
  flex-direction: column;
}

.bm-order-card-total-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bm-order-card-total-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
}

.bm-order-card-status-wrap {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.bm-order-card-countdown {
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Card Action Buttons (Thumb-accessible) */
.bm-order-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}

.bm-order-card-actions .x-btn-primary,
.bm-order-card-actions .x-btn-secondary {
  flex: 1;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  box-sizing: border-box;
}

.bm-order-card-actions .bm-btn-danger {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff;
}

.bm-order-card-actions .bm-btn-danger:hover {
  background: #fef2f2;
}

.bm-order-card-actions .bm-btn-detail {
  flex: 0 0 auto;
  min-width: 70px;
}



/* ==========================================================================
   XENTRA MERCHANT — MOBILE DESIGN SOURCE OF TRUTH
   Operational order inbox + app shell
   ========================================================================== */

.bm-order-center {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.bm-order-center-head {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.bm-order-center-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bm-section-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
}

.bm-order-center-heading h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.bm-order-center-heading p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.bm-icon-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bm-icon-btn:active {
  transform: scale(.98);
}

.bm-order-queue-tabs {
  display: inline-flex;
  width: 100%;
  margin-top: 16px;
  padding: 3px;
  background: #f1f5f9;
  border-radius: 12px;
}

.bm-order-queue-tab {
  flex: 1 1 0;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.bm-order-queue-tab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.bm-order-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
}

.bm-order-queue-tab.active .bm-order-count {
  background: #0f172a;
  color: #ffffff;
}

.bm-order-type-scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 2px 3px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bm-order-type-scroller::-webkit-scrollbar {
  display: none;
}

.bm-order-type-chip {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.bm-order-type-chip.active {
  border-color: #0f172a;
  background: #0f172a;
  color: #ffffff;
}

.bm-order-search-row {
  margin-top: 12px;
}

.bm-order-search {
  min-height: 42px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.bm-order-search svg {
  flex: 0 0 auto;
  color: #94a3b8;
}

.bm-order-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  color: #0f172a;
}

.bm-order-feed {
  width: 100%;
}

.bm-order-feed-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.bm-order-feed-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .035);
  min-width: 0;
}

.bm-order-feed-card.needs-attention {
  border-color: #fed7aa;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, .08), 0 5px 16px rgba(15, 23, 42, .05);
}

.bm-order-feed-top,
.bm-order-feed-context,
.bm-order-feed-state,
.bm-order-feed-actions {
  display: flex;
  align-items: center;
}

.bm-order-feed-top {
  justify-content: space-between;
  gap: 8px;
}

.bm-order-feed-context {
  min-width: 0;
  gap: 7px;
}

.bm-order-feed-context strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
  font-size: 12px;
}

.bm-order-feed-top time {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

.bm-order-type-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.bm-order-type-pill.type-dine-in {
  background: #ede9fe;
  color: #6d28d9;
}

.bm-order-type-pill.type-pickup {
  background: #fef3c7;
  color: #92400e;
}

.bm-order-type-pill.type-delivery {
  background: #dbeafe;
  color: #1d4ed8;
}

.bm-order-type-pill.type-reservation {
  background: #fef3c7;
  color: #92400e;
}

.bm-order-feed-main {
  margin-top: 12px;
}

.bm-order-feed-number {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.bm-order-feed-customer {
  margin-top: 3px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.bm-order-feed-items {
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.bm-order-feed-state {
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.bm-order-state-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.bm-order-state-pill.attention {
  background: #dcfce7;
  color: #15803d;
}

.bm-order-state-pill.neutral {
  background: #f1f5f9;
  color: #475569;
}

.bm-order-state-pill.muted {
  background: #f8fafc;
  color: #64748b;
}

.bm-order-state-pill.danger {
  background: #ffe4e6;
  color: #be123c;
}

.bm-order-deadline {
  flex: 0 0 auto;
  color: #b45309;
  font-size: 10px;
  font-weight: 800;
}

.bm-order-payment-line {
  margin-top: 9px;
  font-size: 11px;
  font-weight: 700;
}

.bm-order-payment-line.unpaid {
  color: #b91c1c;
}

.bm-order-payment-line.partial {
  color: #92400e;
}

.bm-order-payment-line.paid {
  color: #15803d;
}

.bm-order-addition-alert {
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  font-weight: 800;
}

.bm-order-feed-actions {
  gap: 8px;
  margin-top: 13px;
}

.bm-order-primary-action,
.bm-order-detail-action {
  min-height: 40px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.bm-order-primary-action {
  flex: 1 1 auto;
  border: 1px solid #0f172a;
  background: #0f172a;
  color: #ffffff;
  padding: 0 13px;
}

.bm-order-detail-action {
  flex: 0 0 auto;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  padding: 0 13px;
}

.bm-order-empty {
  min-height: 260px;
  padding: 28px 20px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #64748b;
}

.bm-order-empty-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  font-size: 22px;
}

.bm-order-empty strong {
  color: #334155;
  font-size: 14px;
}

.bm-order-empty span {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
}

body:not(.x-merchant-app) .x-merchant-mobile-nav {
  display: none;
}

@media (max-width: 768px) {
  html, body {
    background-color: #ffffff;
  }
  body:not(.x-merchant-app) {
    padding-bottom: 0 !important;
  }

  .x-dash-sidebar,
  .x-sidebar-overlay,
  .x-hamburger {
    display: none !important;
  }

  .x-dash-main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0;
  }

  .x-dash-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 58px;
    padding: 9px 12px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #eef2f7;
  }

  .x-topbar-left {
    min-width: 0;
  }

  .x-topbar-left > div:last-child {
    min-width: 0;
  }

  .x-topbar-left h1 {
    margin: 0;
    font-size: 17px;
  }

  .x-topbar-left p {
    display: none;
  }

  .x-topbar-right {
    margin-left: auto;
  }

  .x-user-meta,
  .x-btn-logout {
    display: none !important;
  }

  .x-admin-profile {
    padding: 0 !important;
    border: 0 !important;
  }

  .x-dash-main > .x-tab-content {
    padding: 12px;
  }

  .bm-order-center {
    max-width: none;
  }

  .bm-order-center-head {
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 12px;
  }

  .bm-order-center-heading h3 {
    font-size: 20px;
  }

  .bm-order-feed-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .bm-order-feed-card {
    border-radius: 16px;
    padding: 14px;
  }

  .bm-order-search input {
    font-size: 16px;
  }
}

@media (min-width: 769px) {
  .bm-order-feed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .bm-order-center-head {
    padding: 13px;
  }

  .bm-order-type-chip {
    padding-left: 11px;
    padding-right: 11px;
  }

  .bm-order-primary-action,
  .bm-order-detail-action {
    font-size: 11px;
  }
}


/* ==========================================================================
   XENTRA MERCHANT APP — UI-FIRST SHELL
   Visual surface intentionally independent from fulfillment/payment logic.
   ========================================================================== */
.x-merchant-app .x-dash-sidebar,
.x-merchant-app .x-sidebar-overlay,
.x-merchant-app .x-dash-main { max-width:500px; width:100%; margin:0 auto !important; }
.x-merchant-app .x-tab-content { max-width:500px; width:100%; margin:0 auto; box-sizing:border-box; }
.x-merchant-app .table-responsive,
.x-merchant-app .x-table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media(max-width:768px){
  html.x-merchant-app,
  body.x-merchant-app {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
    position: fixed !important;
    inset: 0 !important;
    background: #e8e8ea !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .x-merchant-app .x-dash-layout {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    background: #e8e8ea !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .x-merchant-app .x-dash-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #e8e8ea !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media(min-width:769px){
  body:not(.x-merchant-app) .x-dash-topbar{max-width:1180px;width:100%;margin:0 auto;border-left:1px solid #eef2f7;border-right:1px solid #eef2f7}
  body:not(.x-merchant-app) .x-mobile-topbar,
  body:not(.x-merchant-app) .x-mobile-operational-row { display: none !important; }
}

/* ==========================================================================
   Merchant Home — supplied visual reference
   Mobile top bar + bottom navigation are intentionally reference-driven.
   ========================================================================== */
body:not(.x-merchant-app) .x-mobile-topbar,
body:not(.x-merchant-app) .x-mobile-operational-row,
.x-topbar-desktop {
  display: none;
}

@media (max-width: 768px) {
  /* Topbar (Row 1 + Row 2): Stays fixed on top for Merchant App */
  .x-merchant-app .x-dash-topbar {
    flex: 0 0 auto !important;
    position: relative !important;
    top: 0 !important;
    z-index: 100 !important;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 2px 6px rgba(15,23,42,.16) !important;
    backdrop-filter: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .x-topbar-desktop { display: none !important; }

  .x-mobile-topbar {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .x-mobile-topbar-main {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .x-mobile-branch-pill {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    height: 42px !important;
    padding: 0 14px 0 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 21px !important;
    background: #ffffff !important;
    color: #111111 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  }

  .x-mobile-branch-logo {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
  }

  .x-mobile-branch-pill span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -.2px !important;
  }

  .x-mobile-topbar-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .x-mobile-circle-btn {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #111111 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  }

  .x-mobile-circle-btn svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
  }

  /* Ikon profil: glyph-nya mengisi kotak penuh (viewBox 17x17), jadi pada ukuran yang
     sama dengan ikon notifikasi ia tampak lebih besar. Dikecilkan khusus di sini. */
  .x-merchant-app .x-mobile-profile-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .x-mobile-notification-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ef3340 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .x-mobile-profile-icon {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .x-mobile-profile-icon svg {
    width: 22px !important;
    height: 22px !important;
    fill: currentColor !important;
  }

  /* Row 2: Operational status row (inside topbar, stays on top) */
  .x-mobile-operational-row {
    margin-top: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  .x-mobile-status-control {
    height: 36px !important;
    min-width: 105px !important;
    border: 0 !important;
    border-radius: 18px !important;
    padding: 0 12px 0 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  }

  .x-mobile-online-control {
    margin-left: auto !important;
    justify-content: flex-end !important;
    min-width: 155px !important;
    padding: 0 5px 0 12px !important;
    gap: 8px !important;
  }

  .x-mobile-switch {
    position: relative !important;
    width: 38px !important;
    height: 22px !important;
    flex: 0 0 38px !important;
    border-radius: 11px !important;
    background: #ef3340 !important; /* off = red */
    transition: background .15s ease !important;
  }

  .x-mobile-switch span {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
    transition: left .15s ease !important;
  }

  .x-mobile-switch.is-on {
    background: #08a94f !important; /* on = green */
  }

  .x-mobile-switch.is-on span {
    left: 18px !important;
  }

  .x-mobile-switch.is-off {
    background: #ef3340 !important; /* off = red */
  }

  .x-mobile-switch.is-off span {
    left: 2px !important;
  }

  .x-merchant-app .x-tab-content {
    background: #f6f7f7 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }

  .x-merchant-app .x-tab-content:not(.active) {
    display: none !important;
  }

  .x-merchant-app .x-tab-content.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 16px 0 !important;
    box-sizing: border-box !important;
  }

  /* Physical bottom spacer to guarantee exact 70px clearance above fixed bottom navbar across all browsers */
  .x-merchant-app .x-tab-content.active::after {
    content: "" !important;
    display: block !important;
    height: calc(138px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    clear: both !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
  }

  /* White cards inside the putih-kebiruan curved frame */
  .x-merchant-app .x-tab-content .x-card-panel,
  .x-merchant-app .x-tab-content .x-bm-hero-banner {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 16px !important;
  }

  /* Reset margin on the last child so the 138px spacer creates precisely 70px visible clearance */
  .x-merchant-app .x-tab-content > *:last-child,
  .x-merchant-app .x-tab-content .x-hari-ini-container > *:last-child,
  .x-merchant-app .x-tab-content .x-card-panel:last-child {
    margin-bottom: 0 !important;
  }

  .x-merchant-mobile-nav,
  .x-merchant-app .x-merchant-mobile-nav {
    position: fixed !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 200 !important;
    min-height: 68px !important;
    height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 0 !important;
    border-top: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
  }

  .x-merchant-mobile-nav-item,
  .x-merchant-app .x-merchant-mobile-nav-item {
    position: relative !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111111 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 2px 2px 0 !important;
    cursor: pointer !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .x-merchant-mobile-nav-item svg,
  .x-merchant-app .x-merchant-mobile-nav-item svg {
    width: 24px !important;
    height: 24px !important;
    color: #111111 !important;
    fill: currentColor !important;
    overflow: visible !important;
    display: block !important;
    transition: color .15s ease, fill .15s ease;
  }

  .x-merchant-mobile-nav-item > span:not(.x-mobile-nav-badge),
  .x-merchant-app .x-merchant-mobile-nav-item > span:not(.x-mobile-nav-badge) {
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    color: #111111 !important; /* tulisan menu bottom tetap hitam */
    white-space: nowrap !important;
  }

  .x-merchant-mobile-nav-item.active,
  .x-merchant-app .x-merchant-mobile-nav-item.active {
    color: #00A637 !important;
    background: transparent !important;
  }

  .x-merchant-mobile-nav-item.active svg,
  .x-merchant-app .x-merchant-mobile-nav-item.active svg {
    color: #00A637 !important; /* hanya icon yang berubah warna */
    fill: #00A637 !important;
  }

  .x-merchant-mobile-nav-item.active::before,
  .x-merchant-app .x-merchant-mobile-nav-item.active::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 5px !important;
    border-radius: 0 0 5px 5px !important;
    background: #00A637 !important;
    z-index: 10 !important;
  }

  .x-mobile-nav-badge,
  .x-merchant-mobile-nav .x-mobile-nav-badge,
  .x-merchant-app .x-merchant-mobile-nav .x-mobile-nav-badge,
  .x-merchant-mobile-nav-item .x-mobile-nav-badge,
  .x-merchant-app .x-merchant-mobile-nav-item .x-mobile-nav-badge,
  span.x-mobile-nav-badge,
  span#mobile-orders-count {
    position: absolute !important;
    top: 0 !important;
    right: calc(50% - 18px) !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    background: #ef3340 !important;
    color: #ffffff !important; /* badge berlatar merah selalu bertulisan putih */
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    box-sizing: border-box !important;
  }

  .x-mobile-nav-badge[style*="display: none"],
  .x-mobile-nav-badge[style*="display:none"],
  span#mobile-orders-count[style*="display: none"],
  span#mobile-orders-count[style*="display:none"],
  .x-mobile-notification-badge[style*="display: none"],
  .x-mobile-notification-badge[style*="display:none"],
  span#mobile-notification-count[style*="display: none"],
  span#mobile-notification-count[style*="display:none"] {
    display: none !important;
  }

  .x-mobile-notification-badge,
  span#mobile-notification-count {
    color: #ffffff !important;
  }

}

/* Mobile Account — reference-driven account screen */
.x-mobile-account-page {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  overflow-y: auto;
  background: #f5f5f7;
  color: #111111;
  font-family: "Plus Jakarta Sans", sans-serif;
  touch-action: pan-y;
  will-change: transform;
  -webkit-overflow-scrolling: touch;
}
body.x-mobile-account-open .x-mobile-account-page { display: flex; flex-direction: column; align-items: center; }
body.x-mobile-account-open .x-dash-layout,
body.x-mobile-account-open .x-owner-bottom-nav,
body.x-mobile-account-open .x-merchant-mobile-nav { display: none !important; }
.x-mobile-account-statusbar-spacer { height: max(16px, env(safe-area-inset-top)); width: 100%; }
.x-mobile-account-header { height: 52px; padding: 0 16px; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; max-width: 500px; margin: 0 auto; }
.x-mobile-account-header h1 { margin: 0; font-size: 20px; line-height: 1; font-weight: 700; letter-spacing: -.3px; color: #111111; }
.x-mobile-account-back { width: 36px; height: 36px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; color: #111111; cursor: pointer; }
.x-mobile-account-back svg { width: 24px; height: 24px; }
.x-mobile-account-content { padding: 16px 16px 36px; box-sizing: border-box; width: 100%; max-width: 500px; margin: 0 auto; }
.x-mobile-account-profile-card { width: 100%; padding: 18px 16px; border: 0; border-radius: 18px; background: #ffffff; display: flex; align-items: center; justify-content: space-between; text-align: left; color: #111111; box-shadow: 0 1px 3px rgba(0,0,0,.03); cursor: pointer; box-sizing: border-box; }
.x-mobile-account-profile-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.x-mobile-account-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.x-mobile-account-name-row strong { font-size: 17px; line-height: 1.2; font-weight: 700; color: #111111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-mobile-account-role-divider { color: #d1d5db; font-size: 14px; font-weight: 300; }
.x-mobile-account-name-row span#mobile-account-role { flex: 0 0 auto; padding: 2px 8px; border-radius: 10px; background: #e5283b; color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1.2; }
.x-mobile-account-profile-copy>span:not(.x-mobile-account-role-divider):not(#mobile-account-role) { font-size: 13px; line-height: 1.3; color: #666666; }
.x-mobile-account-chevron { color: #999999; display: flex; align-items: center; }
.x-mobile-account-profile-chevron { width: 36px; height: 36px; border-radius: 50%; background: #e8f9ed; color: #0da03d; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; }
.x-mobile-account-section { margin-top: 24px; width: 100%; }
.x-mobile-account-section h2 { margin: 0 0 10px 4px; padding: 0; font-size: 15px; line-height: 1.2; font-weight: 700; color: #111111; letter-spacing: -.2px; }
.x-mobile-account-list-card { width: 100%; border-radius: 18px; background: #ffffff; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.03); box-sizing: border-box; }
.x-mobile-account-single-row { min-height: 52px; border: 0; display: flex; align-items: center; padding: 0 16px; box-sizing: border-box; text-align: left; width: 100%; background: #ffffff; cursor: pointer; }
.x-mobile-account-leading-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex: 0 0 22px; color: #111111; }
.x-mobile-account-leading-icon svg { width: 20px; height: 20px; }
.x-mobile-account-row-label { margin-left: 14px; min-width: 0; flex: 1; font-size: 14px; line-height: 1.2; font-weight: 600; color: #111111; }
.x-mobile-account-row { width: 100%; height: 52px; padding: 0 16px; border: 0; border-bottom: 1px solid #f2f2f4; background: #ffffff; display: flex; align-items: center; text-align: left; color: #111111; cursor: pointer; box-sizing: border-box; }
.x-mobile-account-row:last-child { border-bottom: 0; }
.x-mobile-account-new { margin-left: auto; margin-right: 8px; padding: 2px 7px; border-radius: 6px; background: #00880d; color: #ffffff; font-size: 11px; font-weight: 700; }
.x-mobile-account-value { margin-left: auto; margin-right: 8px; color: #888888; font-size: 13px; }
.x-mobile-account-logout { width: 100%; height: 48px; margin-top: 28px; border: 1.5px solid #e5283b; border-radius: 24px; background: #ffffff; color: #e5283b; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; box-sizing: border-box; }
.x-mobile-account-logout:active { background: #fde8ea; }

/* ==========================================================================
   OWNER DASHBOARD — Mobile Bottom Navigation & Focus Selector
   Owner-specific mobile shell: 5-item bottom nav + Focus scope top bar
   ========================================================================== */
/*
 * ARCHITECTURE CONTRACT:
 * - This nav is application-shell chrome, not page content.
 * - It must be a direct child of <body>, never inside .x-tab-content.
 * - Route ownership remains in dashboard.js; this component only renders
 *   navigation state and delegates clicks to the single canonical router.
 */
.x-owner-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  /* Owner mobile bottom nav: matches merchant mobile bottom nav visual identity */
  .x-owner-bottom-nav {
    position: fixed !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 200 !important;
    min-height: 78px !important;
    height: auto !important;
    padding: 10px 4px 24px !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 0 !important;
    border-top: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
  }

  body.x-hide-bottom-nav .x-owner-bottom-nav,
  .x-owner-bottom-nav.x-nav-hidden {
    display: none !important;
  }

  body.x-hide-bottom-nav,
  body.x-hide-bottom-nav:not(.x-merchant-app) {
    padding-bottom: 0 !important;
  }

  body.x-hide-bottom-nav .x-dash-main,
  body.x-hide-bottom-nav:not(.x-merchant-app) .x-dash-main {
    padding-bottom: 5px !important;
  }

  body.x-hide-bottom-nav .x-tab-content,
  body.x-hide-bottom-nav:not(.x-merchant-app) .x-tab-content {
    padding-bottom: 5px !important;
  }

  body.x-hide-bottom-nav .x-owner-child-page-shell,
  body.x-hide-bottom-nav .x-card-panel.x-owner-child-page-shell {
    padding-bottom: 5px !important;
    margin-bottom: 0 !important;
  }

  body.x-hide-bottom-nav .x-owner-child-page-shell > *:last-child,
  body.x-hide-bottom-nav .x-tab-content > *:last-child {
    margin-bottom: 5px !important;
  }

  .x-owner-nav-item {
    position: relative !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111111 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 2px 2px 0 !important;
    cursor: pointer !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color .15s ease;
  }

  .x-owner-nav-item img,
  .x-owner-nav-item svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    color: #111111 !important;
    fill: currentColor !important;
    overflow: visible !important;
    display: block !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    transition: color .15s ease, fill .15s ease, filter .15s ease;
  }

  .x-owner-nav-item > span:not(.x-mobile-nav-badge) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #0F172A !important; /* text-slate-900 */
    white-space: nowrap !important;
  }

  .x-owner-nav-item.active {
    color: #16a34a !important;
    background: transparent !important;
  }

  /* Active item icon is green; the label remains black. */
  .x-owner-nav-item.active img,
  .x-owner-nav-item.active svg,
  .x-owner-nav-item.active image {
    color: #16a34a !important;
    fill: #16a34a !important;
    filter: brightness(0) saturate(100%) invert(48%) sepia(97%) saturate(1451%) hue-rotate(116deg) brightness(92%) contrast(101%) !important;
  }

  /* Active item indicator — green rounded tab extending from the top edge of the floating navbar. */
  .x-owner-nav-item.active::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 3.5px !important;
    border-radius: 0 0 4px 4px !important;
    background: #16a34a !important;
  }

  /* Topbar stays fixed on top with generous mobile padding (Owner mobile only) */
  body:not(.x-merchant-app) .x-dash-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--topbar-height-mobile) !important;
    min-height: var(--topbar-height-mobile) !important;
    padding: 0 20px !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    border-bottom: 1px solid #eef2f7 !important;
    box-sizing: border-box !important;
  }

  /* Mobile Owner topbar: hide redundant desktop hamburger and overview title for generous whitespace */
  body:not(.x-merchant-app) .x-dash-topbar .x-topbar-left {
    display: none !important;
  }

  /* Right container spans full width: branch selector on left, icons on right */
  body:not(.x-merchant-app) .x-dash-topbar .x-topbar-right {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Show Focus Selector on mobile for Owner (override 900px and 768px hide rules) */
  #x-branch-selector {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1.5px solid #475569 !important;
    border-radius: 20px !important;
    height: 40px !important;
    padding: 0 12px !important;
    max-width: 210px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
    flex-shrink: 1 !important;
  }

  body:not(.x-merchant-app) .x-dash-topbar #btn-messages {
    margin-left: auto !important;
  }

  body:not(.x-merchant-app) .x-dash-topbar #btn-notifications {
    margin-left: 0 !important;
  }

  /* Twin circular stroke icon buttons: Notifications & User Profile */
  #btn-notifications.x-topbar-icon-btn,
  .x-topbar-icon-btn-round {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #334155 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0 !important;
  }

  #btn-notifications.x-topbar-icon-btn:hover,
  .x-topbar-icon-btn-round:hover {
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    background: #f8fafc !important;
  }

  .x-avatar.x-avatar-stroke-round {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #334155 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0 !important;
  }

  .x-admin-profile:hover .x-avatar.x-avatar-stroke-round {
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    background: #f8fafc !important;
  }

  /* Hub grids */
  .x-hub-header {
    padding: 16px 0 8px;
  }
  .x-hub-header h2 {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
  }
  .x-hub-header p {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
  }
  .x-hub-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
  }

  .x-hub-section {
    margin: 8px 0 14px;
  }
  .x-hub-section-title {
    margin: 0 0 8px;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #64748b;
  }
  .x-hub-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e8e8ea;
    border-radius: 14px;
    padding: 14px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s ease;
  }
  .x-hub-card:active { background: #f1f5f9; }
  .x-hub-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
  }
  .x-hub-icon.bg-indigo { background: #4f46e5; }
  .x-hub-icon.bg-blue   { background: #2563eb; }
  .x-hub-icon.bg-purple { background: #7c3aed; }
  .x-hub-icon.bg-orange { background: #ea580c; }
  .x-hub-icon.bg-green  { background: #16a34a; }
  .x-hub-icon.bg-pink   { background: #db2777; }
  .x-hub-icon.bg-amber  { background: #d97706; }
  .x-hub-icon.bg-red    { background: #dc2626; }
  .x-hub-icon.bg-slate  { background: #334155; }
  .x-hub-icon.bg-teal   { background: #0d9488; }
  .x-hub-info { flex: 1 1 auto; min-width: 0; }
  .x-hub-info h3 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
  }
  .x-hub-info p {
    font-size: 11px;
    line-height: 1.35;
    color: #8c8c8c;
    font-style: normal;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .x-hub-arrow { color: #c7c7cc; flex-shrink: 0; }

  /* Content area top and bottom spacers for fixed topbar and owner bottom nav */
  /* Owner mobile application shell: route content scrolls independently from persistent chrome. */
  body:not(.x-merchant-app) .x-dash-main {
    padding-top: max(var(--topbar-height-mobile), calc(var(--topbar-height-mobile) + env(safe-area-inset-top, 0px))) !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Owner Command Center on Mobile */
  .x-desktop-overview-view { display: none !important; }
  .x-owner-command-center {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 10px;
  }

  /* 1. Periode Selector & Form Pencarian Tanggal (2 Rows) */
  .x-occ-period-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
  }
  .x-occ-preset-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    position: relative;
  }
  .x-occ-dropdown {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }
  .x-occ-dropdown-trigger {
    width: 100%;
    height: 42px;
    min-height: 42px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    /* Label di kiri, chevron di kanan: tanpa ini keduanya berdempetan dan chevronnya
       menempel ke tulisan, bukan memenuhi lebar dropdown. */
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-align: left;
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }
  /* Nama kategori yang panjang dipotong dengan elipsis, bukan mendorong chevronnya. */
  .x-occ-dropdown-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .x-occ-dropdown-trigger:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
  }
  .x-occ-dropdown-trigger:focus-visible,
  .x-occ-dropdown-trigger[aria-expanded="true"] {
    background: #ffffff;
    border-color: #334155;
    box-shadow: 0 0 0 2px rgba(51, 65, 85, 0.15);
  }
  /* State disabled: tetap terbaca, tapi tidak bisa dibuka. */
  .x-occ-dropdown-trigger:disabled,
  .x-occ-dropdown.is-disabled .x-occ-dropdown-trigger {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
  }
  .x-occ-dropdown-trigger #occ-period-current-label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .x-occ-dropdown-trigger .x-occ-chevron-icon {
    position: static;
    flex-shrink: 0;
    color: #64748b;
    transition: transform 0.2s ease;
  }
  .x-occ-dropdown-trigger[aria-expanded="true"] .x-occ-chevron-icon {
    transform: rotate(180deg);
  }
  /* Permukaan menu: satu kontrak untuk SEMUA dropdown owner mobile — dipakai
     dropdown filter kategori (Produk Master), pemilih periode, filter keuangan,
     filter pesanan, dan pemilih cabang. */
  .x-occ-dropdown-menu,
  .x-branch-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    padding: 6px;
    /* Di atas bottom nav (200); tetap di bawah bottom sheet (1050) dan modal (9999). */
    z-index: 220;
    display: none;
    flex-direction: column;
    gap: 2px;
    /* Tidak boleh keluar viewport: dibatasi tinggi layar dan bisa di-scroll. */
    max-height: min(320px, 50dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  .x-occ-dropdown-menu {
    left: 0;
    right: 0;
  }
  /* Pemilih cabang: menu mengikuti lebar nama cabang, bukan lebar trigger topbar. */
  .x-branch-dropdown-menu {
    left: 0;
    right: auto;
    min-width: 200px;
    max-width: 280px;
  }
  .x-occ-dropdown.open .x-occ-dropdown-menu,
  .x-branch-dropdown.open .x-branch-dropdown-menu {
    display: flex;
    animation: xOwnerDropdownIn 0.15s ease-out;
  }
  @keyframes xOwnerDropdownIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* Item: padding touch-friendly; aktif = abu-abu sangat muda + checkmark kanan. */
  .x-occ-dropdown-item,
  .x-branch-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }
  .x-branch-dropdown-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .x-occ-dropdown-item:hover,
  .x-branch-dropdown-item:hover {
    background: #f1f5f9;
    color: #0f172a;
  }
  .x-occ-dropdown-item.active,
  .x-branch-dropdown-item.active {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 700;
  }
  .x-occ-dropdown-item .x-occ-check-icon,
  .x-branch-dropdown-item .x-branch-check-icon {
    opacity: 0;
    color: #0f172a;
    flex-shrink: 0;
    transition: opacity 0.12s ease;
  }
  .x-occ-dropdown-item.active .x-occ-check-icon,
  .x-branch-dropdown-item.active .x-branch-check-icon {
    opacity: 1;
  }
  .x-occ-dropdown-item.is-disabled,
  .x-occ-dropdown-item[disabled] {
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.55;
    background: transparent !important;
  }
  .x-occ-dropdown-item.is-disabled:hover,
  .x-occ-dropdown-item[disabled]:hover {
    background: transparent !important;
    color: #94a3b8 !important;
  }
  .x-occ-dropdown-item.is-disabled .x-occ-check-icon,
  .x-occ-dropdown-item[disabled] .x-occ-check-icon {
    display: none !important;
  }

  /* Select native memakai kontrak visual yang sama supaya tidak terlihat seperti
     select desktop yang diperkecil. Picker-nya tetap native — paling nyaman di HP. */
  body:not(.x-merchant-app) select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 36px 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    text-overflow: ellipsis;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  body:not(.x-merchant-app) select:focus-visible {
    outline: none;
    border-color: #334155;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(51, 65, 85, 0.15);
  }
  body:not(.x-merchant-app) select:disabled {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
  }

  /* Select native yang sudah dikonversi ke dropdown kustom tetap ada di DOM
     sebagai sumber nilai; disembunyikan secara visual (bukan display:none supaya
     nilainya tetap ikut terkirim bersama form). */
  .x-owner-select-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Host dropdown hasil konversi mengambil lebar penuh seperti select aslinya. */
  .x-owner-select-dropdown {
    display: block;
    width: 100%;
  }
  .x-occ-period-selector-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 28px 0 12px;
    height: 42px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .x-occ-calendar-icon {
    color: #475569;
    flex-shrink: 0;
  }
  .x-occ-period-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 0;
  }
  .x-occ-chevron-icon {
    position: absolute;
    right: 12px;
    color: #64748b;
    pointer-events: none;
  }

  /* Bottom Sheet: Mobile Drawer for Custom Date Range Picker */
  body.x-sheet-open {
    overflow: hidden !important;
  }
  .x-bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    touch-action: none;
  }
  .x-bottom-sheet-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
  /* Floating X close button — rendered above sheet, outside modal box */
  .x-bottom-sheet-ext-close {
    position: fixed;
    top: auto;
    right: 16px;
    z-index: 1053;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 1.5px solid #e2e8f0;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    color: #334155;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
  }
  .x-bottom-sheet-ext-close.open {
    display: flex;
  }
  .x-bottom-sheet-ext-close:active {
    background: #f1f5f9;
  }
  .x-bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.2);
    z-index: 1051;
    padding: 12px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    max-width: min(540px, 100vw);
    max-height: min(90dvh, 800px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
  }
  .x-bottom-sheet.open {
    transform: translateY(0);
  }
  .x-bottom-sheet-handle {
    width: 42px;
    height: 5px;
    background: #cbd5e1;
    border-radius: 999px;
    margin: 0 auto 14px;
    flex-shrink: 0;
  }
  .x-bottom-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
  }
  .x-bottom-sheet-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .x-bottom-sheet-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
  }
  .x-bottom-sheet-subtitle {
    font-size: 12px;
    color: #64748b;
    margin: 0;
  }
  .x-bottom-sheet-close {
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .x-bottom-sheet-close:hover {
    background: #e2e8f0;
    color: #0f172a;
  }
  .x-bottom-sheet-body {
    width: 100%;
  }
  .x-bottom-sheet-body .x-occ-custom-range-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }
  .x-bottom-sheet-body .x-occ-date-inputs-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .x-bottom-sheet-body .x-occ-date-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 6px;
  }
  .x-bottom-sheet-body .x-occ-date-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
  }
  .x-bottom-sheet-body .x-occ-date-input {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    background: #f8fafc;
    box-sizing: border-box;
    outline: none;
  }
  .x-bottom-sheet-body .x-occ-date-input:focus {
    background: #ffffff;
    border-color: #334155;
    box-shadow: 0 0 0 2px rgba(51, 65, 85, 0.12);
  }
  .x-bottom-sheet-body .x-occ-range-sep {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 20px;
    flex-shrink: 0;
  }
  .x-bottom-sheet-body .x-occ-search-btn {
    width: 100%;
    height: 44px;
    background: #334155;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
    transition: background 0.15s ease, transform 0.1s ease;
  }
  .x-bottom-sheet-body .x-occ-search-btn:active {
    background: #0f172a;
    transform: scale(0.98);
  }

  /* Bottom Sheet: Menu Type Selection (Single vs Package) - Frame 193 (2).png */
  .x-menu-type-card-btn {
    transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .x-menu-type-card-btn:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important;
  }
  .x-menu-type-card-btn:active {
    transform: scale(0.985);
    background: #F8FAFC !important;
  }

  .x-occ-custom-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .x-occ-date-input {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    height: 42px;
    flex: 1 1 0;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
  }
  .x-occ-date-input:focus {
    border-color: #475569;
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.15);
  }
  .x-occ-range-sep {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
    flex-shrink: 0;
    padding: 0 2px;
  }
  .x-occ-search-btn {
    background: #334155;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    height: 42px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.1s ease;
  }
  .x-occ-search-btn:hover {
    background: #1e293b;
  }
  .x-occ-search-btn:active {
    background: #0f172a;
    transform: scale(0.97);
  }

  /* 2. Hero KPI Card */
  .x-occ-hero-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  }
  .x-occ-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .x-occ-hero-sublabel {
    font-size: 12.5px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .x-occ-hero-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
  }
  .x-occ-hero-trend.positive {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
  }
  .x-occ-hero-trend.negative {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
  }
  .x-occ-hero-trend.neutral {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
  }
  .x-occ-hero-primary-val {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin: 4px 0 14px;
  }
  .x-occ-hero-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .x-occ-mini-kpi {
    display: flex;
    flex-direction: column;
  }
  .x-occ-mini-kpi-val {
    font-size: 14.5px;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.2;
  }
  .x-occ-mini-kpi-lbl {
    font-size: 10.5px;
    color: #94a3b8;
    margin-top: 2px;
  }

  /* 3-7. Command Center Cards */
  .x-occ-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  }
  .x-occ-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .x-occ-card-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
  }
  .x-occ-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, transform 0.15s ease;
  }
  .x-occ-card-link:hover {
    color: #0f172a;
  }
  .x-occ-card-link:active {
    transform: translateX(1px);
  }
  .x-occ-link-chevron {
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 2.5;
    transition: transform 0.15s ease;
  }
  .x-occ-card-link:hover .x-occ-link-chevron {
    transform: translateX(2px);
  }
  .x-occ-empty-placeholder {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    padding: 10px 0;
  }

  /* Branch ranking & single branch */
  .x-occ-branch-list {
    display: flex;
    flex-direction: column;
  }
  .x-occ-branch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
  }
  .x-occ-branch-row:last-child {
    border-bottom: none;
    padding-bottom: 2px;
  }
  .x-occ-branch-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .x-occ-branch-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
  }
  .x-occ-branch-orders {
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
  }
  .x-occ-branch-revenue {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    flex-shrink: 0;
  }
  .x-occ-branch-single {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
  }
  .x-occ-single-kpi-main {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
  }
  .x-occ-single-kpi-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
  }
  .x-occ-dot { color: #cbd5e1; }

  /* Orders summary grid */
  .x-occ-orders-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .x-occ-order-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
  }
  .x-occ-order-stat-val {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
  }
  .x-occ-order-stat-lbl {
    font-size: 10.5px;
    color: #64748b;
    font-weight: 600;
    margin-top: 3px;
  }
  .x-occ-order-stat.status-completed .x-occ-order-stat-val { color: #16a34a; }
  .x-occ-order-stat.status-progress .x-occ-order-stat-val { color: #2563eb; }
  .x-occ-order-stat.status-cancelled .x-occ-order-stat-val { color: #dc2626; }

  /* Top products */
  .x-occ-product-list {
    display: flex;
    flex-direction: column;
  }
  .x-occ-product-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
  }
  .x-occ-product-row:last-child {
    border-bottom: none;
    padding-bottom: 2px;
  }
  .x-occ-product-rank {
    font-size: 14px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
  }
  .x-occ-product-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
  }
  .x-occ-product-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .x-occ-product-sold {
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
  }
  .x-occ-product-revenue {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    flex-shrink: 0;
  }

  /* Attention */
  .x-occ-normal-state {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: #16a34a;
    font-size: 13px;
    font-weight: 700;
  }
  .x-occ-normal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #dcfce7;
    border-radius: 50%;
    color: #16a34a;
    font-size: 12px;
    font-weight: 800;
  }
  .x-occ-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .x-occ-alert-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: 10px;
    padding: 8px 10px;
    color: #92400e;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
  }
  .x-occ-alert-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .x-occ-alert-icon { font-size: 13px; flex-shrink: 0; }
  .x-occ-alert-arrow {
    color: #d97706;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Quick access */
  .x-occ-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .x-occ-quick-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s ease;
  }
  .x-occ-quick-chip:active { background: #e2e8f0; }
  .x-occ-chip-icon { font-size: 17px; line-height: 1; }
  .x-occ-chip-label { font-size: 10.5px; font-weight: 700; color: #334155; }
}

/* ==========================================================================
   OWNER MOBILE UX REFINEMENT — native-app surface, touch & accessibility
   ========================================================================== */
@media (max-width: 768px) {
  .x-owner-command-center {
    gap: 20px;
    padding: 8px 16px 10px !important;
    box-sizing: border-box !important;
  }

  /* Keep only meaningful surfaces as cards; sections breathe like a native app. */
  .x-occ-period-bar,
  .x-occ-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .x-occ-period-bar {
    padding: 0;
    gap: 8px;
  }

  .x-occ-preset-row {
    gap: 8px;
  }

  .x-occ-period-selector-wrap {
    height: 44px;
    min-height: 44px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding-left: 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
  }

  .x-occ-period-select {
    font-size: 14px;
    min-height: 44px;
  }

  .x-occ-custom-toggle,
  .x-occ-search-btn {
    min-height: 44px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    padding: 0 14px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .x-occ-custom-toggle {
    flex: 0 0 auto;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
  }

  .x-occ-custom-toggle[aria-expanded="true"] {
    background: #f1f5f9;
    border-color: #cbd5e1;
  }

  .x-occ-custom-range-row {
    align-items: flex-end;
    padding: 10px 0 2px;
  }

  .x-occ-custom-range-row[hidden] {
    display: none;
  }

  .x-occ-date-field {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
  }

  .x-occ-date-field > span {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
  }

  .x-occ-date-input {
    width: 100%;
    min-height: 44px;
    height: 44px;
    border-radius: 12px;
    border-color: #dbe2ea;
    font-size: 13px;
  }

  .x-occ-range-sep {
    margin-bottom: 13px;
  }

  /* Primary summary: light, readable, less dashboard-like. */
  .x-occ-hero-card {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(15,23,42,.05);
  }

  .x-occ-hero-sublabel {
    color: #64748b;
    font-size: 12px;
    letter-spacing: .2px;
    text-transform: none;
  }

  .x-occ-hero-primary-val {
    color: #0f172a;
    font-size: 28px;
    letter-spacing: -.7px;
    margin: 5px 0 16px;
  }

  .x-occ-hero-metrics-row {
    border-top-color: #eef2f7;
    gap: 12px;
  }

  .x-occ-mini-kpi-val {
    color: #0f172a;
    font-size: 15px;
  }

  .x-occ-mini-kpi-lbl {
    color: #64748b;
    font-size: 11px;
  }

  .x-occ-hero-trend {
    font-size: 11px;
    padding: 4px 8px;
  }

  /* Native-app section rhythm. */
  .x-occ-card {
    padding: 0;
  }

  .x-occ-card-header {
    min-height: 32px;
    margin-bottom: 8px;
  }

  .x-occ-card-title {
    font-size: 15px;
    letter-spacing: -.15px;
  }

  .x-occ-card-link {
    min-height: 40px;
    padding: 8px 0;
    font-size: 12.5px;
  }

  .x-occ-branch-row,
  .x-occ-product-row {
    min-height: 56px;
    padding: 10px 4px;
    border-bottom-color: #eef2f7;
  }

  .x-occ-branch-row {
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
  }

  .x-occ-branch-row:active {
    background: #f8fafc;
  }

  .x-occ-branch-name,
  .x-occ-product-name {
    font-size: 14px;
  }

  .x-occ-branch-orders,
  .x-occ-product-sold {
    font-size: 12px;
  }

  .x-occ-branch-revenue,
  .x-occ-product-revenue {
    font-size: 14px;
  }

  .x-occ-orders-summary-grid {
    gap: 8px;
  }

  .x-occ-order-stat {
    min-height: 68px;
    justify-content: center;
    padding: 9px 4px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e8edf3;
  }

  .x-occ-order-stat-val {
    font-size: 17px;
  }

  .x-occ-order-stat-lbl {
    font-size: 11px;
  }

  .x-occ-attention-section .x-occ-card-body {
    min-height: 48px;
  }

  .x-occ-alert-item {
    min-height: 52px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
  }

  .x-occ-normal-state {
    min-height: 48px;
    padding: 0 2px;
    font-size: 13px;
  }

  /* Quick actions are controls, so make their targets generous and iconography consistent. */
  .x-occ-quick-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .x-occ-quick-chip {
    min-height: 72px;
    padding: 9px 3px;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    background: #ffffff;
  }

  .x-occ-chip-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
  }

  .x-occ-chip-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .x-occ-chip-label {
    font-size: 11px;
    line-height: 1.15;
    color: #334155;
  }

  /* Visible keyboard focus; never leave touch/keyboard users without a state. */
  .x-owner-nav-item:focus-visible,
  .x-occ-quick-chip:focus-visible,
  .x-occ-card-link:focus-visible,
  .x-occ-custom-toggle:focus-visible,
  .x-occ-search-btn:focus-visible,
  .x-occ-period-select:focus-visible,
  .x-occ-date-input:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 2px;
  }

  /* Suppress outline when clicked or tapped */
  .x-owner-nav-item:focus:not(:focus-visible),
  .x-occ-quick-chip:focus:not(:focus-visible),
  .x-occ-card-link:focus:not(:focus-visible),
  .x-occ-custom-toggle:focus:not(:focus-visible),
  .x-occ-search-btn:focus:not(:focus-visible),
  .x-occ-period-select:focus:not(:focus-visible),
  .x-occ-date-input:focus:not(:focus-visible) {
    outline: none;
  }

  .x-owner-nav-item {
    min-height: 48px;
    font-size: 11px;
  }

  .x-owner-nav-item svg {
    width: 23px;
    height: 23px;
  }

  .x-owner-nav-item:not(.active) {
    color: #5f6773;
  }

  /* Loading state. */
  .x-occ-loading-state {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 8px 4px;
  }

  .x-occ-skeleton {
    display: block;
    height: 14px;
    width: 100%;
    border-radius: 7px;
    background: linear-gradient(90deg,#eef2f7 25%,#f8fafc 50%,#eef2f7 75%);
    background-size: 200% 100%;
    animation: x-occ-skeleton-pulse 1.25s ease-in-out infinite;
  }

  .x-occ-skeleton.short {
    width: 58%;
  }

  @keyframes x-occ-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .x-occ-error-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff7f7;
    color: #991b1b;
  }

  .x-occ-error-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }

  .x-occ-error-copy strong {
    font-size: 13px;
  }

  .x-occ-error-copy span {
    font-size: 11.5px;
    color: #b91c1c;
  }

  .x-occ-retry-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #ffffff;
    color: #991b1b;
    font-size: 12px;
    font-weight: 800;
  }
}

@media (prefers-reduced-motion: reduce) {
  .x-occ-skeleton,
  .x-owner-nav-item,
  .x-occ-card-link {
    animation: none !important;
    transition: none !important;
  }
}

@media (min-width: 769px) {
  .x-owner-bottom-nav { display: none !important; }
  #x-topbar-focus-scope { display: contents; }
  .x-owner-command-center { display: none !important; }
  .x-desktop-overview-view { display: block !important; }

  /* Desktop Header: Sembunyikan tombol back mobile di samping judul page, align-left judul & sub */
  .x-owner-mobile-page-back,
  .x-title-back-btn.x-owner-mobile-page-back,
  .x-owner-child-mobile-header button.x-owner-mobile-page-back {
    display: none !important;
  }
  .x-desktop-overview-view .x-owner-mobile-page-sub,
  .x-owner-child-page-shell .x-owner-mobile-page-sub,
  body:not(.x-merchant-app) .x-owner-child-mobile-header .x-owner-mobile-page-sub {
    margin-left: 0 !important;
  }
  .x-desktop-overview-view .x-owner-mobile-page-title,
  .x-owner-child-page-shell .x-owner-mobile-page-title,
  body:not(.x-merchant-app) .x-owner-child-mobile-header .x-owner-mobile-page-title {
    margin-left: 0 !important;
  }

  /* Dropdown .x-occ-dropdown konsisten drop ke bawah di desktop */
  .x-occ-dropdown {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }
  .x-occ-dropdown-trigger {
    width: 100%;
    height: 42px;
    min-height: 42px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-align: left;
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
  }
  .x-occ-dropdown-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .x-occ-dropdown-trigger:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
  }
  .x-occ-dropdown-trigger:focus-visible,
  .x-occ-dropdown-trigger[aria-expanded="true"] {
    background: #ffffff;
    border-color: #334155;
    box-shadow: 0 0 0 2px rgba(51, 65, 85, 0.15);
  }
  .x-occ-dropdown-trigger:disabled,
  .x-occ-dropdown.is-disabled .x-occ-dropdown-trigger {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
  }
  .x-occ-dropdown-trigger .x-occ-chevron-icon {
    position: static;
    flex-shrink: 0;
    color: #64748b;
    transition: transform 0.2s ease;
  }
  .x-occ-dropdown-trigger[aria-expanded="true"] .x-occ-chevron-icon {
    transform: rotate(180deg);
  }
  .x-occ-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    padding: 6px;
    z-index: 220;
    display: none;
    flex-direction: column;
    gap: 2px;
    max-height: min(320px, 50vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }
  .x-occ-dropdown.open .x-occ-dropdown-menu {
    display: flex;
    animation: xOwnerDropdownIn 0.15s ease-out;
  }
  .x-occ-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
    box-sizing: border-box;
  }
  .x-occ-dropdown-item:hover {
    background: #f1f5f9;
    color: #0f172a;
  }
  .x-occ-dropdown-item.active {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 700;
  }
  .x-occ-dropdown-item .x-occ-check-icon {
    opacity: 0;
    color: #0f172a;
    flex-shrink: 0;
    transition: opacity 0.12s ease;
  }
  .x-occ-dropdown-item.active .x-occ-check-icon {
    opacity: 1;
  }
  .x-owner-select-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .x-owner-select-dropdown {
    display: block;
    width: 100%;
  }

  /* ========================================================================
     STANDARDIZED OWNER DESKTOP PAGE LAYOUT TEMPLATE
     Pattern: Judul & Deskripsi Page berada di luar card (mengalir langsung di surface).
     Card membungkus isi data / konfigurasi / tabel yang dipilih (seperti tab Team & Settings).
     ======================================================================== */

  /* Hilangkan card container luar pada halaman list view desktop */
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view,
  body:not(.x-merchant-app) .x-tab-content > #branch-list-view,
  body:not(.x-merchant-app) .x-tab-content > #master-menu-list-view,
  body:not(.x-merchant-app) .x-tab-content > #product-list-view,
  body:not(.x-merchant-app) .x-tab-content > #master-categories-page,
  body:not(.x-merchant-app) .x-tab-content > #customers-list-view > .x-card-panel:first-child {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* Header flex title & action bar di luar card: bersih dan align-left */
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > .x-panel-header-flex,
  body:not(.x-merchant-app) .x-tab-content > #branch-list-view > .x-panel-header-flex,
  body:not(.x-merchant-app) .x-tab-content > #master-menu-list-view > .x-panel-header-flex,
  body:not(.x-merchant-app) .x-tab-content > #product-list-view .x-panel-header-flex,
  body:not(.x-merchant-app) .x-tab-content > #customers-list-view .x-panel-header-flex,
  body:not(.x-merchant-app) .x-tab-content > .x-owner-child-mobile-header,
  body:not(.x-merchant-app) .x-tab-content > #master-categories-page > .x-owner-child-mobile-header,
  body:not(.x-merchant-app) .x-tab-content > .x-owner-stock-view > .x-owner-stock-header,
  body:not(.x-merchant-app) .x-tab-content > .x-content-header {
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Standardisasi Typografi Judul Page di Seluruh Desktop Owner */
  body:not(.x-merchant-app) .x-tab-content .x-owner-mobile-page-title,
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > .x-panel-header-flex h3,
  body:not(.x-merchant-app) .x-tab-content > .x-content-header h2,
  body:not(.x-merchant-app) .x-tab-content > .x-owner-child-mobile-header .x-owner-mobile-page-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--text-main, #0f172a) !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Standardisasi Typografi Deskripsi / Subtitle Page di Seluruh Desktop Owner */
  body:not(.x-merchant-app) .x-tab-content .x-owner-mobile-page-sub,
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > .x-panel-header-flex p,
  body:not(.x-merchant-app) .x-tab-content > .x-content-header p,
  body:not(.x-merchant-app) .x-tab-content > .x-owner-child-mobile-header .x-owner-mobile-page-sub {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted, #64748b) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* Kontrol filter dan tabel/grid pesanan, cabang, pelanggan dibungkus sebagai card */
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > div[style*="display:flex"][style*="flex-wrap"],
  body:not(.x-merchant-app) .x-tab-content > #branch-list-view > div[style*="display:flex"][style*="flex-wrap"] {
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
    padding: 16px 20px;
    margin-top: 0 !important;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  }

  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > .x-table-responsive,
  body:not(.x-merchant-app) .x-tab-content > #branch-list-view > .x-branches-grid {
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
    padding: 0;
    margin-top: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    overflow: hidden;
  }

  body:not(.x-merchant-app) .x-tab-content > #branch-list-view > .x-branches-grid {
    padding: 20px;
  }
}




/* ==========================================================================
   OWNER MOBILE QUICK ACCESS — 2x4 native-app shortcut surface
   ========================================================================== */
@media (max-width: 768px) {
  #occ-quick-access-section.x-occ-quick-access-card {
    background: #ffffff !important;
    border: 1px solid #e5e9ef !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.045) !important;
    padding: 15px 14px 13px !important;
  }

  #occ-quick-access-section .x-occ-card-header {
    min-height: 30px;
    margin-bottom: 7px;
    padding: 0 2px;
  }

  #occ-quick-access-section .x-occ-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #20262e;
    letter-spacing: -.15px;
  }

  #occ-quick-access-section .x-occ-quick-all {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 34px;
    padding: 4px 2px 4px 7px;
    border: 0;
    background: transparent;
    color: #198b3a;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    border-radius: 9px;
    -webkit-tap-highlight-color: transparent;
  }

  #occ-quick-access-section .x-occ-quick-all:active {
    background: #f0f8f1;
  }

  #occ-quick-access-section .x-occ-quick-all:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 2px;
  }

  #occ-quick-access-section .x-occ-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px 3px !important;
    width: 100%;
  }

  #occ-quick-access-section .x-occ-quick-chip {
    min-height: 78px !important;
    padding: 8px 3px 7px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #3b434d;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .14s ease, transform .10s ease;
  }

  #occ-quick-access-section .x-occ-quick-chip:active {
    background: #f6f8fa !important;
    transform: scale(.98);
  }

  #occ-quick-access-section .x-occ-chip-icon {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    font-size: 0 !important;
  }

  #occ-quick-access-section .x-occ-chip-icon img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
  }

  #occ-quick-access-section .x-occ-chip-label {
    max-width: 100%;
    font-size: 11px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    color: #4a525c !important;
    text-align: center;
    white-space: normal;
    word-break: break-word;
  }

  #occ-quick-access-section .x-occ-quick-chip:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: -2px;
  }
}

@media (min-width: 390px) and (max-width: 768px) {
  #occ-quick-access-section .x-occ-quick-chip {
    min-height: 82px !important;
  }
  #occ-quick-access-section .x-occ-chip-label {
    font-size: 11.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #occ-quick-access-section .x-occ-quick-chip,
  #occ-quick-access-section .x-occ-quick-all {
    transition: none !important;
  }
}



/* [MODULARIZED] Stock & Inventory CSS extracted to modules/stock.css */

/* ==========================================================================
   MERCHANT MENU / STOCK — LOCKED MOBILE IA v1
   Shared visual primitives only; screen ownership remains Merchant App.
   ========================================================================== */
.x-merchant-op-panel,
.x-merchant-list-panel {
  box-sizing: border-box;
}
.x-merchant-screen-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.x-merchant-screen-head h3 {
  margin:0 0 4px;
  font-size:18px;
  font-weight:800;
  color:var(--text-main);
}
.x-merchant-screen-head p {
  margin:0;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.5;
}
.x-stock-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
}
.x-stock-summary-item {
  min-width:0;
  padding:12px;
  border:1px solid var(--border-color);
  border-radius:12px;
  background:#fff;
}
.x-stock-summary-item span {
  display:block;
  font-size:11px;
  color:var(--text-muted);
  font-weight:700;
}
.x-stock-summary-item strong {
  display:block;
  margin-top:3px;
  font-size:20px;
  color:var(--text-main);
}
.x-merchant-list-panel { padding:16px 20px; }
.x-merchant-list-tools {
  display:flex;
  gap:10px;
  margin-bottom:14px;
}
.x-merchant-list-tools .x-input:first-child { flex:1 1 auto; min-width:0; }
.x-merchant-list-tools select { width:170px; flex:0 0 170px; }
.x-stock-adjust-btn { font-size:12px; padding:7px 11px; white-space:nowrap; }

/* Fast Availability & Daily Portion Counter UI */
.x-stock-quick-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.x-stock-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.x-stock-item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
.x-stock-item-main {
  flex: 1 1 auto;
  min-width: 0;
}
.x-stock-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.x-stock-item-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}
.x-stock-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.x-stock-item-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.x-stock-item-meta-recipe {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #15803d;
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.4;
}
.x-stock-item-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.x-stock-portion-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 3px 6px;
}
.x-stock-step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
  transition: all .1s ease;
}
.x-stock-step-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.x-stock-step-btn:active:not(:disabled) {
  transform: scale(0.96);
}
.x-stock-step-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.x-stock-portion-display {
  min-width: 44px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  padding: 0 4px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1.2;
}
.x-stock-portion-display:hover {
  background: #e2e8f0;
}
.x-stock-portion-unit {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
}
.x-stock-toggle-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.x-stock-toggle-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.x-stock-toggle-label.is-avail { color: #16a34a; }
.x-stock-toggle-label.is-out { color: #dc2626; }


@media (max-width: 700px) {
  .x-merchant-screen-head { align-items:center; }
  .x-merchant-screen-head h3 { font-size:17px; }
  .x-merchant-screen-head p { font-size:12px; }
  .x-stock-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .x-merchant-list-panel { padding:12px; }
  .x-merchant-list-tools { flex-direction:column; }
  .x-merchant-list-tools select { width:100%; flex:0 0 auto; }
  .x-merchant-mobile-table,
  .x-merchant-mobile-table tbody,
  .x-merchant-mobile-table tr,
  .x-merchant-mobile-table td { display:block; width:100%; box-sizing:border-box; }
  .x-merchant-mobile-table thead { display:none; }
  .x-merchant-mobile-table tr.x-stock-row {
    margin-bottom:10px;
    padding:13px;
    border:1px solid var(--border-color);
    border-radius:14px;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
  }
  .x-merchant-mobile-table td {
    padding:0;
    border:0;
  }
  .x-merchant-mobile-table td[data-label] {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:5px 0;
    font-size:13px;
  }
  .x-merchant-mobile-table td[data-label="Produk"] {
    display:block;
    padding-bottom:9px;
    font-size:15px;
  }
  .x-merchant-mobile-table td[data-label="Aksi"] {
    padding-top:9px;
    margin-top:5px;
    border-top:1px solid #f1f5f9;
  }
  .x-merchant-mobile-table td[data-label]::before {
    content:attr(data-label);
    color:var(--text-muted);
    font-size:11px;
    font-weight:600;
  }
  .x-merchant-mobile-table td[data-label="Produk"]::before { display:none; }
  .x-merchant-mobile-table td[data-label="Aksi"]::before { content:''; }
  .x-stock-adjust-btn { width:100%; min-height:40px; }
  .x-stock-item-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .x-stock-item-controls {
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
  }
}


.x-menu-primary-actions {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.x-menu-search-row {
  display:flex;
  gap:10px;
  margin-top:16px;
}
.x-menu-search-row .x-input:first-child { flex:1 1 auto; min-width:0; }
.x-menu-search-row select { width:190px; flex:0 0 190px; }
.x-menu-category-panel { margin:12px 0; padding:14px 16px; }
.x-menu-category-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
  font-size:13px;
}
.x-menu-category-bar {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.x-menu-category-bar::-webkit-scrollbar { display:none; }
.x-menu-category-bar > * {
  flex:0 0 auto;
}
.x-menu-category-bar .x-cat-filter-btn {
  flex:0 0 auto;
  width:auto;
  min-width:max-content;
  white-space:nowrap;
}
.x-menu-category-chip {
  flex:0 0 auto !important;
  width:max-content;
  max-width:none;
}
.x-menu-category-chip .x-menu-category-name {
  flex:0 0 auto;
  width:auto;
  max-width:none;
  white-space:nowrap;
}

.x-menu-row-actions {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.x-menu-availability-toggle { flex-shrink:0; }

@media (max-width:700px) {
  .x-menu-primary-actions {
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .x-menu-primary-actions .x-btn-primary { grid-column:1 / -1; }
  .x-menu-primary-actions button { min-height:40px; }
  .x-menu-search-row { flex-direction:column; }
  .x-menu-search-row select { width:100%; flex:0 0 auto; }
  .x-menu-category-panel { padding:12px; }
  .x-merchant-mobile-table tr.x-menu-row {
    margin-bottom:10px;
    padding:13px;
    border:1px solid var(--border-color);
    border-radius:14px;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
  }
  .x-merchant-mobile-table td[data-label] {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:5px 0;
    font-size:13px;
  }
  .x-merchant-mobile-table td[data-label="Produk"] {
    display:block;
    padding-bottom:9px;
    font-size:15px;
  }
  .x-merchant-mobile-table td[data-label="Produk"]::before { display:none; }
  .x-merchant-mobile-table td[data-label]::before {
    content:attr(data-label);
    color:var(--text-muted);
    font-size:11px;
    font-weight:600;
  }
  .x-merchant-mobile-table td[data-label="Aksi"] {
    padding-top:10px;
    margin-top:5px;
    border-top:1px solid #f1f5f9;
  }
  .x-menu-row-actions { width:100%; }
  .x-menu-row-actions .x-action-menu-trigger { width:40px; height:40px; }
}


/* ==========================================================================
   MERCHANT MOBILE TOPBAR — FINAL GEOMETRY OVERRIDE
   Two compact rows remain above the scrollable content. No curved content
   frame: the app surface is flat directly beneath the topbar.
   ========================================================================== */
@media (max-width: 768px) {
  .x-merchant-app .x-dash-main {
    position: relative !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .x-merchant-app .x-dash-topbar {
    position: relative !important;
    z-index: 100 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 16px 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15,23,42,.16) !important;
  }

  .x-merchant-app .x-mobile-topbar {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .x-merchant-app .x-mobile-topbar-main {
    min-height: 42px !important;
    height: 42px !important;
    gap: 8px !important;
  }

  .x-merchant-app .x-mobile-topbar-actions {
    gap: 6px !important;
  }

  .x-merchant-app .x-mobile-circle-btn {
    width: 40px !important;
    height: 40px !important;
  }

  
/* ── Finance & Payment (Owner) — mobile ──────────────────────────────────
     Area ini tidak punya aturan mobile sama sekali, jadi di HP ia memakai tata
     letak desktop: lima tab yang harus digeser ke samping, kartu statistik satu
     kolom yang memakan hampir satu layar, dan jarak antar-blok 24px. Blok ini
     yang membuatnya terasa seperti aplikasi HP, bukan halaman yang diperkecil. */

  /* Transaksi: tabel tujuh kolom tidak terbaca di HP walau bisa digeser ke samping.
     Tiap baris jadi satu kartu ringkas — label di kiri, nilainya di kanan — dan
     kolom ID internal disembunyikan karena tidak berguna bagi pemilik. */
  #table-fin-transactions thead { display: none !important; }

  #table-fin-transactions,
  #table-fin-transactions tbody,
  #table-fin-transactions tr,
  #table-fin-transactions td {
    display: block !important;
    width: 100% !important;
  }

  #table-fin-transactions tr {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }

  #table-fin-transactions td {
    border: 0 !important;
    padding: 3px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    text-align: right !important;
  }

  #table-fin-transactions td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-align: left;
  }

  #table-fin-transactions td[data-label="ID Transaksi"] { display: none !important; }

  /* ── Produk Master (Owner) — mobile ───────────────────────────────────────
     Tabel tujuh kolom tidak terbaca di HP. Di layar kecil tiap baris jadi kartu
     seperti daftar menu di PWA customer: foto di kiri, teks di kanannya, dan aksi
     di kanan. Label kolom tidak ditulis — susunannya sudah menjelaskan dirinya. */
  #master-products-table thead { display: none !important; }

  #master-products-table,
  #master-products-table tbody { display: block !important; width: 100% !important; }

  #master-products-table tr {
    display: grid !important;
    width: 100% !important;
    /* Teks di kiri (rata kiri), foto di kanan atas, dan di bawah foto toggle
       bersama tombol aksi sejajar dalam satu baris. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "nama   foto   foto"
      "kat    foto   foto"
      "harga  foto   foto"
      "mode   toggle aksi";
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }

  #master-products-table td {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
    font-size: 13px;
    color: #475569;
  }

  /* Label kolom tidak dipakai lagi. */
  #master-products-table td::before { content: none !important; }

  #master-products-table td:nth-child(1) { grid-area: foto; }
  #master-products-table td:nth-child(2) { grid-area: nama; }
  #master-products-table td:nth-child(3) { grid-area: kat; }
  #master-products-table td:nth-child(4) { grid-area: harga; }
  #master-products-table td:nth-child(5) { grid-area: mode; }
  /* Toggle dan tombol aksi: terpusat di kolomnya masing-masing, bukan menempel kiri.
     Sel-nya dibuat flex supaya isinya benar-benar di tengah, termasuk kalau isinya
     beberapa elemen (mis. dua tombol). */
  #master-products-table td:nth-child(6),
  #master-products-table td:nth-child(7) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    text-align: center !important;
  }
  #master-products-table td:nth-child(6) { grid-area: toggle; align-self: center; }
  #master-products-table td:nth-child(7) { grid-area: aksi; align-self: center; }

  /* Foto: kotak membulat seperti kartu menu di PWA customer. Ukurannya dinaikkan dan
     memakai object-fit: contain supaya gambar tampil utuh dan proporsional — dengan
     cover, foto yang bukan persegi akan terpotong. */
  #master-products-table td:nth-child(1) img,
  #master-products-table td:nth-child(1) > * {
    width: 96px !important;
    height: 96px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 14px !important;
    object-fit: contain !important;
    display: block !important;
    background: #f1f5f9;
  }

  /* Nama produk jadi judul kartunya. */
  #master-products-table td:nth-child(2) {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #15191c !important;
  }

  /* Harga dan status sedikit lebih menonjol daripada keterangan lain. */
  #master-products-table td:nth-child(4) { font-weight: 700 !important; color: #15191c !important; }

  /* ── Produk Master (Owner): kartu hanya judul, sisanya langsung di panel ─────
     Panelnya bukan lagi kartu — kartunya hanya membungkus judul, deskripsi, dan CTA.
     Pencarian, pemilih kategori, dan daftar produk mengalir langsung di panel. */
  /* Panel Produk Master: tampilan kartunya dilepas.
     Jarak kiri-kanan TIDAK diatur di sini — induknya (.x-tab-content) sudah memberi 12px.
     Nilainya disamakan persis dengan Beranda (.x-owner-command-center: 4px 0 10px),
     jadi kedua halaman punya lebar isi yang sama. Sebelumnya di sini ada 24px yang
     ditambahkan di atas 12px milik induk, sehingga sisinya menjadi 36px dan terasa
     terlalu lebar. */
  #product-list-view.x-card-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 10px !important;
  }
  #product-list-view > .x-master-products-head {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Page Kategori (tab Bisnis) disamakan dengan Produk Master: kartunya hanya membungkus
   judul dan deskripsi, sedangkan tab, toolbar, dan daftar kartu kategorinya mengalir
   langsung di panel. Jarak dari top bar memakai nilai yang sama dengan Beranda. */
#tab-catalog-categories > .x-card-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 10px !important;
}

#tab-catalog-categories .x-panel-header-flex {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 14px;
}

/* Jarak antar blok dirapatkan supaya iramanya sama dengan Produk Master. */
#tab-catalog-categories .x-subnav-tabs {
  margin-bottom: 14px !important;
}

#tab-catalog-categories .x-master-reference-toolbar {
  margin-bottom: 14px !important;
}

/* Tombol tambah Kategori/Rasa: bulat, hanya ikon plus, tanpa teks. Dipakai bersama
   kedua halaman, jadi satu perubahan berlaku untuk keduanya. */
.x-master-add-round {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

#product-list-view .x-master-products-head {
    margin-bottom: 18px !important;
  }

  /* CTA Tambah Produk Baru: tinggi dan radiusnya mengikuti form pencarian di bawahnya.
     Form itu memakai .x-input (padding 10px 14px, radius var(--radius-sm), font 14px,
     tanpa height tetap), jadi token yang sama dipakai di sini — tingginya jadi sama
     tanpa menebak angka piksel. */
  #product-list-view #btn-add-product-main {
    padding: 10px 14px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }

  /* Jarak sebelum CTA. Di layar sempit judul+deskripsi dan CTA-nya berbaris terpisah
     (header-nya flex-wrap), jadi jaraknya ditentukan row-gap — dan itu terlalu rapat.
     Ditambah di sini supaya CTA tidak menempel ke deskripsi. */
  #product-list-view .x-master-products-head .x-panel-header-flex {
    row-gap: 18px !important;
  }
  #product-list-view .x-master-products-head .x-header-buttons {
    margin-top: 4px !important;
  }

  /* Judul & keterangan Produk Master/Kategori memakai blok header child page yang
     sama dengan Tambah Produk (.x-owner-child-mobile-header). Tidak ada ukuran,
     warna, atau offset khusus per halaman di sini — satu gaya untuk semua. */

  /* Pencarian ditumpuk penuh lebar dengan jarak atas 18px dari header */
  #product-list-view > .x-master-products-search-wrap {
    display: block !important;
    margin-top: 18px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
  }
  /* Kolom pencarian */
  #product-list-view > .x-master-products-search-wrap > div {
    min-width: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  #product-list-view #prod-search-input,
  #product-list-view #prod-filter-category {
    width: 100% !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  /* Container Card Panel Item Master: Konsisten Sama Persis dengan Kategori */
  #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;
  }

  #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;
  }
  #product-list-view .x-filter-pills > div,
  #product-list-view .x-filter-pills .x-filter-pills-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
  }
  #product-list-view .x-filter-pills .x-filter-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  #product-list-view .x-filter-pills .x-btn-round-add,
  #product-list-view #btn-add-item-round {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    margin-left: auto !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Chip kategori yang bisa digeser ke samping: disembunyikan, bukan dihapus. */
  #catalog-products-category-chips {
    display: none !important;
  }

  /* Kartu statistik: dua kolom, bukan satu kartu per baris setinggi layar. */
  .x-finance-subview .x-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .x-finance-subview .x-stat-card {
    padding: 12px !important;
  }

  .x-finance-subview .x-stat-value {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  /* Jarak antar-blok dirapatkan supaya tidak banyak ruang terbuang di layar kecil. */
  .x-finance-subview > * {
    margin-bottom: 14px !important;
  }

  .x-merchant-app .x-mobile-branch-pill {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 20px !important;
  }

  .x-merchant-app .x-mobile-operational-row {
    height: 34px !important;
    min-height: 34px !important;
    margin-top: 6px !important;
    gap: 8px !important;
  }

  .x-merchant-app .x-mobile-status-control {
    height: 34px !important;
    min-height: 34px !important;
    min-width: 0 !important;
    border-radius: 17px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .x-merchant-app .x-mobile-online-control {
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 4px !important;
  }

  .x-merchant-app .x-tab-content.active {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding-top: 12px !important;
  }

  .x-merchant-app .x-tab-content {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}


/* ==========================================================================
   MERCHANT MENU — LOCKED HIERARCHICAL NATIVE IA v2
   Menu is a module hub -> categories -> items. Reuses existing shell/cards.
   ========================================================================== */
.x-menu-view { display:none; }
.x-menu-view.is-active { display:block; }

.x-menu-native-head {
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:48px;
  margin-bottom:16px;
  padding:0 2px;
}
.x-menu-native-head > div:first-child { min-width:0; flex:1; }
.x-menu-native-head-copy { min-width:0; flex:1; display:flex; flex-direction:column; justify-content:flex-start; }
.x-menu-native-head h3,
.x-menu-native-head-copy h3 {
  margin:0;
  color:var(--text-main);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size:22px;
  line-height:36px;
  height:36px;
  font-weight:800;
  display:flex;
  align-items:center;
}
.x-menu-native-head p,
.x-menu-native-head-copy p {
  margin:4px 0 0;
  color:var(--text-muted);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size:12.5px;
  line-height:1.4;
}
.x-menu-back-btn,
.x-menu-more-btn {
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:var(--text-main);
  border-radius:50%;
  cursor:pointer;
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.x-menu-back-btn {
  line-height:0;
}
.x-menu-back-btn svg {
  display:block;
  margin:auto;
}
.x-menu-back-btn:active,
.x-menu-more-btn:active { background:#eef2f4; }
.x-menu-more-btn {
  border:1px solid var(--border-color);
  background:#ffffff;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.x-menu-hub-card,
.x-menu-category-list,
.x-menu-detail-list-panel {
  background:#fff;
  border:1px solid var(--border-color);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.x-menu-hub-row {
  width:100%;
  min-height:88px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border:0;
  border-bottom:1px solid #edf0f2;
  background:#fff;
  color:var(--text-main);
  text-align:left;
  cursor:pointer;
}
.x-menu-hub-row:last-child { border-bottom:0; }
.x-menu-hub-row:active { background:#f7faf8; }
.x-menu-hub-icon {
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#4b5563;
}
.x-menu-hub-copy { min-width:0; flex:1; display:flex; flex-direction:column; }
.x-menu-hub-copy strong { font-size:16px; font-weight:800; }
.x-menu-hub-copy small { margin-top:4px; color:var(--text-muted); font-size:12.5px; line-height:1.45; }
.x-menu-hub-chevron { flex:0 0 auto; color:#5f6368; }
.x-menu-hub-row-disabled { cursor:default; }
.x-menu-hub-row-disabled .x-menu-hub-icon,
.x-menu-hub-row-disabled .x-menu-hub-copy { opacity:.72; }
.x-menu-coming-soon {
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  background:#f1f3f5;
  color:#7a8188;
  font-size:10px;
  font-weight:800;
}
.x-menu-tip-card {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
  padding:14px 16px;
  border-radius:16px;
  background:#fffaf0;
  border:1px solid #f3ead7;
}
.x-menu-tip-card > span { font-size:20px; line-height:1; }
.x-menu-tip-card strong { display:block; font-size:13px; }
.x-menu-tip-card small { display:block; margin-top:3px; color:var(--text-muted); font-size:11.5px; line-height:1.45; }

.x-menu-category-actions {
  display:none !important;
}
.x-menu-primary-cta,
.x-menu-secondary-cta {
  min-height:42px;
  border-radius:21px;
  padding:0 16px;
  border:1px solid var(--border-color);
  font-weight:800;
  cursor:pointer;
}
.x-menu-primary-cta {
  flex:1;
  border-color:#0b8f20;
  background:#0b8f20;
  color:#fff;
}
.x-menu-secondary-cta { background:#fff; color:var(--text-main); }

.x-menu-category-tabs {
  display:flex;
  gap:24px;
  min-height:46px;
  border-bottom:1px solid #e6e8ea;
  margin-bottom:16px;
}
.x-menu-category-tabs button {
  position:relative;
  border:0;
  background:transparent;
  padding:0 6px 10px;
  color:#8b9095;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.x-menu-category-tabs button.is-active { color:var(--text-main); }
.x-menu-category-tabs button.is-active::after {
  content:'';
  position:absolute;
  left:-4px;
  right:-4px;
  bottom:-1px;
  height:3px;
  border-radius:3px 3px 0 0;
  background:#0b8f20;
}
.x-menu-category-list {
  background:#ffffff;
  border:1px solid var(--border-color);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.x-menu-category-list.is-empty,
.x-menu-category-list:has(.x-menu-empty-state) {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.x-menu-empty-state {
  text-align:center;
  color:var(--text-muted, #8b9095);
  font-size:13.5px;
  font-weight:500;
  line-height:1.5;
  padding:48px 16px;
  margin:0 auto;
  max-width:320px;
}
.x-menu-category-row {
  border-bottom:1px solid #f1f3f5;
  transition:background-color .15s ease;
}
.x-menu-category-row:last-child { border-bottom:0; }
.x-menu-category-row:hover { background-color:#fafbfc; }
.x-menu-category-main {
  width:100%;
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border:0;
  background:transparent;
  color:var(--text-main);
  text-align:left;
  cursor:pointer;
  box-sizing:border-box;
}
.x-menu-category-main:active { background:#f4f6f8; }
.x-menu-category-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.x-menu-category-copy strong { font-size:15px; font-weight:700; color:var(--text-main); letter-spacing:-0.2px; }
.x-menu-category-copy small { color:#16a34a; font-size:12px; font-weight:600; }
.x-menu-category-row-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.x-menu-category-edit {
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:#64748b;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  cursor:pointer;
  transition:color .15s ease, background-color .15s ease;
}
.x-menu-category-edit:hover { color:#1e293b; background:#f1f5f9; }
.x-menu-category-edit:active { background:#e2e8f0; }

.x-menu-detail-tools {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
.x-menu-detail-tools .x-input:first-child {
  flex:1;
  min-width:0;
  height:42px;
  border-radius:12px;
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size:13.5px;
  background:#f8fafc;
  border:1px solid #cbd5e1;
}
.x-menu-detail-tools .x-input:first-child:focus {
  background:#ffffff;
  border-color:#334155;
  box-shadow:0 0 0 2px rgba(51,65,85,0.15);
}
.x-menu-detail-tools .x-menu-filter-dropdown {
  flex:0 0 170px;
  width:170px;
}
.x-menu-detail-tools .x-menu-filter-dropdown .x-occ-dropdown-trigger {
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size:13px;
  font-weight:600;
  color:#334155;
}
.x-menu-detail-tools .x-menu-filter-dropdown .x-occ-dropdown-menu {
  min-width:180px;
}
.x-menu-detail-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:34px;
  padding:0 4px 10px;
  color:var(--text-muted);
  font-size:12px;
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
.x-menu-detail-summary strong { color:var(--text-main); font-weight:700; }
.x-menu-detail-list-panel {
  padding:0;
  background:#ffffff;
  border:1px solid var(--border-color);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.x-menu-detail-list-panel.is-empty,
.x-menu-detail-list-panel:has(.x-menu-empty-state) {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.x-menu-detail-list-panel.is-empty .table-responsive,
.x-menu-detail-list-panel.is-empty .x-table {
  background:transparent !important;
  border:none !important;
}

@media (max-width:700px) {
  .x-menu-native-head { min-height:44px; margin-bottom:14px; gap:10px; align-items:flex-start; }
  .x-menu-native-head-copy { padding-top:0; }
  .x-menu-native-head h3,
  .x-menu-native-head-copy h3 { font-size:18px; line-height:34px; height:34px; }
  .x-menu-native-head p,
  .x-menu-native-head-copy p { font-size:11.5px; }
  .x-menu-back-btn,
  .x-menu-more-btn { flex:0 0 34px; width:34px; height:34px; }
  .x-menu-hub-row { min-height:84px; padding:14px 14px; gap:10px; }
  .x-menu-hub-icon { flex-basis:36px; width:36px; height:36px; }
  .x-menu-hub-icon svg { width:22px; height:22px; }
  .x-menu-hub-copy strong { font-size:15px; }
  .x-menu-hub-copy small { font-size:11.5px; }
  .x-menu-coming-soon { font-size:9px; padding:4px 7px; }
  .x-menu-category-tabs { margin-bottom:12px; }
  .x-menu-category-main { min-height:64px; padding:12px 14px; gap:10px; }
  .x-menu-category-copy strong { font-size:14.5px; }
  .x-menu-category-copy small { font-size:11.5px; }
  .x-menu-detail-tools { flex-direction:column; gap:8px; }
  .x-menu-detail-tools .x-menu-filter-dropdown { width:100%; flex:0 0 auto; }
  .x-menu-detail-list-panel .x-merchant-mobile-table tr.x-menu-row { border-radius:0; border-left:0; border-right:0; margin-bottom:0; box-shadow:none; }
  .x-menu-detail-list-panel.is-empty .x-merchant-mobile-table tr,
  .x-menu-detail-list-panel.is-empty .x-merchant-mobile-table td {
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
  }
}

/* Category Modal Status Buttons (Aktif / Nonaktif) */
.x-category-modal-status-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 20px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color, #e2e8f0);
}

.x-category-modal-status-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main, #0f172a);
}

.x-category-modal-status-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.x-btn-status-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: all 0.15s ease;
  background: #ffffff;
}

/* Aktif button clickable state: green text + green border */
.x-btn-status-toggle.x-btn-status-active {
  border: 1.5px solid #16a34a;
  color: #16a34a;
}
.x-btn-status-toggle.x-btn-status-active:not(:disabled):hover {
  background: #f0fdf4;
}

/* Nonaktif button clickable state: red text + red border */
.x-btn-status-toggle.x-btn-status-inactive {
  border: 1.5px solid #dc2626;
  color: #dc2626;
}
.x-btn-status-toggle.x-btn-status-inactive:not(:disabled):hover {
  background: #fef2f2;
}

/* Disabled state: gray background, gray border, gray text, not-allowed */
.x-btn-status-toggle:disabled {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}


/* ==========================================================================
   OWNER MASTER CATEGORY MANAGEMENT PAGE
   ========================================================================== */
.x-master-category-page-list{
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid var(--border-color,#e2e8f0);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.x-master-category-page-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border:0;
  border-bottom:1px solid #edf1f5;
  background:#fff;
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease;
}
.x-master-category-page-row:last-child{border-bottom:0;}
.x-master-category-page-row:hover{background:#f8fafc;}
.x-master-category-page-row:focus-visible{
  outline:2px solid #16a34a;
  outline-offset:-2px;
}
.x-master-category-page-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.x-master-category-page-main strong{
  font-size:15px;
  line-height:1.3;
  color:#0f172a;
}
.x-master-category-page-main span{
  font-size:12px;
  color:#94a3b8;
}
.x-master-category-page-chevron{
  display:inline-flex;
  align-items:center;
  color:#94a3b8;
  flex:0 0 auto;
}
@media(max-width:768px){
  .x-master-category-page-row{padding:16px 14px;}
}


/* [MODULARIZED] Catalog, Master Reference & Editor CSS extracted to modules/catalog.css */

/* ==========================================================================
   OWNER MOBILE SURFACE SYSTEM v1
   Route pages keep the same data/logic, but dense desktop structures become
   touch-first mobile surfaces. Shell ownership remains separate.
   ========================================================================== */
@media (max-width: 768px) {
  /* Every Owner route gets one consistent mobile gutter. Individual screens may
     intentionally remove their card chrome, but the viewport rhythm stays shared. */
  body:not(.x-merchant-app) .x-tab-content {
    padding: 12px !important;
    box-sizing: border-box;
  }

  body:not(.x-merchant-app) .x-tab-content > .x-card-panel {
    border-radius: 16px;
  }

  /* Secondary navigation is a horizontally scrollable mobile control, never a
     compressed desktop row. */
  body:not(.x-merchant-app) .x-subnav-tabs {
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-bottom: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.x-merchant-app) .x-subnav-tabs::-webkit-scrollbar { display:none; }
  body:not(.x-merchant-app) .x-subnav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    line-height: 1;
  }
  body:not(.x-merchant-app) .x-subnav-tab.active {
    border-color: #111827;
    background: #111827;
    color: #fff;
  }

  /* Orders: modern mobile card feed for incoming orders queue */
  #orders-list-view {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > div[style*="display:flex"][style*="flex-wrap"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 12px !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > div[style*="display:flex"][style*="flex-wrap"] > div:first-child {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > div[style*="display:flex"][style*="flex-wrap"] > div {
    min-width: 0 !important;
    flex: unset !important;
  }
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > div[style*="display:flex"][style*="flex-wrap"] .x-input {
    font-size: 13px !important;
    padding: 8px 10px !important;
    height: 38px !important;
    box-sizing: border-box !important;
  }
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > div[style*="display:flex"][style*="flex-wrap"] > div:first-child .x-input {
    padding-left: 34px !important;
  }
  body:not(.x-merchant-app) .x-tab-content > #orders-list-view > .x-table-responsive {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin-top: 4px !important;
  }
  #orders-list-view .x-table {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  #orders-list-view .x-table thead {
    display: none;
  }
  #orders-list-view .x-table tbody {
    display: block;
    width: 100%;
  }
  #orders-list-view .x-table tbody tr {
    display: block;
    width: 100%;
  }
  #orders-list-view .x-table tbody tr:has(td[colspan]) td {
    display: block !important;
    width: 100% !important;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 32px 16px !important;
    text-align: center !important;
    color: #64748b;
    font-size: 13px;
    box-sizing: border-box;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "header status"
      "meta meta"
      "customer customer"
      "badges badges"
      "total total"
      "actions actions";
    gap: 8px 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
  }
  /* Reset general table cells in card */
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td {
    border: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.4;
    min-width: 0;
    box-sizing: border-box;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td::before {
    display: none !important;
  }
  /* Cell 1: Order Number link */
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(1) {
    grid-area: header;
    font-size: 15px;
    font-weight: 700;
    align-self: center;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(1) a {
    color: #0f172a !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }
  /* Cell 8: Status Badge */
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(8) {
    grid-area: status;
    justify-self: end;
    align-self: center;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(8) .x-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.02em;
  }
  /* Cell 2 & 3: Time & Branch info */
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(2) {
    grid-area: meta;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #64748b;
    font-size: 12px;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(3) {
    grid-area: meta;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
  }
  /* Cell 4: Customer */
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(4) {
    grid-area: customer;
    background: #f8fafc;
    border-radius: 8px;
    padding: 8px 10px !important;
    color: #1e293b;
    font-size: 12px;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(4) strong {
    color: #0f172a;
    font-weight: 600;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(4) .text-muted {
    color: #64748b !important;
    margin-left: 4px;
  }
  /* Cell 5 & 6: Channel & Fulfillment badges */
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(5) {
    grid-area: badges;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(6) {
    grid-area: badges;
    display: inline-flex !important;
    align-items: center;
    justify-self: end;
  }
  /* Cell 7: Total */
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(7) {
    grid-area: total;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px !important;
    margin-top: 4px;
    border-top: 1px dashed #e2e8f0 !important;
    font-size: 14px;
    color: #0f172a;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(7)::before {
    display: inline-block !important;
    content: "Total Tagihan";
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(7) strong {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
  }
  /* Cell 9: Action Buttons (Only visible when pending order can be accepted) */
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(9) {
    grid-area: actions;
    width: 100%;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(9):empty {
    display: none !important;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(9) .x-item-actions {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 6px !important;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(9) .x-item-actions:empty {
    display: none !important;
  }
  #orders-list-view .x-table tbody tr:not(:has(td[colspan])) td:nth-child(9) .x-btn-primary {
    width: 100% !important;
    flex: 1 1 100% !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
  }

  /* Customers: same transformation, but preserve the richer customer identity row. */
  #customers-list-view .x-table-responsive {
    overflow: visible !important;
  }
  #customers-list-view .x-data-table {
    display: block;
  }
  #customers-list-view .x-data-table thead { display:none; }
  #customers-list-view .x-data-table tbody,
  #customers-list-view .x-data-table tr {
    display:block;
    width:100%;
  }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) {
    margin-bottom:10px;
    padding:13px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
    box-shadow:0 1px 3px rgba(15,23,42,.04);
  }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:5px 0;
    border:0;
    font-size:12px;
    text-align:right;
    box-sizing:border-box;
  }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td::before {
    flex:0 0 auto;
    color:#64748b;
    font-size:10px;
    font-weight:700;
    text-align:left;
  }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td:nth-child(1)::before { content:"Pelanggan"; }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td:nth-child(2)::before { content:"Kontak"; }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td:nth-child(3)::before { content:"Pesanan"; }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td:nth-child(4)::before { content:"Belanja"; }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td:nth-child(5)::before { content:"AOV"; }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td:nth-child(6)::before { content:"Cabang"; }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td:nth-child(7)::before { content:"Segmen"; }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td:nth-child(8)::before { content:"Terakhir"; }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td:nth-child(9) {
    justify-content:flex-end;
    padding-top:10px;
    margin-top:5px;
    border-top:1px solid #f1f5f9;
  }
  #customers-list-view .x-data-table tbody tr:not(:has(td[colspan])) td:nth-child(9)::before { content:""; }

  /* Settings: category navigation becomes a horizontal mobile selector instead
     of a desktop sidebar occupying the first screen. */
  #tab-settings .settings-layout {
    display:block;
    margin-top:0;
  }
  #tab-settings .settings-sidebar {
    width:100% !important;
    padding:2px 0 8px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    overflow-x:auto;
    display:flex;
    gap:6px;
    flex-wrap:nowrap;
    scrollbar-width:none;
  }
  #tab-settings .settings-sidebar::-webkit-scrollbar { display:none; }
  #tab-settings .settings-sidebar > div {
    flex:0 0 auto;
  }
  #tab-settings .settings-sidebar > div[style*="flex-direction:column"] {
    display:flex !important;
    flex-direction:row !important;
    gap:6px !important;
    margin:0 !important;
  }
  #tab-settings .settings-sidebar button {
    flex:0 0 auto;
    width:auto !important;
    min-height:40px;
    padding:0 13px !important;
    border:1px solid #e5e7eb !important;
    border-radius:999px !important;
    background:#fff !important;
    white-space:nowrap;
  }
  #tab-settings .settings-sidebar button.active {
    background:#111827 !important;
    border-color:#111827 !important;
    color:#fff !important;
  }
  #tab-settings .settings-content-panel {
    margin-top:6px;
  }

  /* Reports: filters become a compact vertical control block; summary cards stay
     two-up, while the actual report data owns horizontal scrolling if necessary. */
  #tab-reports .x-filter-bar {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:12px;
    margin-bottom:14px;
  }
  #tab-reports .x-filter-group {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  #tab-reports .x-filter-group label,
  #tab-reports .x-filter-group > span {
    grid-column:1 / -1;
  }
  #tab-reports .x-filter-group button {
    min-height:40px;
  }
  #tab-reports #reports-subnav {
    margin-bottom:12px;
  }
  #tab-reports .x-metrics-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  /* Marketing: its sub-navigation and stat surfaces follow the same touch rhythm. */
  #tab-marketing .x-content-header,
  #tab-finance .x-content-header {
    display:block !important;
    margin-bottom:12px !important;
  }
  #tab-marketing .x-stat-grid,
  #tab-finance .x-stat-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  #tab-marketing .x-stat-card,
  #tab-finance .x-stat-card {
    min-width:0;
    padding:12px !important;
  }

  /* Branch list already uses cards; reduce desktop spacing and make the primary
     action full-width so it behaves like a mobile task screen. */
  #tab-branches #branch-list-view {
    padding:14px !important;
    border-radius:16px;
  }
  #tab-branches #branch-list-view > .x-panel-header-flex {
    align-items:stretch;
  }
  #tab-branches #branch-list-view > .x-panel-header-flex .x-btn-primary {
    width:100%;
    min-height:42px;
  }
  #tab-branches .x-branches-grid {
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  /* Catalog branch menu header: action controls stack rather than squeeze. */
  #tab-catalog-menus .x-header-buttons,
  #tab-catalog .x-header-buttons {
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  #tab-catalog-menus .x-header-buttons button,
  #tab-catalog .x-header-buttons button {
    width:100%;
    min-height:42px;
  }
}

@media (max-width: 420px) {
  body:not(.x-merchant-app) .x-tab-content {
    padding: 10px !important;
  }
  #orders-list-view .x-panel-header h3,
  #customers-list-view .x-panel-header h3 {
    font-size:16px;
  }
  #tab-reports .x-metrics-grid,
  #tab-marketing .x-stat-grid,
  #tab-finance .x-stat-grid {
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   Master Product Composition — Native choice chips
   Replaces form-select / checkbox presentation while keeping
   the existing structured composition state and API contract.
   ========================================================= */
.x-master-choice-group {
  margin-bottom: 16px;
}

.x-master-choice-label-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.x-master-choice-label-row label {
  font-size:13px;
  font-weight:700;
  color:#111827;
}

.x-master-choice-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  width:100%;
}

.x-master-choice-chip {
  position:relative;
  min-width:0;
  min-height:44px;
  padding:8px 10px;
  border:1px solid #d8d8d8;
  border-radius:9px;
  background:#fff;
  color:#4b5563;
  font:inherit;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease,
    transform .08s ease;
}

.x-master-choice-chip:hover {
  border-color:#b9b9b9;
}

.x-master-choice-chip:active {
  transform:scale(.98);
}

.x-master-choice-chip:focus-visible {
  outline:2px solid #111827;
  outline-offset:2px;
}

.x-master-choice-chip.is-selected {
  background:#b6ff00;
  border-color:#b6ff00;
  color:#111827;
}

.x-master-choice-chip.x-master-choice-empty-chip {
  color:#6b7280;
}

.x-master-choice-chip.x-master-choice-empty-chip.is-selected {
  background:#111827;
  border-color:#111827;
  color:#fff;
}

.x-master-choice-add {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-style:dashed;
  color:#6b7280;
  background:#fff;
}

.x-master-choice-add > span:first-child {
  font-size:18px;
  line-height:1;
  font-weight:500;
}

.x-master-choice-add:hover {
  border-color:#9ca3af;
  background:#fafafa;
  color:#111827;
}

.x-master-native-select {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-width:1px !important;
  min-height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.x-master-select-with-add {
  display:grid;
  grid-template-columns:minmax(0,1fr) 50px;
  gap:10px;
  align-items:center;
}

.x-master-select-with-add .x-input {
  width:100%;
  min-height:46px;
  margin:0;
}

.x-master-select-add {
  width:50px;
  height:46px;
  padding:0;
  border:1px solid #d8d8d8;
  border-radius:9px;
  background:#fff;
  color:#111827;
  font:inherit;
  font-size:22px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}

.x-master-select-add:hover {
  border-color:#b9b9b9;
  background:#fafafa;
}

.x-master-select-add:active {
  transform:scale(.97);
}

.x-master-select-add:focus-visible {
  outline:2px solid #111827;
  outline-offset:2px;
}

.x-master-spice-level {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:36px;
}

.x-master-spice-level-label {
  flex:0 0 auto;
  min-width:130px;
  min-height:44px;
  padding:0 14px;
  border-radius:8px;
  background:#1f1f1f;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}

.x-master-spice-level-segments {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.x-master-spice-level-segment {
  width:49px;
  height:44px;
  padding:0;
  border:1px solid #d8d8d8;
  border-radius:8px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}

.x-master-spice-level-segment > span {
  display:none;
}

.x-master-spice-level-segment.is-filled {
  border-color:#ef4444;
  background:#ef4444;
}

.x-master-spice-level-segment:active {
  transform:scale(.94);
}

.x-master-spice-level-segment:focus-visible {
  outline:2px solid #111827;
  outline-offset:2px;
}

.x-master-spice-level-empty {
  font-size:11px;
  color:#94a3b8;
}

.x-master-complement-grid .x-master-complement-chip {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.x-master-choice-empty {
  margin-top:7px;
  font-size:11px;
  padding:4px 0;
}

@media (max-width: 420px) {
  .x-master-choice-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  .x-master-choice-chip {
    min-height:43px;
    padding:7px 6px;
    font-size:11px;
    border-radius:8px;
  }

  .x-master-spice-level {
    gap:8px;
  }

  .x-master-spice-level-segments {
    gap:7px;
    overflow-x:auto;
    padding-bottom:2px;
  }

  .x-master-spice-level-segment {
    flex:0 0 44px;
    width:44px;
    height:42px;
  }

  .x-master-spice-level-label {
    min-width:112px;
    min-height:42px;
    padding:0 10px;
  }
}


/* OWNER — MASTER PRODUCT PEDAS INDICATOR */
.x-master-product-spice-indicator {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:5px;
  color:#ef4444;
  font-size:10px;
  line-height:13px;
  font-weight:700;
  white-space:nowrap;
}
.x-master-product-spice-label {
  flex:0 0 auto;
}
.x-master-product-spice-dots {
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.x-master-product-spice-dot {
  width:6px;
  height:6px;
  flex:0 0 6px;
  border:1.25px solid #e2e8f0;
  border-radius:50%;
  background:transparent;
  box-sizing:border-box;
}
.x-master-product-spice-dot.is-filled {
  background:#ef4444;
  border-color:#ef4444;
}

/* ==========================================================================
   OWNER — PRODUCT EDITOR CARD STACK
   Keep the Master Product form and POS-only option configuration as separate
   visual cards while preserving one form submission contract.
   ========================================================================== */
.x-product-editor-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.x-product-editor-main-card,
.x-product-editor-pos-card {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px 22px;
}

.x-product-editor-main-card {
  max-width: 920px;
  margin: 0 auto;
}

.x-product-editor-pos-card {
  max-width: 920px;
  margin: 0 auto;
}

.x-product-editor-pos-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.x-product-editor-pos-card-header h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
}

.x-product-editor-pos-card-header p {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.x-product-pos-options-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.x-product-pos-add-group {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
}

.x-product-editor-pos-help {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}

.x-product-editor-actions {
  max-width: 920px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 2px 0 4px;
}

.x-product-editor-actions button {
  min-height: 42px;
  padding: 10px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 768px) {
  .x-product-editor-form {
    gap: 12px;
  }

  .x-product-editor-main-card,
  .x-product-editor-pos-card {
    padding: 16px 14px;
    border-radius: 12px;
  }

  .x-product-editor-pos-card-header {
    margin-bottom: 12px;
  }

  .x-product-editor-pos-card-header h3 {
    font-size: 14px;
  }

  .x-product-editor-actions {
    padding: 2px 0 8px;
  }
}

/* ==========================================================================
   OWNER — SHARED CHILD PAGE HEADER
   One presentation pattern for all secondary/focused pages:
   chevron-left + title + subtitle. Navigation semantics live in the router.
   ========================================================================== */
.x-owner-child-mobile-header {
  display: block;
  min-width: 0;
  margin: 0 0 16px;
}

/* Kalau blok header berdampingan dengan tombol aksi di satu baris flex (Produk
   Master, Cabang, Pelanggan), jarak ke tombolnya diatur oleh baris itu sendiri
   (gap), bukan margin bawah blok header. Gaya chevron/judul/deskripsi tetap sama. */
.x-panel-header-flex > .x-owner-child-mobile-header {
  margin-bottom: 0;
}

.x-owner-child-legacy-nav {
  display: none !important;
}

.x-owner-child-mobile-header .x-owner-mobile-page-title,
body:not(.x-merchant-app) .x-owner-mobile-page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  color: #111827;
}

.x-owner-mobile-page-title > span:first-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.x-owner-mobile-page-back,
.x-title-back-btn.x-owner-mobile-page-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: #f1f5f9;
  color: #334155;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.x-owner-mobile-page-back:hover {
  background: #e2e8f0;
}

.x-owner-mobile-page-back:active {
  transform: scale(.96);
}

.x-owner-mobile-page-back:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 2px;
}

.x-owner-page-back-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.x-owner-child-mobile-header .x-owner-mobile-page-sub,
body:not(.x-merchant-app) .x-owner-mobile-page-sub {
  margin: 4px 0 0 48px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  text-align: left !important;
  color: #747c83 !important;
}

@media (max-width: 768px) {
  /* Every Owner secondary page uses the same page-level shell as
     Kategori and Produk Master: the Back/title block is not a card. */
  .x-owner-child-page-shell.x-card-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 10px !important;
  }

  .x-owner-child-page-header-row {
    padding: 8px 0 10px !important;
  }

  .x-owner-child-mobile-header {
    margin-bottom: 14px;
  }

  .x-owner-child-mobile-header .x-owner-mobile-page-title,
  body:not(.x-merchant-app) .x-owner-mobile-page-title {
    font-size: 18px;
    line-height: 1.25;
  }

  .x-owner-mobile-page-back,
  .x-title-back-btn.x-owner-mobile-page-back {
    flex-basis: 40px;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
  }

  .x-owner-page-back-icon {
    width: 18px;
    height: 18px;
  }

  .x-owner-child-mobile-header .x-owner-mobile-page-sub,
  body:not(.x-merchant-app) .x-owner-mobile-page-sub {
    margin-left: 48px !important;
    font-size: 12px !important;
  }

  /* Focused editors come from legacy modal cards. Their mobile page shell
     owns the title/back affordance, so hide the modal-only title row here. */
  body:not(.x-merchant-app) .x-feature-page-surface > .x-modal-header {
    display: none !important;
  }

  body:not(.x-merchant-app) .x-feature-page-surface {
    border-radius: 14px;
  }

  body:not(.x-merchant-app) #tab-catalog-menus #menus-context-badge {
    flex: 0 0 auto;
    font-size: 10px;
    padding: 3px 7px;
  }

  body:not(.x-merchant-app) #tab-catalog-menus .x-owner-child-mobile-header {
    min-width: 0;
  }
}



/* ==========================================================================
   OWNER MASTER MENU — canonical commercial menu workspace
   ========================================================================== */
.x-master-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.x-master-menu-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.x-master-menu-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.x-master-menu-card:focus-visible {
  outline: 2px solid var(--primary, #08a94f);
  outline-offset: 2px;
}

.x-master-menu-card-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

.x-master-menu-card-content {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.x-master-menu-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main, #0f172a);
  word-break: break-word;
}

.x-master-menu-card-rasa {
  display: inline-block;
  margin: 4px 0 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 4px;
  padding: 2px 6px;
  width: fit-content;
}

.x-master-menu-card-items {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.x-master-menu-card-price {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  text-align: left;
}

.x-master-menu-card-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  flex-shrink: 0;
}

.x-master-menu-card-right-top {
  display: flex;
  align-items: center;
}

.x-master-menu-card-right-bottom {
  display: flex;
  align-items: center;
}

/* Tombol option non-visible secara default dan hanya visible saat hover */
.x-master-menu-card-option-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
}

.x-master-menu-card-option-btn:hover,
.x-master-menu-card-option-btn:focus-visible,
.x-master-menu-card-option-btn[aria-expanded="true"] {
  background: #f1f5f9 !important;
  color: var(--text-main, #0f172a) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

/* Thumbnail foto Menu. Menu memiliki fotonya sendiri; kosong = placeholder netral */
.x-master-menu-card-thumb {
  flex: 0 0 auto;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
}

.x-master-menu-card-thumb-empty {
  background-color: #f8fafc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.x-master-menu-card-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.x-master-menu-filter-tabs {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.x-master-menu-filter-tabs .x-subnav-tab {
  margin: 0;
}

.x-composed-menu-components {
  display: grid;
  gap: 8px;
}

.x-composed-menu-component-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 40px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.x-composed-menu-component-row label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.x-composed-menu-component-product,
.x-composed-menu-component-qty,
.x-composed-menu-component-action {
  min-width: 0;
}

.x-composed-menu-component-remove {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #ef4444;
  border-color: #fee2e2;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.x-composed-menu-component-remove:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

@media (min-width: 720px) {
  .x-master-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#btn-add-master-menu {
  min-height: 42px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 560px) {
  .x-composed-menu-component-row {
    grid-template-columns: minmax(0, 1fr) 68px 40px;
  }

  #master-menu-add-actions {
    width: 100%;
  }

  #master-menu-add-actions .x-btn-primary,
  #master-menu-add-actions .x-btn-secondary {
    flex: 1 1 0;
  }

  #master-menu-type-filter {
    width: 100%;
  }
}

.x-master-menu-editor-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.x-master-menu-editor-actions-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.x-master-menu-editor-actions-row > button {
  flex: 1 1 0;
  text-align: center;
  justify-content: center;
}

.x-master-menu-editor-submit-btn {
  width: 100%;
  min-height: 42px;
  padding: 10px 22px;
  text-align: center;
  justify-content: center;
}

/* ==========================================================================
   Master Menu Editor Unified Single-Column Flow (Matching Item Editor Reference)
   ========================================================================== */
#master-menu-editor-view,
#master-menu-list-view {
  width: 100% !important;
  box-sizing: border-box !important;
}

#form-master-menu {
  max-width: 920px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#cm-items-container .x-composed-menu-component-row,
#form-master-menu .x-composed-menu-component-row {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  gap: 12px !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
}

#cm-items-container .x-cm-item-variant-block {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#master-menu-editor-view .x-item-editor-card,
#product-editor-view .x-item-editor-card {
  width: 100% !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 20px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
}

.x-menu-editor-workspace,
.x-menu-editor-main,
.x-menu-editor-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  #master-menu-editor-view.x-card-panel,
  #master-menu-editor-view {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #form-master-menu {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #master-menu-editor-view .x-card,
  #master-menu-editor-view .x-item-editor-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }
  #master-menu-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: 24px !important;
  }
  #master-menu-editor-view .x-item-editor-actions-row1 {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
  }
  #master-menu-editor-view .x-item-editor-actions-row1 button,
  #master-menu-editor-view .x-item-editor-actions-row1 #btn-cancel-master-menu,
  #master-menu-editor-view .x-item-editor-actions-row1 #btn-delete-master-menu-action {
    flex: 1 1 0 !important;
    height: 46px !important;
    min-height: 46px !important;
  }
  #master-menu-editor-view #btn-save-master-menu-active {
    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 !important;
    border: none !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
  }
  .x-menu-editor-workspace {
    gap: 14px !important;
  }
  .x-menu-editor-main {
    gap: 14px !important;
  }
  .x-menu-editor-sidebar {
    gap: 14px !important;
  }
  #master-menu-editor-view .x-owner-child-mobile-header {
    margin-bottom: 14px !important;
  }
}

@media (min-width: 1024px) {
  #form-master-menu {
    max-width: 920px !important;
    margin: 0 auto !important;
  }
  .x-menu-editor-workspace {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .x-menu-editor-main {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  .x-menu-editor-sidebar {
    width: 100% !important;
    flex-shrink: 0 !important;
    position: static !important;
  }

  /* Modern MenuEditor owns its own header on all viewports */
  #master-menu-editor-view.x-card-panel,
  #master-menu-editor-view {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  #master-menu-editor-view .x-owner-child-mobile-header {
    display: none !important;
  }
  /* Sembunyikan breadcrumb baris kedua karena sudah ada tombol back di samping judul */
  #master-menu-editor-view .x-owner-child-legacy-nav {
    display: none !important;
  }
}

/* =========================================================================
   BOTTOM SHEET: PILIH ITEM (#sheet-pick-item) & COMPONENT SELECTION MODALS
   ========================================================================= */
#sheet-pick-item {
  display: flex !important;
  flex-direction: column !important;
  height: 85vh !important;
  max-height: 85vh !important;
  box-sizing: border-box !important;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1060 !important;
}

#sheet-pick-item:not(.open) {
  transform: translateY(100%) !important;
  display: none !important;
}

#sheet-pick-item.open {
  transform: translateY(0) !important;
  display: flex !important;
}

#sheet-pick-item-overlay {
  z-index: 1055 !important;
}

@media (min-width: 769px) {
  /* Di semua layar tablet landscape & desktop (>= 769px), sheet-pick-item, sheet-menu-type, occ-date-sheet tampil sebagai dialog modal tengah */
  #sheet-pick-item,
  #sheet-menu-type,
  #occ-date-sheet {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    max-width: 520px !important;
    width: 90% !important;
    border-radius: 20px !important;
    height: auto !important;
    max-height: 85vh !important;
    padding: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
    margin: 0 !important;
    z-index: 1060 !important;
    flex-direction: column !important;
  }
  #sheet-pick-item.open,
  #sheet-menu-type.open,
  #occ-date-sheet.open {
    display: flex !important;
    transform: translate(-50%, -50%) !important;
  }
  #sheet-pick-item-overlay,
  #sheet-menu-type-overlay {
    z-index: 1055 !important;
  }
  #sheet-pick-item .x-bottom-sheet-handle,
  #sheet-menu-type .x-bottom-sheet-handle,
  #occ-date-sheet .x-bottom-sheet-handle {
    display: none !important;
  }
  #sheet-pick-item-ext-close,
  #sheet-menu-type-ext-close,
  #occ-date-sheet-ext-close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #sheet-pick-item .x-modal-close-desktop,
  #sheet-menu-type .x-modal-close-desktop,
  #occ-date-sheet .x-modal-close-desktop {
    display: inline-flex !important;
  }
}

@media (max-width: 1023px) {
  #form-master-menu {
    max-width: 920px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  #master-menu-editor-view .x-owner-child-legacy-nav {
    display: none !important;
  }
}



.x-product-legacy-boundary-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.x-product-legacy-boundary-note strong {
  color: #475569;
  font-size: 11px;
}

@media (max-width: 560px) {
  .x-product-legacy-boundary-note {
    padding: 9px 10px;
  }
}

.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;
}

/* ==========================================================================
   OWNER MOBILE BUTTON STANDARDIZATION (44px TOUCH TARGET INVARIANT)
   ========================================================================== */
@media (max-width: 768px) {
  body:not(.x-merchant-app) .x-panel-header-flex > .x-btn-primary,
  body:not(.x-merchant-app) .x-panel-header-flex > .x-btn-secondary,
  body:not(.x-merchant-app) .x-owner-child-page-shell .x-btn-primary:not(.x-master-add-round),
  body:not(.x-merchant-app) .x-stock-subtab-cta,
  body:not(.x-merchant-app) #btn-add-user,
  body:not(.x-merchant-app) .x-modal-footer .x-btn-primary,
  body:not(.x-merchant-app) .x-modal-footer .x-btn-secondary {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* Marketing Banner Management Table (Responsive & Mobile Cards) */
.x-marketing-banner-table {
  width: 100%;
  border-collapse: collapse;
}
@media (max-width: 768px) {
  .x-marketing-banner-table thead {
    display: none;
  }
}

/* =========================================================================
   SUB-HUB CARDS CONTAINER (Katalog & Menu, Bahan & Produksi)
   ========================================================================= */
.x-subhub-card-container {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 14px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}

.x-subhub-item-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.x-subhub-item-card:hover,
.x-subhub-item-card:active {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.x-subhub-item-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.x-subhub-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.x-subhub-item-icon img,
.x-subhub-item-icon svg {
  display: block;
  filter: brightness(0) invert(1);
}

.x-subhub-item-icon.bg-green { background: #22c55e !important; }
.x-subhub-item-icon.bg-blue { background: #3b82f6 !important; }
.x-subhub-item-icon.bg-red { background: #ef4444 !important; }

.x-subhub-item-text {
  min-width: 0;
  flex: 1;
}

.x-subhub-item-text h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.x-subhub-item-text p {
  margin: 3px 0 0 0;
  font-size: 11.5px;
  font-style: normal;
  color: #64748b;
  line-height: 1.35;
}

.x-subhub-item-arrow {
  color: #94a3b8;
  flex-shrink: 0;
  margin-left: 8px;
  display: flex;
  align-items: center;
}

/* Hide legacy desktop canonical sections */
.x-desktop-hub-canonical-sections {
  display: none !important;
}

/* =========================================================================
   CATEGORY MOBILE VIEW (matching design reference)
   ========================================================================= */
#tab-catalog-categories .x-owner-mobile-page-sub {
  display: none !important;
}

[data-master-reference-tab="item"] {
  display: none !important;
}

.x-master-add-round,
#btn-add-master-category-page {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #2b2d31 !important;
  color: #ffffff !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.x-master-add-round svg,
#btn-add-master-category-page svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  display: block !important;
  margin: auto !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  #tab-catalog-categories #master-reference-tabs {
    display: none !important;
  }
  #tab-catalog-categories .x-card-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .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;
  }
  .x-category-control-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
  }
  .x-filter-pills {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .x-filter-pill {
    padding: 6px 18px !important;
    border-radius: 9999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }
  .x-filter-pill.active {
    background: #2b2d31 !important;
    border-color: #2b2d31 !important;
    color: #ffffff !important;
  }
  .x-master-add-round,
  #btn-add-master-category-page {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #2b2d31 !important;
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  .x-master-add-round svg,
  #btn-add-master-category-page svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    display: block !important;
    margin: auto !important;
    flex-shrink: 0 !important;
  }
  #master-categories-page-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  #master-categories-page-list .x-master-reference-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;
  }
  #master-categories-page-list .x-master-reference-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    background: #22c55e !important;
  }
  #master-categories-page-list .x-master-reference-icon img,
  #master-categories-page-list .x-master-reference-icon svg {
    display: block !important;
    filter: brightness(0) invert(1) !important;
  }
  #master-categories-page-list .x-master-category-menu-list {
    font-size: 11.5px !important;
    font-style: normal !important;
    color: #64748b !important;
    margin-top: 3px !important;
    display: block !important;
    max-width: 175px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.35 !important;
  }
  #master-categories-page-list .x-toggle {
    width: 42px !important;
    height: 24px !important;
  }
  #master-categories-page-list .x-toggle-slider {
    background: #ef4444 !important;
    border-radius: 999px !important;
  }
  #master-categories-page-list .x-toggle-slider::before {
    width: 18px !important;
    height: 18px !important;
    left: 3px !important;
    top: 3px !important;
  }
  #master-categories-page-list .x-toggle input:checked + .x-toggle-slider,
  #master-categories-page-list .x-toggle.x-toggle-on .x-toggle-slider {
    background: #22c55e !important;
  }
  #master-categories-page-list .x-toggle input:checked + .x-toggle-slider::before,
  #master-categories-page-list .x-toggle.x-toggle-on .x-toggle-slider::before {
    transform: translateX(18px) !important;
  }
}

/* ==========================================================================
   Mobile Pull-To-Refresh Indicator
   ========================================================================== */
.x-pull-refresh-indicator {
  position: fixed !important;
  top: calc(var(--topbar-height-mobile, 68px) + 8px) !important;
  left: 50% !important;
  transform: translate(-50%, -60px);
  z-index: 9999 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15), 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid #E2E8F0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.x-pull-refresh-indicator.pulling,
.x-pull-refresh-indicator.refreshing {
  display: flex !important;
}

.x-pull-refresh-indicator.refreshing {
  transform: translate(-50%, 14px) !important;
  opacity: 1 !important;
}

.x-pull-refresh-spinner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0F172A !important;
  transition: transform 0.1s linear, color 0.15s ease !important;
}

.x-pull-refresh-indicator.refreshing .x-pull-refresh-spinner {
  animation: xPullRefreshSpin 0.75s linear infinite !important;
  color: #00A637 !important;
}

@keyframes xPullRefreshSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}