/* =========================================================================
   AMAZZA COFFEE - assets/css/app.css
   Gabungan seluruh berkas CSS lama (index.css, admin.css, css/v12..v26.css).
   Urutan dipertahankan agar override antar versi tetap sama.
   ========================================================================= */


/* ==== [index.css] ==== */
/* =========================================================
   POS PREMIUM UI — Redesign (Square / Toast / Clover style)
   - JS logic, printer, API, data structure: UNCHANGED
   - Class names preserved so JS keeps working
   ========================================================= */

:root {
  /* Brand */
  --brand: #16a34a;
  --brand-hover: #15803d;
  --brand-soft: #dcfce7;

  --accent: #0ea5e9;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Surfaces */
  --bg: #f5f6fa;
  --bg-2: #eef1f6;
  --white: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8fafc;

  /* Sidebar */
  --dark: #0f172a;
  --dark-2: #1e293b;
  --dark-hover: #334155;

  /* Text */
  --text: #0f172a;
  --text-muted: #64748b;
  --text-soft: #94a3b8;

  /* Borders */
  --border: #e2e8f0;
  --border-soft: #eef2f7;

  /* Shape */
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .05);
  --shadow: 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, .12);

  --transition: .22s cubic-bezier(.2,.8,.2,1);
}

/* ================= RESET / BASE ================= */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 800px at -10% -10%, #eaf4ff 0%, transparent 60%),
    radial-gradient(900px 700px at 110% 10%, #eefbf3 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.row { margin-left: 0 !important; margin-right: 0 !important; }
.text-muted { color: var(--text-muted) !important; }

/* Scrollbars */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #d3d9e2; border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: #b8c1cf; }

/* ================= UTILITIES ================= */
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.row-between  { display: flex; justify-content: space-between; }

/* ================= LAYOUT ================= */
.app-layout { height: 100vh; padding: 14px; gap: 14px; }

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 28px);
  overflow: auto;
  padding: 22px 26px 10px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: margin var(--transition);
}

#page-pos { flex: 1; overflow-y: auto; }

/* ================= CARD (generic) ================= */
.card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ================= SIDEBAR (Floating) ================= */
.sidebar {
  width: 240px;
  background: linear-gradient(180deg, #0f172a 0%, #111a2e 100%);
  color: #e2e8f0;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transition: width var(--transition), background var(--transition);
}

.sidebar h5 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 2px 10px 14px;
  margin: 0 0 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar.collapsed { width: 78px; }
.sidebar.collapsed h5 { display: none; }
.sidebar.collapsed button {
  text-align: center;
  font-size: 12px;
  padding: 12px 6px;
}

.sidebar button,
.sidebar .btn,
.sidebar .btn-dark {
  width: 100%;
  min-height: 44px;
  border: none;
  border-radius: 14px;
  background: transparent !important;
  color: #cbd5e1 !important;
  padding: 11px 14px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  box-shadow: none !important;
}

.sidebar button:hover,
.sidebar .btn-dark:hover {
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
}

.sidebar button.active,
.sidebar .btn-dark.active {
  /* background: linear-gradient(135deg, var(--brand) 0%, #22c55e 100%) !important;*/
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(22,163,74,.35) !important;
}

/* ================= FILTER BAR ================= */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 8px 0 14px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.filter-bar::after { display: none !important; content: none !important; }
.filter-bar .float-start,
.filter-bar .float-end { float: none !important; }

/* Filter chips */
.filter-bar .btn {
  border-radius: var(--radius-pill) !important;
  padding: 9px 18px !important;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition);
}
.filter-bar .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.filter-bar .btn-dark,
.filter-bar .btn.active {
  background: var(--text) !important;
  color: #fff !important;
  border-color: var(--text) !important;
}
.filter-bar .btn-primary {
  background: var(--brand-soft) !important;
  color: var(--brand-hover) !important;
  border-color: transparent !important;
}
.filter-bar .btn-warning {
  background: #fef3c7 !important;
  color: #a16207 !important;
  border-color: transparent !important;
}

/* ================= SEGMENTED CONTROL (Offline / Online) ================= */
.filter-bar .float-end {
  display: inline-flex !important;
  gap: 0 !important;
  padding: 4px;
  background: #eef2f7;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--border);
}
.mode-btn,
.filter-bar .float-end .btn {
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 22px !important;
  min-height: 36px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: none !important;
  transition: all var(--transition);
}
.mode-btn.active,
.filter-bar .float-end .btn.active {
  background: var(--white) !important;
  color: var(--brand-hover) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.08) !important;
}

/* ================= MENU CARDS ================= */
#menuList { gap: 14px 0; }
#menuList > [class*="col-"] { padding: 6px; }

.menu-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--border);
}

.menu-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  transition: transform .35s ease;
}
.menu-card:hover .menu-img { transform: scale(1.03); }

.menu-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 12px;
  padding: 0 4px 4px;
}

.menu-title {
  min-height: 40px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.menu-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 13px;
  flex-direction: column;
}


.menu-category {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  background: var(--bg-2);
  border-radius: var(--radius-pill);
}

.menu-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-hover);
  letter-spacing: -0.01em;
  min-width: -webkit-fill-available !important;
}

/* ================= LISTS ================= */
.list-group { border: none; background: transparent; }
.list-group-item {
  margin-bottom: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.list-group-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ================= HISTORY ================= */
.history-panel {
  max-height: 75vh;
  overflow-y: auto;
  padding-right: 4px;
}
#page-order h3,
#page-transaction h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
#page-order .card,
#page-transaction .card {
  padding: 22px !important;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
#page-order h6,
#page-transaction h6 {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 16px;
}
#page-order h6 span,
#page-transaction h6 span {
  color: var(--brand-hover);
  font-weight: 700;
}

/* ================= CART (Premium) ================= */
.cart {
  transition: transform var(--transition), opacity var(--transition);
  will-change: transform;
}

.cart-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 6px 18px 0;
  box-shadow: var(--shadow-sm);
}

.cart-header {
  flex-shrink: 0;
  padding: 18px 4px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.cart-header::after { display: none; content: none; }
.cart-header h4 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cart-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 2px;
}

.cart-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -18px;
  padding: 18px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  border-radius: 0 0 var(--radius) var(--radius);
}
.cart-footer h5 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cart-footer h5 span { color: var(--brand-hover); }

/* ================= BUTTONS ================= */
.btn {
  border-radius: 14px !important;
  font-weight: 600;
  font-size: 14px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  transition: all var(--transition);
  box-shadow: var(--shadow-xs);
  letter-spacing: -0.005em;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 12px; border-radius: 10px !important; }
.btn-lg { min-height: 52px; font-size: 15px; }

.btn-success {
  background: linear-gradient(135deg, var(--brand) 0%, #22c55e 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(22,163,74,.28) !important;
}
.btn-success:hover { box-shadow: 0 10px 26px rgba(22,163,74,.36) !important; }

.btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(37,99,235,.25) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-secondary {
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border-color: transparent !important;
}
.btn-secondary:hover { background: #e2e8f0 !important; }

.btn-dark {
  background: var(--text) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.btn-outline-primary {
  background: var(--white) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs);
}
.btn-outline-primary:hover {
  border-color: var(--brand) !important;
  color: var(--brand-hover) !important;
  background: var(--brand-soft) !important;
}

.btn-outline-success {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid transparent !important;
}

/* ================= FORM CONTROLS ================= */
.form-control,
.form-select {
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  min-height: 48px;
  font-size: 14px;
  background: var(--surface-2) !important;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input-group .form-control {
  border-radius: 0px var(--bs-border-radius) var(--bs-border-radius) 0px !important;
  border: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  min-height: 48px;
  font-size: 14px;
  background: var(--surface-2) !important;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-control:focus,
.form-select:focus {
  outline: none;
  background: var(--white) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(22,163,74,.12) !important;
}

/* ================= FLOATING CART BUTTON ================= */
#floatingCart {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand), #22c55e);
  color: white;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(22,163,74,.4);
  cursor: pointer;
  z-index: 999;
}

/* ================= MODAL (Premium) ================= */
.modal-content {
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  background: var(--surface);
}
.modal-backdrop.show { opacity: .55; background: #0f172a; }

.modal-header {
  border-bottom: 1px solid var(--border-soft) !important;
  padding: 18px 20px !important;
}
.modal-title { font-weight: 700; letter-spacing: -0.01em; }
.modal-body { padding: 18px 20px !important; }

.btn-close {
  width: 32px; height: 32px;
  border-radius: 10px;
  background-color: var(--bg-2);
  opacity: 1;
  padding: 8px;
  transition: background var(--transition);
}
.btn-close:hover { background-color: #e2e8f0; opacity: 1; }

/* Payment modal specific polish */
#paymentModal .modal-content { padding: 20px !important; }
#paymentModal h5 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
#paymentModal .form-control { font-size: 16px; }
#paymentModal #payTotal,
#paymentModal #payKembalian {
  font-weight: 700;
  color: var(--brand-hover);
  letter-spacing: -0.01em;
}
#paymentModal .btn-outline-primary {
  min-height: 48px;
  font-weight: 700;
}
#paymentModal #btnBayar { min-height: 54px; font-size: 15px; font-weight: 700; }

/* ================= RECEIPT ================= */
.receipt {
  max-width: 58mm;
  margin: auto;
  padding: 14px;
  background: white;
  color: black;
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  line-height: 1.5;
  word-break: break-word;
  animation: popReceipt .25s ease;
}
@keyframes popReceipt {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.receipt-logo { text-align: center; margin-bottom: 6px; }
.receipt-logo img { width: 55px; object-fit: contain; }
.receipt-store { text-align: center; margin-bottom: 8px; }
.receipt-store .name { font-size: 15px; font-weight: bold; }
.receipt-store .addr { font-size: 10px; color: #555; line-height: 1.3; }
.receipt-divider { margin: 7px 0; border-top: 1px dashed #000; }
.receipt-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.receipt-item { margin-bottom: 6px; }
.receipt-item-name { flex: 1; font-weight: bold; }
.receipt-item-price { white-space: nowrap; }
.receipt-detail { font-size: 10px; line-height: 1.3; color: #555; }
.receipt-total { font-size: 12px; font-weight: bold; }
.receipt-footer { margin-top: 10px; text-align: center; font-size: 10px; line-height: 1.4; }

#strukWrapper {
  width: 100%;
  max-height: 75vh;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #f1f5f9;
  border-radius: var(--radius);
  box-sizing: border-box;
}

/* ================= SKELETON ================= */
.skeleton {
  background: linear-gradient(90deg, #e6e9ef 25%, #f2f4f8 37%, #e6e9ef 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skeleton-card { padding: 12px; }
.skeleton-img { height: 140px; margin-bottom: 10px; border-radius: var(--radius-sm); }
.skeleton-text { height: 12px; margin-bottom: 8px; border-radius: 6px; }
.skeleton-text.small { width: 60%; }

/* ================= OPTIONS (Drink config modal) ================= */
.option-group { margin-bottom: 16px; }
.option-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.option-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-btn {
  flex: 1;
  min-width: 70px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}
.opt-btn:hover { background: var(--white); border-color: var(--brand); }
.opt-btn.active {
  background: linear-gradient(135deg, var(--brand), #22c55e);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(22,163,74,.25);
}

/* ================= QTY ================= */
.qty-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.qty-box button {
  width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
}
.qty-box button:hover { background: var(--bg-2); }
.qty-box span { flex: 1; text-align: center; font-weight: 700; font-size: 15px; }

/* ================= BOTTOM BAR (mobile) ================= */
.bottom-bar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  width: auto;
  display: none;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}
.bottom-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.bb-info { display: flex; flex-direction: column; font-size: 13px; }
.bb-info strong { font-size: 16px; color: var(--brand-hover); }
.bb-btn { min-width: 130px; font-weight: 700; }

/* ================= PRINTER MODAL polish ================= */
#printerModal .card.bg-light {
  background: var(--surface-2) !important;
  border-radius: var(--radius-sm) !important;
}
#printerModal .card-body { padding: 16px; }

/* ================= DESKTOP ================= */
@media (min-width: 768px) {
  .sidebar {
    position: sticky;
    top: 14px;
    height: calc(100vh - 28px);
  }
}
@media (min-width: 992px) {
  .cart {
    position: sticky;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 14px;
  }
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .app-layout { padding: 8px; gap: 8px; }
  .content { padding: 16px; border-radius: 18px; height: calc(100vh - 16px); }

  .menu-price { font-size: 13px; }
  .menu-img { height: 110px; }

  .sidebar {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    gap: 6px;
    border-radius: 18px;
  }
  .sidebar h5 { display: none; }
  .sidebar button {
    flex: 1;
    padding: 10px 6px;
    min-height: 42px;
    text-align: center;
    font-size: 12.5px;
    border-radius: 12px;
  }

  .filter-bar { padding: 6px 0 10px; }
  .filter-bar .btn { padding: 7px 14px !important; font-size: 12px; min-height: 36px; }

  .cart {
    position: fixed;
    left: 0; bottom: 0;
    width: 100%;
    height: 82vh;
    padding: 12px;
    background: var(--surface);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 50px rgba(15,23,42,.18);
    z-index: 1000;
    transform: translateY(100%);
    opacity: 0;
  }
  .cart.show { transform: translateY(0); opacity: 1; }
  .cart-inner { border: none; box-shadow: none; padding: 0 6px; }
  .cart-footer { margin: 0 -6px; }

  #floatingCart { display: flex; }
  .bottom-bar { display: none; }
  #page-pos { padding-bottom: 90px; }
}

/* ================= PRINT (UNCHANGED behavior) ================= */
@media print {
  body { background: white; }
  body * { visibility: hidden; }
  #strukText, #strukText * { visibility: visible; }
  #strukText {
    position: absolute;
    left: 0; top: 0;
    width: 58mm;
    max-width: 58mm;
    margin: 0; padding: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .modal, .modal-backdrop { display: none !important; }
}

/* ================= FILTER CHIPS (active state) ================= */
.filter-bar .filter-btn {
  border-radius: var(--radius-pill) !important;
  padding: 9px 20px !important;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
  color: var(--text-muted) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--transition);
}
.filter-bar .filter-btn:hover {
  color: var(--text) !important;
  border-color: var(--text-soft) !important;
  transform: translateY(-1px);
}
.filter-bar .filter-btn.active {
  background: linear-gradient(135deg, var(--brand) 0%, #22c55e 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(22,163,74,.32) !important;
}

/* Segmented control wrapper */
.mode-switch {
  padding: 4px !important;
  background: #eef2f7;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--border);
}
.mode-switch .btn.mode-btn {
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  min-height: 36px;
  padding: 6px 22px !important;
  font-weight: 600;
  border-radius: var(--radius-pill) !important;
}
.mode-switch .btn.mode-btn.active {
  background: var(--white) !important;
  color: var(--brand-hover) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.08) !important;
}

/* ================= CART SCROLL FIX ================= */
@media (min-width: 992px) {
  .cart {
    position: sticky;
    top: 10px;
    align-self: flex-start;
    height: calc(100vh - 60px);
    max-height: calc(94vh - 50px);
  }
  .cart-inner {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  .cart-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 991.98px) {
  .cart-body { max-height: 55vh; overflow-y: auto; }
}

/* Cart items */
#cartList .list-group-item {
  position: relative;
  padding: 14px 16px 44px;
  line-height: 1.5;
}
#cartList .list-group-item b:last-of-type {
  display: inline-block;
  margin-top: 6px;
  color: var(--brand-hover);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
#cartList .btn.float-end {
  position: absolute;
  bottom: 8px;
  border-radius: 10px !important;
  min-height: 32px !important;
  padding: 4px 10px !important;
}
#cartList .btn-outline-danger.float-end  { right: 10px; }
#cartList .btn-outline-warning.float-end { right: 60px; }

/* ================= SYNC BADGE ================= */
.sync-badge {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.sync-online  { background: rgba(34,197,94,.15);  color: #86efac; }
.sync-offline { background: rgba(239,68,68,.15);  color: #fca5a5; }
.sync-pending { background: rgba(245,158,11,.18); color: #fcd34d; animation: syncPulse 1.4s ease-in-out infinite; }
@keyframes syncPulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* Sidebar nav icons */
.nav-ico { display: inline-block; width: 22px; text-align: center; margin-right: 6px; font-size: 15px; }

/* ================= ORDER / TRANSACTION LIST (Premium) ================= */
#queueList .list-group-item,
#incomeList .list-group-item {
  position: relative;
  padding: 16px 18px 16px 20px;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-soft) !important;
  background: var(--surface);
  transition: all var(--transition);
}
#queueList .list-group-item::before,
#incomeList .list-group-item::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: 4px;
}
#queueList  .list-group-item::before { background: linear-gradient(180deg, #f59e0b, #f97316); }
#incomeList .list-group-item::before { background: linear-gradient(180deg, var(--brand), #22c55e); }
#queueList .list-group-item:hover,
#incomeList .list-group-item:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border) !important;
}
#queueList .list-group-item b,
#incomeList .list-group-item b {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
#queueList .list-group-item small,
#incomeList .list-group-item small {
  color: var(--text-muted);
  font-size: 12px;
  display: block;
  margin-top: 2px;
}
#queueList .list-group-item small:last-of-type,
#incomeList .list-group-item small:last-of-type {
  color: var(--brand-hover);
  font-weight: 600;
  margin-top: 4px;
}
#queueList .btn.float-end,
#incomeList .btn.float-end {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 10px !important;
  min-height: 34px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
#queueList .btn.float-end:hover,
#incomeList .btn.float-end:hover {
  background: var(--text) !important;
  color: #fff !important;
  border-color: var(--text) !important;
}

/* Page headers with summary chip */
#page-order h3, #page-transaction h3 { display:flex; align-items:center; gap: 10px; }
#page-order h6, #page-transaction h6 {
  display: inline-flex;
  gap: 14px;
  padding: 10px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 13px;
}

/* ================= PRINTER MODAL (Premium) ================= */
#printerModal .modal-content { padding: 20px !important; }
#printerModal .modal-header { border-bottom: none !important; padding: 4px 4px 12px !important; }
#printerModal .modal-title { font-size: 18px; }
#printerModal .card.bg-light {
  background: linear-gradient(135deg, #f8fafc, #eef2f7) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
}
#printerModal .card-body {
  padding: 18px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#printerModal .small.text-muted {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px !important;
  font-weight: 600;
}
#printerModal #printerStatus1,
#printerModal #printerStatus2 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}
#printerModal .btn { min-height: 48px; }


/* ================= MOBILE HEADER ================= */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #0f172a 0%, #111a2e 100%);
  color: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 4px;
}
.mobile-header .mh-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: background var(--transition), transform var(--transition);
}
.mobile-header .mh-btn:hover { background: rgba(255,255,255,.16); }
.mobile-header .mh-btn:active { transform: scale(.96); }
.mobile-header .mh-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  flex: 1;
  text-align: center;
  color: #fff;
}
.mobile-header .mh-sync {
  padding: 6px 10px;
  font-size: 11px;
  flex-shrink: 0;
}

/* ================= MOBILE MENU POPUP ================= */
.mobile-menu-content {
  border-radius: var(--radius) !important;
  border: none;
  overflow: hidden;
  background: linear-gradient(180deg, #0f172a 0%, #111a2e 100%);
  color: #e2e8f0;
  box-shadow: var(--shadow-lg);
}
.mobile-menu-content .modal-header {
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  padding: 16px 20px;
}
.mobile-menu-content .modal-title { font-weight: 700; letter-spacing: -0.01em; }
.mobile-menu-content .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .7;
}
.mobile-menu-content .modal-body { padding: 16px; }
.mobile-menu-content .mm-btn {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.05) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  padding: 12px 16px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  transition: all var(--transition);
}
.mobile-menu-content .mm-btn:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  transform: translateX(2px);
}
.mobile-menu-content .mm-btn:active {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

/* ================= MOBILE FILTER SELECT ================= */
.filter-select {
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border) !important;
  background-color: var(--white) !important;
  color: var(--text) !important;
  font-weight: 600;
  font-size: 13px;
  min-height: 40px;
  padding: 6px 36px 6px 16px !important;
  box-shadow: var(--shadow-xs);
  min-width: 160px;
  flex: 1;
}
.filter-select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.15) !important;
}

/* ================= STRUK MODAL — Premium ================= */
#strukModal .modal-dialog { max-width: 460px; }
#strukModal .modal-content {
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 22px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 30px 80px rgba(15,23,42,.22);
}
#strukModal .modal-content > .d-flex:first-child {
  padding-bottom: 14px;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--border-soft);
}
#strukModal h5 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

#strukModal .btn-close {
  background-color: var(--surface-2);
  border-radius: 10px;
  opacity: .7;
  padding: 10px;
  transition: all var(--transition);
}
#strukModal .btn-close:hover { opacity: 1; background-color: var(--bg-2); }
#strukModal #strukWrapper {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  padding: 26px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  max-height: 62vh;
}
#strukModal #strukWrapper .receipt {
  box-shadow: 0 16px 40px rgba(15,23,42,.14);
}
#strukModal .btn {
  min-height: 50px;
  font-weight: 700;
  border-radius: 14px !important;
  font-size: 14px;
  letter-spacing: .01em;
  transition: all var(--transition);
}
#strukModal .btn-success {
  background: linear-gradient(135deg, var(--brand) 0%, #22c55e 100%) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(22,163,74,.28);
}
#strukModal .btn-success:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(22,163,74,.36); }
#strukModal .btn-success + .btn-success {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  box-shadow: 0 8px 20px rgba(14,165,233,.28);
}
#strukModal .btn-secondary {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
#strukModal .btn-secondary:hover { background: var(--bg-2) !important; }

/* ================= MOBILE OVERRIDES ================= */
@media (max-width: 767.98px) {
  .mobile-header { display: flex; }

  /* Filter bar mobile layout: select + mode-switch on same row */
  .filter-bar {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center;
  }
  .filter-bar .float-start,
  .filter-bar .float-end {
    float: none !important;
  }
  .filter-bar .mode-switch { flex-shrink: 0; }
  .filter-bar .filter-chips.d-none { display: none !important; }

  .app-layout { padding: 10px; gap: 10px; }
  .content { height: auto; min-height: calc(100vh - 90px); }
}

/* Ensure sidebar hidden on mobile even without utility class */
@media (max-width: 767.98px) {
  .sidebar { display: none !important; }
}

/* ================= DASHBOARD ================= */
#page-dashboard { animation: fadeInUp .35s ease; }
@keyframes fadeInUp { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.dash-title { margin: 0; font-weight: 800; letter-spacing: -0.02em; }
.dash-sub { color: var(--muted, #64748b); font-size: 13px; margin-top: 4px; }
.dash-refresh {
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  display: inline-flex; align-items: center; gap: 8px;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 991.98px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)    { .dash-stats { grid-template-columns: 1fr; } }

.stat-card {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border-soft, #e2e8f0);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(15,23,42,.10); }
.stat-card::after {
  content: "";
  position: absolute; inset: auto -30% -60% auto;
  width: 160px; height: 160px; border-radius: 50%;
  opacity: .10;
  background: currentColor;
}
.stat-card .stat-ico {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  color: #fff; font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(15,23,42,.15);
}
.stat-card .stat-body { flex: 1; min-width: 0; }
.stat-card .stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 600; }
.stat-card .stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; word-break: break-word; }
.stat-card .stat-foot { font-size: 14px; color: #64748b; margin-top: 6px; display: flex; align-items: center; gap: 6px; }

.stat-1 { color: #16a34a; }
.stat-1 .stat-ico { background: linear-gradient(135deg,#22c55e,#16a34a); }
.stat-2 { color: #0ea5e9; }
.stat-2 .stat-ico { background: linear-gradient(135deg,#38bdf8,#0284c7); }
.stat-3 { color: #f59e0b; }
.stat-3 .stat-ico { background: linear-gradient(135deg,#fbbf24,#d97706); }
.stat-4 { color: #8b5cf6; }
.stat-4 .stat-ico { background: linear-gradient(135deg,#a78bfa,#7c3aed); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 767.98px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-panel-wide { grid-column: 1 / -1; }

.dash-panel {
  background: #fff;
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
.dash-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft, #eef2f7);
}
.dash-panel-head h5 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; }
.dash-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #f1f5f9; color: #475569;
  padding: 4px 10px; border-radius: 999px;
}

.top-list, .recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.top-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 10px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #eef2f7;
  font-size: 13.5px;
}

.recent-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 6.6px 10px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #eef2f7;
  font-size: 13.5px;
}

.top-list li.empty, .recent-list li.empty { justify-content: center; color: #94a3b8; background: transparent; border-style: dashed; }
.top-list .rank {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(135deg,#64748b,#475569);
  flex-shrink: 0;
}
.top-list li:nth-child(1) .rank { background: linear-gradient(320deg, #0386e5, #7ac8ff); }
.top-list li:nth-child(2) .rank { background: linear-gradient(320deg, #198754, #22c55e); }
.top-list li:nth-child(3) .rank { background: linear-gradient(320deg, #dd6103, #f59e0b); }
.top-list .name { flex: 1; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-list .qty { font-weight: 700; color: #16a34a; font-size: 13px; }

.recent-list .r-info { flex: 1; min-width: 0; }
.recent-list .r-id { font-weight: 700; color: #0f172a; font-size: 13px; }
.recent-list .r-sub { color: #64748b; font-size: 11.5px; margin-top: 2px; }
.recent-list .r-amt { font-weight: 800; color: #16a34a; font-size: 14px; white-space: nowrap; }
.recent-list .r-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg,#38bdf8,#0284c7); color: #fff; flex-shrink: 0; }

.cat-bars { display: grid; gap: 12px; }
.cat-bars .cat-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; }
.cat-bars .cat-name { font-weight: 600; color: #0f172a; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.cat-bars .cat-track { position: relative; height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.cat-bars .cat-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg,#22c55e,#16a34a); transition: width .6s ease; }
.cat-bars .cat-row:nth-child(2) .cat-fill { background: linear-gradient(90deg,#38bdf8,#0284c7); }
.cat-bars .cat-row:nth-child(3) .cat-fill { background: linear-gradient(90deg,#fbbf24,#d97706); }
.cat-bars .cat-row:nth-child(4) .cat-fill { background: linear-gradient(90deg,#a78bfa,#7c3aed); }
.cat-bars .cat-val { font-weight: 700; font-size: 12.5px; color: #475569; min-width: 42px; text-align: right; }
.cat-bars .empty { text-align: center; color: #94a3b8; padding: 24px; border: 1px dashed #e2e8f0; border-radius: 12px; }

/* Sidebar nav icons using FA */
.sidebar .nav-ico, .mobile-menu-content .nav-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px;
}

/* Sync badge dot */
.sync-badge .fa-circle { font-size: 8px; vertical-align: middle; }

/* Struk modal — payment-modal-like summary rows */
#strukModal .modal-content > .d-flex:nth-of-type(2),
#strukModal .modal-content > .d-flex:nth-of-type(3) {
  padding: 10px 14px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 10px !important;
}
#strukModal .modal-content > .d-flex:nth-of-type(3) {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-color: #a7f3d0;
}
#strukModal #strukTotal,#detailTitle2 { font-weight: 800; color: #15803d; letter-spacing: -0.01em; }
#strukModal .btn-info {
  background: linear-gradient(135deg,#38bdf8,#0284c7) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(14,165,233,.28);
}
#strukModal .btn-info:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(14,165,233,.36); }

/* ============ LOGIN PAGE ============ */
.login-page {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e40af 100%);
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: 20px;
  padding: 36px 28px;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  animation: loginPop .4s ease;
}
@keyframes loginPop { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.login-brand { text-align: center; margin-bottom: 24px; }
.login-logo {
  width: 68px; height: 68px; margin: 0 auto 12px;
  border-radius: 18px;
  color: #fff; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
}
.login-brand h3 { margin: 0; font-weight: 700; color: inherit}
.login-brand p { margin: 4px 0 0; color: #64748b; font-size: 14px; }
.login-form .form-group { margin-bottom: 14px; }
.login-form label { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; display: block; }
.login-form .form-control { height: 44px; border-radius: 10px; border: 1.5px solid #e2e8f0; }
.login-form .form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.login-btn { height: 46px; border-radius: 10px; font-weight: 600; margin-top: 4px;
  background: linear-gradient(135deg, #2563eb, #1e40af); border: none;
  box-shadow: 0 8px 18px rgba(37,99,235,.3);
}
.login-error { color: #dc2626; font-size: 13px; min-height: 18px; margin-bottom: 6px; text-align: center; }
.login-hint { margin-top: 16px; text-align: center; font-size: 12px; color: #94a3b8; }

/* ============ SIDEBAR USER ============ */
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 6px; border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
}
.sidebar-user .su-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-user .su-info {  }
.sidebar-user .su-name { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .su-role { color: #cbd5e1; font-size: 11px; text-transform: capitalize; }
.mm-logout { color: #dc2626 !important; }

/* ============ USER MANAGEMENT ============ */
.user-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.user-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 14px; padding: 14px 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: all .2s ease;
}
.user-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.user-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-weight: 600; color: #0f172a; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.user-sub { color: #64748b; font-size: 13px; margin-top: 2px; }
.user-role {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .3px;
}
.user-role.role-owner { background: #fef3c7; color: #92400e; }
.user-role.role-karyawan { background: #dbeafe; color: #1e40af; }
.user-role.role-inactive { background: #fee2e2; color: #991b1b; }
.user-actions { display: flex; gap: 6px; }

/* ================= REPORT PAGE ================= */
#page-report .report-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 12px;
  flex-wrap: wrap;
}
#page-report .rp-tab {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
#page-report .rp-tab:hover { color: var(--text); border-color: #cbd5e1; }
#page-report .rp-tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
#page-report .report-filter { margin-bottom: 12px; border-radius: var(--radius-sm); }
#page-report .rp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
  display: block;
}
#page-report .report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
#page-report .rp-stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: var(--shadow-xs);
}
#page-report .rp-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
#page-report .rp-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
}
#page-report .report-table-wrap {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
#page-report .report-table {
  font-size: 13px;
  margin: 0;
}
#page-report .report-table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  padding: 12px 12px;
}
#page-report .report-table tbody td {
  padding: 12px;
  border-top: 1px solid var(--border-soft);
  vertical-align: middle;
}
/* v62: tabel detail sales order lebih lega — baris tidak rapat */
#rpTbody .panel {
  margin-bottom: 14px !important;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .07);
}
#rpTbody .panel-heading {
  background: var(--surface-2, #f8fafc);
  border-bottom: 1px solid var(--border-soft, #eef2f6);
}
#rpTbody .panel-body { background: var(--white, #fff); }
#page-report #rpTable > tbody > tr > td { border-top: 0; }
#rpTbody .table-sm { font-size: 13px; }
#rpTbody .table-sm > thead > tr > th,
#rpTbody .table-sm > tbody > tr > td {
  padding: 11px 13px;
  vertical-align: middle;
}
#rpTbody .table-sm > tbody > tr:last-child > td { border-bottom: 0; }
#page-report .report-table tbody tr:hover { background: var(--surface-2); }
#page-report .rp-num { font-family: 'JetBrains Mono', monospace; text-align: right; }

/* ================= USERS PAGE REVAMP ================= */
#page-users .user-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 14px;
  align-items: center;
}
#page-users .user-search {
  flex: 1;
  min-width: 220px;
  position: relative;
}
#page-users .user-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}
#page-users .user-search input {
  padding-left: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  height: 42px;
  background: var(--white);
}
#page-users .user-search input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}
#page-users .user-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
#page-users .user-filter-chip:hover { color: var(--text); border-color: #cbd5e1; }
#page-users .user-filter-chip.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}
#page-users .user-list {
  gap: 14px;
}
#page-users .user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
  position: relative;
}
#page-users .user-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #cbd5e1;
}
#page-users .user-card.inactive { opacity: .65; }
#page-users .user-card .user-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #22c55e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
  text-transform: uppercase;
}
#page-users .user-card.role-owner .user-avatar {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}
#page-users .user-info { flex: 1; min-width: 0; }
#page-users .user-name {
  font-weight: 700;
  color: var(--text);
  font-size: 15px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
#page-users .user-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
#page-users .user-sub {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-users .user-role {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}
#page-users .role-owner { background: #ede9fe; color: #6d28d9; }
#page-users .role-karyawan { background: var(--brand-soft); color: #166534; }
#page-users .role-inactive { background: #fee2e2; color: #b91c1c; }
#page-users .user-actions {
  display: flex;
  gap: 6px;
}
#page-users .user-actions .btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#page-users .user-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
#page-users .user-empty i { font-size: 40px; margin-bottom: 10px; color: var(--text-soft); }

/* User form modal */
.user-modal { border-radius: var(--radius); overflow: hidden; border: none; box-shadow: var(--shadow-lg); }
.user-modal .modal-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
}
.user-modal .modal-title { font-weight: 700; color: var(--text); }
.user-modal .modal-body { padding: 20px; }
.user-modal .uf-field { margin-bottom: 14px; }
.user-modal .uf-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  display: block;
}
.user-modal .uf-optional {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-soft);
  font-weight: 500;
  font-size: 11px;
}
.user-modal .uf-hint {
  display: block;
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 4px;
}
.user-modal .form-control, .user-modal .form-select {
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 14px;
}
.user-modal .form-control:focus, .user-modal .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.user-modal .form-control:read-only {
  background: var(--surface-2);
  color: var(--text-muted);
}
.user-modal .uf-pass-wrap { position: relative; }
.user-modal .uf-pass-toggle {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 40px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  border-radius: 8px;
}
.user-modal .uf-pass-toggle:hover { background: var(--surface-2); color: var(--text); }
.user-modal .uf-error {
  background: #fef2f2;
  color: #b91c1c;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  margin-top: 10px;
  border: 1px solid #fecaca;
}
.user-modal .modal-footer {
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  background: var(--surface-2);
}
.user-modal .btn { border-radius: var(--radius-xs); font-weight: 600; padding: 9px 18px; }


.lds-spinner,
.lds-spinner div,
.lds-spinner div:after {
  box-sizing: border-box;
}
.lds-spinner {
  color: currentColor;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3.2px;
  left: 36.8px;
  width: 6.4px;
  height: 17.6px;
  border-radius: 20%;
  background: currentColor;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* ===== Tipe transaksi (offline / online platform) ===== */
.badge-tipe{
  font-size:11px;
  font-weight:600;
  padding:3px 8px;
  border-radius:999px;
  vertical-align:middle;
}
.mode-switch .platform-select{
  border-radius:10px;
  font-weight:600;
}
.dash-recent .r-sub .badge-tipe{ margin-left:6px; }

/* =========================================================
   v8 — FILTER BAR ANTI-OVERFLOW (mobile portrait)
   ========================================================= */
.filter-bar {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.filter-bar > * { min-width: 0; max-width: 100%; }
.filter-bar .filter-select { flex: 1 1 100%; }
.filter-bar .mode-switch { flex-wrap: nowrap; }

@media (max-width: 767.98px) {
  .filter-bar { gap: 8px; flex-wrap: wrap; }
  .filter-bar .filter-select { width: 100%; flex: 1 1 100%; }
  .filter-bar .float-end,
  .filter-bar .mode-switch {
    width: 100%;
    flex: 1 1 100%;
    display: flex !important;
    gap: 4px !important;
    box-sizing: border-box;
  }
  .mode-switch .btn.mode-btn,
  .filter-bar .float-end .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 6px !important;
    font-size: 12px;
    white-space: nowrap;
  }
  .filter-bar .platform-select {
    flex: 1 1 90px;
    min-width: 0;
    max-width: none !important;
    width: auto;
  }
}

/* =========================================================
   v8 — KELOLA MENU: varian Hot/Iced digabung dalam 1 kartu
   ========================================================= */
.adm-variants {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.adm-variant {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  font-size: 12.5px;
}
.adm-variant.off { opacity: .6; }
.adm-variant .av-name { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.adm-variant .av-price { color: var(--text-muted); }
.adm-variant .av-spacer { flex: 1 1 auto; }
.adm-variant .av-actions { display: inline-flex; gap: 4px; }
.adm-variant .av-actions .btn { padding: 3px 8px; font-size: 12px; line-height: 1.2; }

/* v8 — baris varian di kartu kelola menu */
.adm-variant{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;
  border-radius:10px;background:rgba(0,0,0,.04);font-size:12px}
.adm-variant.off{opacity:.6}
.adm-variant .av-name{font-weight:700}
.adm-variant .av-spacer{flex:1 1 auto}
.adm-variant .av-actions{display:flex;gap:4px}
.adm-variant .av-actions .btn{padding:2px 8px;font-size:12px}

/* =========================================================
   v10 — PENGATURAN, MINI GAME, MODAL CONFIG & STRUK
   ========================================================= */
.st-status{
  display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;
  padding:.75rem 1rem;border-radius:14px;margin-bottom:1rem;background:#f1f5f9;color:#334155;
}
.st-status-on{background:#dcfce7;color:#166534}
.st-status-warn{background:#fef3c7;color:#92400e}
.st-status-off{background:#fee2e2;color:#991b1b}

.st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}
.st-card{
  background:#fff;border:1px solid #e9edf3;border-radius:18px;overflow:hidden;
  box-shadow:0 6px 22px rgba(16,24,40,.05);display:flex;flex-direction:column;
}
.st-card>header{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.1rem;border-bottom:1px solid #f1f4f8}
.st-card>header>i{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#6b4226,#a9744f);color:#fff;font-size:1rem;
}
.st-card>header h5{margin:0;font-size:1rem;font-weight:700}
.st-card>header p{margin:.15rem 0 0;font-size:.8rem;color:#64748b}
.st-body{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.st-card>footer{padding:.85rem 1.1rem;border-top:1px solid #f1f4f8;background:#fbfcfe}
.st-label{font-size:.78rem;font-weight:600;color:#475569;margin-top:.55rem}
.st-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.st-row>div{min-width:110px}
.st-preview{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;background:#0f172a !important;color:#e2e8f0;
  padding:.55rem .8rem;border-radius:10px;overflow:auto;white-space:nowrap;
}
#stLainPreview{white-space:normal;line-height:1.7;font-size:.82rem}
.st-hint{font-size:.76rem;color:#64748b;margin:.65rem 0 0;line-height:1.4}
.st-checks{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.35rem;font-size:.85rem}
.st-checks label{display:flex;align-items:center;gap:.35rem}
.v27-mf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem .9rem}
.v27-mf-grid label{padding:.55rem .7rem;border:1px solid #e3e8ef;border-radius:.6rem;background:#fafbfc;cursor:pointer}
.v27-mf-grid label:hover{border-color:#c9d4e0;background:#f4f7fa}
.v27-mf-grid label i{width:1.1rem;text-align:center;color:#6c7a8c}
.st-switch{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.9rem;margin:.25rem 0 .35rem;cursor:pointer}
.st-switch input{width:0;height:0;opacity:0;position:absolute}
.st-switch span{width:42px;height:24px;border-radius:999px;background:#cbd5e1;position:relative;transition:.2s;flex:0 0 42px}
.st-switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.st-switch input:checked + span{background:#16a34a}
.st-switch input:checked + span::after{transform:translateX(18px)}

.gm-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.35rem}

/* Kartu hadiah mini game — stat tile yang rapi */
.adm-card.gm-prize { gap: .6rem; align-items: stretch; }
.gm-prize > .gm-prize-dot { flex: 0 0 5px; width: 5px; align-self: stretch; border-radius: 999px; }
.gm-prize-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .4rem; margin-top: .5rem; }
.gm-stat {
  background: #f8fafc; border: 1px solid #eef2f6; border-radius: 10px;
  padding: .32rem .55rem .38rem; min-width: 0;
}
.gm-stat b { display: block; font-size: .85rem; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-stat span { display: block; font-size: .64rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-top: .05rem; }
.gm-stat .gm-kode { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; }
.gm-prize-actions { flex: 0 0 auto; align-self: center; }
.st-card > header { flex-wrap: wrap; }
.st-card > header .btn { margin-left: auto; }
.chip-off{background:#fee2e2;color:#991b1b}
.gm-log{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:.4rem}
.gm-log-row{
  display:grid;grid-template-columns:1.2fr 1.4fr .8fr 1fr;gap:.5rem;align-items:center;
  padding:.55rem .7rem;border-radius:12px;background:#f8fafc;font-size:.82rem;
}
.gm-log-row small{display:block;color:#94a3b8;font-size:.72rem}
.gm-log-poin{font-weight:700;color:#16a34a}
.gm-log-date{color:#94a3b8;text-align:right;font-size:.75rem}

.rp-stat-minus .rp-stat-val{color:#b91c1c}
.rp-stat-net{background:linear-gradient(135deg,#0f766e,#16a34a);color:#fff}
.rp-stat-net .rp-stat-label,.rp-stat-net .rp-stat-val{color:#fff}

/* ---------- MODAL CONFIG ---------- */
.cfg-modal .modal-content{border:0;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(15,23,42,.25)}
.cfg-head{
  display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;

}
.cfg-head-ico{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.15rem}
.cfg-head-txt{flex:1;min-width:0}
.cfg-head-txt h5{margin:0;font-size:1.05rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-head-txt small{opacity:.85;font-size:.76rem}
.cfg-body{padding:1rem 1.1rem;max-height:60vh;overflow:auto;background:#fbfcfe}
.cfg-body .option-group{background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:.75rem .85rem;margin-bottom:.7rem}
.cfg-body .option-group>label{font-size:.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.45rem;display:block}
.cfg-body .option-buttons{display:flex;flex-wrap:wrap;gap:.45rem}
.cfg-body .option-buttons button{
  border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:.42rem .9rem;font-size:.85rem;font-weight:600;color:#334155;transition:.15s;
}
.cfg-body .option-buttons button:hover{border-color:#a9744f;color:#6b4226}
.cfg-body .option-buttons button.active,
.cfg-body .option-buttons button.selected{background:#6b4226;border-color:#6b4226;color:#fff}
.cfg-body .qty-box{display:flex;align-items:center;gap:.9rem}
.cfg-body .qty-box button{
  width:38px;height:38px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;font-size:1.1rem;font-weight:700;color:#6b4226;
}
.cfg-body .qty-box button:active{transform:scale(.94)}
.cfg-body #qtyDisplay{font-size:1.15rem;font-weight:700;min-width:2ch;text-align:center}
.cfg-body textarea{border-radius:12px;resize:vertical}
.cfg-foot{display:flex;gap:.6rem;padding:.85rem 1.1rem;border-top:1px solid #eef1f6;background:#fff}
.cfg-foot .btn{flex:1;border-radius:14px;padding:.65rem;font-weight:700}
.cfg-foot .cfg-save{flex:2;background:#6b4226;border-color:#6b4226}

/* ---------- MODAL STRUK ---------- */
.struk-modal .modal-content{border:0;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(15,23,42,.25)}
.struk-head{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;
  background:linear-gradient(135deg,#0f172a,#334155);color:#fff;
}
.struk-head small{display:block;font-size:.72rem;opacity:.75;text-transform:uppercase;letter-spacing:.05em}
.struk-head h5{margin:0;font-size:1.02rem;font-weight:700}
.struk-total{margin-left:auto;text-align:right}
.struk-total b{font-size:1.1rem}
.struk-body{padding:1rem;background:#f1f5f9;max-height:58vh;overflow:auto}
.struk-body .receipt{
  background:#fff;border-radius:14px;padding:1rem;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.8rem;line-height:1.5;box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.struk-foot{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.9rem 1.1rem;background:#fff;border-top:1px solid #eef1f6}
.struk-foot .btn{border-radius:14px;font-weight:700;padding:.62rem}
.struk-foot .btn:last-child{grid-column:1 / -1}

@media (max-width:576px){
  .gm-log-row{grid-template-columns:1fr 1fr;row-gap:.2rem}
  .gm-log-date{text-align:left}
}

/* =========================================================
   v11 — SIDEBAR SCROLLABLE (header sticky, badge di bawah)
   ========================================================= */
.sidebar { height: calc(100vh - 28px); padding: 18px 14px 14px; gap: 0; overflow: hidden; }
.sidebar-top {
  flex: 0 0 auto; position: sticky; top: 0; z-index: 3;
  background: linear-gradient(180deg, #0f172a 0%, #0f172a 82%, rgba(15,23,42,0) 100%);
  padding-bottom: 6px;
}
.sidebar-top h5 { margin-bottom: 10px; }
.sidebar-nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 4px 10px 0; margin-top: 8px;
}
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar #syncBadge {
  flex: 0 0 auto; margin: 10px 0 0; width: 100%; text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar.collapsed .sidebar-user,
.sidebar.collapsed .nav-caret { display: none; }

/* ================= v11 — GRADASI TERPADU ================= */
.sidebar button.active,
.sidebar .btn-dark.active,
.nav-submenu .nav-sub-item.active {
  background: linear-gradient(135deg, var(--brand, #16a34a) 0%, #22c55e 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(22,163,74,.32) !important;
}
.btn-primary, .btn-success {
  background-image: linear-gradient(135deg, var(--brand, #16a34a) 0%, #22c55e 100%);
  border: none;
}
.btn-primary:hover, .btn-success:hover { filter: brightness(1.05); }
.btn-danger { background-image: linear-gradient(135deg, #dc2626 0%, #f87171 100%); border: none; }
.btn-warning { background-image: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); border: none; color: #3b2a05; }
.btn-info { background-image: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); border: none; color: #fff; }
.stat-card, .kpi-card { background-image: linear-gradient(150deg, #ffffff 0%, #f6f9fc 100%); }
.page-tabs .nav-link.active {
  background-image: linear-gradient(135deg, var(--brand, #16a34a) 0%, #22c55e 100%);
  color: #fff !important; border: none;
}

/* ================= v11 — TAB PESANAN & TRANSAKSI ================= */
.page-tabs {
  display: flex; gap: 8px; margin-bottom: 16px; padding: 5px;
  background: #eef2f7; border-radius: 14px; width: fit-content; max-width: 100%;
  overflow-x: auto;
}
.page-tabs .nav-link {
  border: none; background: transparent; color: #475569; font-weight: 600;
  font-size: 14px; padding: 9px 18px; border-radius: 10px; white-space: nowrap;
  transition: all .18s ease;
}
.page-tabs .nav-link:hover { color: #0f172a; }
.tab-pane-page { display: none; }
.tab-pane-page.active { display: block; }

/* ================= v11 — PREVIEW STRUK RAPAT ================= */
#strukText, .receipt-preview, pre.struk {

}

  .struk-info {
    display: grid;
    grid-template-columns: 30px 10px 1fr; /* Lebar label, lebar titik dua, sisa ruang */
  }
#strukText p, #strukText div { margin: 0; line-height: 1.28; }
#strukText hr { margin: 4px 0; border-top: 1px dashed #cbd5e1; }
#strukText br + br { display: none; }

/* ================= v11 — IDENTITAS KAFE ================= */
.brand-logo-preview {
  width: 78px; height: 78px; border-radius: 16px; object-fit: cover;
  border: 1px solid var(--border-soft, #e2e8f0); background: #f8fafc;
}
.brand-upload-hint { font-size: 12px; color: #64748b; }

/* v11 — jam operasional per hari */
.jam-hari { display: grid; gap: 8px; margin-top: 6px; }
.jam-hari-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jam-hari-row .jh-nama { width: 74px; font-size: 13px; font-weight: 600; color: #334155; }
.jam-hari-row input[type=time] { max-width: 118px; }
.jam-hari-row .jh-libur { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 5px; }
.jam-hari-row.is-off { opacity: .55; }


/* ==== [css/admin.css] ==== */
/* =========================================================
   AMAZZA COFFEE — STYLE MODUL ADMIN v5
   Manajemen Menu, Loyalty (Daily Reward/Reward/Voucher), Notifikasi
   ========================================================= */

.adm-toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-bottom: 1rem;
}
.adm-toolbar .form-control,
.adm-toolbar .form-select { max-width: 220px; }
.adm-count { font-size: .85rem; color: #6b7280; margin-left: auto; }

.adm-list { display: grid; gap: .6rem; }

.adm-card {
  display: flex; gap: .75rem; align-items: flex-start;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  padding: .85rem 1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.adm-card.off { opacity: .62; background: #fafafa; }
.adm-card-main { flex: 1; min-width: 0; }
.adm-title {
  font-weight: 700; font-size: .98rem; color: #111827;
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.adm-sub {
  margin-top: .3rem; font-size: .8rem; color: #6b7280;
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.adm-terms {
  margin-top: .4rem; font-size: .78rem; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .35rem .5rem;
}
.adm-actions { display: flex; gap: .35rem; }
.adm-actions .btn { padding: .35rem .55rem; border-radius: 10px; }

.adm-chip {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; padding: .15rem .45rem; border-radius: 999px;
  background: #f3f4f6; color: #4b5563;
}
.adm-chip.chip-on { background: #dcfce7; color: #166534; }
.adm-chip.chip-off { background: #fee2e2; color: #991b1b; }
.adm-chip.chip-hot { background: #ffedd5; color: #9a3412; }
.adm-chip.chip-iced { background: #e0f2fe; color: #075985; }
.adm-chip.chip-point { background: #ede9fe; color: #5b21b6; }
.adm-chip.chip-code { background: #111827; color: #fff; font-family: "JetBrains Mono", monospace; }
.adm-chip.chip-game { background: #0f766e; color: #fff; }

.adm-empty, .adm-loading {
  text-align: center; color: #9ca3af; padding: 2rem 1rem;
  border: 1px dashed #e5e7eb; border-radius: 14px; background: #fff;
}
.adm-empty i { font-size: 1.6rem; margin-bottom: .5rem; }

/* ---------- Panel & tab ---------- */
.adm-panel {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.adm-panel h5 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.adm-panel .adm-panel-sub { font-size: .82rem; color: #6b7280; margin-bottom: .9rem; }

.adm-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.adm-tab {
  border: 1px solid #e5e7eb; background: #fff; border-radius: 999px;
  padding: .45rem .95rem; font-size: .85rem; font-weight: 600; color: #4b5563;
}
.adm-tab.active { background: #111827; color: #fff; border-color: #111827; }

/* ---------- Form ---------- */
.adm-form { text-align: left; font-size: .88rem; }
.adm-form label { display: block; font-weight: 600; font-size: .78rem; color: #374151; margin: .55rem 0 .2rem; }
.adm-input {
  width: 100%; border: 1px solid #d1d5db; border-radius: 10px;
  padding: .5rem .65rem; font-size: .88rem; background: #fff; color: #111827;
}
.adm-input:focus { outline: none; border-color: #111827; box-shadow: 0 0 0 3px rgba(17, 24, 39, .08); }
.adm-grid2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem .7rem; }
.adm-note {
  margin-top: .8rem; font-size: .76rem; color: #4b5563;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: .5rem .65rem;
}

/* ---------- Preview daily reward ---------- */
.dr-preview { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.dr-day {
  min-width: 74px; text-align: center; border: 1px solid #e5e7eb;
  border-radius: 12px; padding: .45rem .3rem; background: #f9fafb;
}
.dr-day-n { font-size: .7rem; color: #6b7280; }
.dr-day-p { font-weight: 800; color: #5b21b6; }

@media (max-width: 640px) {
  .adm-grid2 { grid-template-columns: 1fr; }
  .adm-card { flex-direction: column; }
  .adm-actions { align-self: flex-end; }
  .adm-toolbar .form-control, .adm-toolbar .form-select { max-width: none; flex: 1 1 45%; }
}

/* =========================================================
   SUBMENU NAVIGASI "MANAJEMEN"
   ========================================================= */
.nav-group { position: relative; }

.nav-group-toggle {
  display: flex !important;
  align-items: center;
  gap: .55rem;
  text-align: left;
}

.nav-group-toggle .nav-caret {
  margin-left: auto;
  font-size: .72rem;
  opacity: .75;
  transition: transform .25s ease;
}

.nav-group-toggle .nav-caret.rotated { transform: rotate(180deg); }
.nav-group-toggle.open { /*background: rgba(200, 161, 101, .18);*/ }

/* Wrapper tunggal supaya animasi buka/tutup benar-benar 0 -> auto */
.nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}

.nav-submenu.open { grid-template-rows: 1fr; }

.nav-submenu .nav-submenu-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-left: .35rem;
  border-left: 2px solid rgba(255, 255, 255, .14);
  margin-left: .55rem;
}

.nav-submenu.open .nav-submenu-inner { padding-top: .4rem; }

.nav-submenu .nav-sub-item {
  display: flex !important;
  align-items: center;
  gap: .55rem;
  width: 100%;
  margin: 0;
  padding: .5rem .7rem;
  font-size: .9rem;
  text-align: left;
  border: 0;
  border-radius: .55rem;
  opacity: .88;
  transition: background .18s ease, opacity .18s ease;
}

.nav-submenu .nav-sub-item:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.nav-submenu .nav-sub-item.active {
  opacity: 1;
  /*background: rgba(200, 161, 101, .22);
  box-shadow: inset 3px 0 0 var(--brand, #c8a165);*/
}

/* Kartu statistik gabungan member & transaksi */
.stat-card.stat-5 .stat-value {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.stat-card.stat-5 .stat-sep {
  font-size: .8em;
  opacity: .35;
}

.stat-card.stat-5 .stat-foot { white-space: normal; }

/* QR pada struk (preview layar) */
.receipt-qr { text-align: center; padding: 6px 0 2px; }
.receipt-qr-box { display: flex; justify-content: center; margin-bottom: 6px; }
.receipt-qr-box img, .receipt-qr-box canvas { display: block; }
.receipt-qr-code { font-weight: 700; letter-spacing: .5px; font-size: 12px; }
.receipt-qr-note { font-size: 10px; line-height: 1.35; margin-top: 3px; }

/* Tombol pengaturan urutan tampilan */
.order-btns { display: inline-flex; gap: .25rem; }
.order-btns .btn { padding: .2rem .45rem; line-height: 1; }

/* Netralkan gaya bawaan SweetAlert2 di dalam form admin agar sejajar */
.adm-form .swal2-input,
.adm-form .swal2-textarea,
.adm-form .swal2-select {
  width: 100%;
  margin: 0;
  height: auto;
  font-size: .88rem;
  box-shadow: none;
}


/* ==== [css/v12.css] ==== */
/* =========================================================
   AMAZZA COFFEE — DASHBOARD v12
   1) Kartu pengaturan memanjang horizontal
   2) Tombol modal detail pesanan (gap & tata letak)
   3) Area konten yang bisa discroll
   4) Overlay maintenance dashboard
   ========================================================= */

/* ---------- 1. PENGATURAN: SATU KARTU = SATU BARIS PANJANG 
.st-grid { grid-template-columns: 1fr; gap: .9rem; }

.st-card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 210px;
  align-items: stretch;
}
.st-card > header {
  border-bottom: 0;
  border-right: 1px solid #f1f4f8;
  align-items: center;
  background: #fbfcfe;
}
.st-card > .st-body { padding: 1rem 1.1rem; }
.st-card > footer {
  border-top: 0;
  border-left: 1px solid #f1f4f8;
  display: flex;
  align-items: center;
  background: #fbfcfe;
}
.st-card > footer .btn { width: 100%; }
---------- */
@media (max-width: 991.98px) {
  .st-card { grid-template-columns: 1fr; }
  .st-card > header { border-right: 0; border-bottom: 1px solid #f1f4f8; }
  .st-card > footer { border-left: 0; border-top: 1px solid #f1f4f8; }
}

/* ---------- 2. MODAL DETAIL PESANAN ---------- */
.struk-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.struk-foot .btn {
  flex: 1 1 140px;
  grid-column: auto;      /* batalkan aturan grid lama */
  margin: 0;
}
.struk-foot .btn[style*="display: none"],
.struk-foot .btn[style*="display:none"] { display: none !important; }
.struk-foot .btn-danger { flex: 0 0 auto; }

#detailModal .modal-body .card-body > .d-grid:empty { display: none !important; }
#detailModal .modal-body { padding-top: 0; }

/* ---------- 3. KONTEN YANG BISA DISCROLL ---------- */
.amz-scroll {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.amz-scroll::-webkit-scrollbar { width: 7px; }
.amz-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.amz-scroll::-webkit-scrollbar-track { background: transparent; }

#gameLog.amz-scroll,
#gamePrizeList.amz-scroll { max-height: min(55vh, 460px); }

/* ---------- 4. SIDEBAR: TOMBOL AKTIF ---------- */
.mobile-menu-content .mm-btn.active,
.sidebar .nav-group-toggle.is-active-group {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}

/* ---------- 5. OVERLAY MAINTENANCE (DASHBOARD) ---------- */
.maint-overlay-admin {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(15, 23, 42, .93);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.maint-overlay-admin .mo-box {
  background: #fff; border-radius: 20px; padding: 30px 26px; max-width: 420px;
  text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.maint-overlay-admin .mo-box i { font-size: 40px; color: #f59e0b; }
.maint-overlay-admin .mo-box h3 { margin: 14px 0 6px; font-size: 1.15rem; font-weight: 800; }
.maint-overlay-admin .mo-box p { color: #64748b; font-size: .92rem; margin-bottom: 18px; }


/* ==== [css/v13.css] ==== */
/* =========================================================
   AMAZZA COFFEE — v13
   Logo brand + switch member/non-member pada pembayaran
   ========================================================= */

/* ---------- LOGO ---------- */
.brand-img { object-fit: contain; display: block; }

/* logo pada halaman login */
#loginLogoBox .brand-img {
  width: 100%; height: 100%;
  border-radius: 18px;
  background: #fff;
  padding: 6px;
}
#loginLogoBox:has(.brand-img[style*="display: block"]),
#loginLogoBox:has(img.brand-img:not([style*="none"])) {
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
}

/* logo pada latar gelap (sidebar & header mobile) => dibuat putih */
.brand-img-dark {
  filter: brightness(0) invert(1);
  opacity: .95;
}

.sb-brand { display: flex; align-items: center; gap: 8px; }
.sb-logo { width: 48px; height: 48px; flex: 0 0 auto; }
.mobile-header .mh-title { display: flex; align-items: center; gap: 8px; }
.mh-logo { width: 24px; height: 24px; flex: 0 0 auto; }

/* ---------- SWITCH MEMBER / NON-MEMBER ---------- */
.pay-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: #f1f5f9; border-radius: 12px; padding: 4px;
}
.pay-switch-btn {
  border: none; background: transparent; border-radius: 9px;
  padding: 9px 8px; font-size: 13px; font-weight: 600; color: #64748b;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pay-switch-btn.active {
  background: #fff; color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
}

/* ---------- PENCARIAN MEMBER ---------- */
.pay-member {
  border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px; background: #f8fafc;
}
.pay-member-label { font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.pay-member-list { max-height: 190px; overflow-y: auto; margin-top: 6px; }
.pay-member-item {
  width: 100%; text-align: left; border: 1px solid #e2e8f0; background: #fff;
  border-radius: 10px; padding: 8px 10px; margin-top: 6px;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
}
.pay-member-item:hover { border-color: #2563eb; background: #eff6ff; }
.pmi-nama { font-weight: 600; font-size: 13px; color: #0f172a; }
.pmi-user { grid-row: 2; font-size: 12px; color: #64748b; }
.pmi-poin { grid-row: 1 / span 2; align-self: center; font-size: 12px; font-weight: 600; color: #16a34a; }
.pay-member-empty { font-size: 12px; color: #94a3b8; padding: 8px 2px; }
.pay-member-picked {
  margin-top: 8px; font-size: 13px; color: #166534;
  background: #dcfce7; border-radius: 10px; padding: 8px 10px;
  display: flex; align-items: center; gap: 6px;
}
.pay-member-clear {
  margin-left: auto; border: none; background: transparent; color: #166534;
}
.pay-member-hint { margin-top: 8px; font-size: 11px; color: #64748b; }
.pay-poin-est {
  margin-top: 8px; font-size: 12px; color: #7c2d12;
  background: #ffedd5; border-radius: 10px; padding: 8px 10px;
  border: 1px dashed #fdba74;
}
.pay-poin-est b { font-weight: 700; }
.pay-poin-est .pay-poin-sisa {
  margin-top: 5px;
  font-size: 11px;
  color: #9a3412;
  border-top: 1px dashed rgba(251, 146, 60, .5);
  padding-top: 5px;
}
html[data-amz-tema="on"] .pay-poin-est .pay-poin-sisa { color: #fdba74; }
html[data-amz-tema="on"] .pay-poin-est {
  color: #fed7aa; background: rgba(124, 45, 18, .35); border-color: rgba(251, 146, 60, .45);
}

/* ---------- STRUK: NOTIF POIN MEMBER ---------- */
.receipt-member { text-align: center; margin-top: 6px; }
.receipt-member-title { font-size: 12px; letter-spacing: .5px; }
.receipt-member-name { font-size: 12px; margin-top: 2px; }
.receipt-member-poin { font-size: 12px; margin-top: 4px; font-weight: 600; }
.receipt-member-note { font-size: 11px; margin-top: 4px; }


/* ==== [css/v14.css] ==== */
/* =========================================================
   AMAZZA COFFEE — v14
   Inventori stok, pembatasan jam, grup varian / add-on
   ========================================================= */

/* ---------- Badge pada kartu menu kasir ---------- */
.v14-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.v14-badge {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 14px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.v14-badge i { font-size: 9.5px; }
.v14-stok  { background: #e8f5ec; color: #1a7f45; border-color: #bfe3cd; }
.v14-tipis { background: #fff4e0; color: #a15c00; border-color: #ffdca8; }
.v14-habis { background: #fdeaea; color: #b02525; border-color: #f6c7c7; }
.v14-jam   { background: #e8f0fe; color: #1a4fa1; border-color: #c5d8fb; }
.v14-jam-off { background: #eceff3; color: #5b6673; border-color: #d6dce3; }
.v14-varian { background: #f3ecff; color: #5b32a8; border-color: #ddcdfa; }

/* ---------- Grup varian pada modal konfigurasi ---------- */
.v14-groups .v14-group { margin-bottom: 10px; }
.v14-group > label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.v14-wajib {
  font-size: 10px;
  font-weight: 700;
  color: #b02525;
  background: #fdeaea;
  border-radius: 999px;
  padding: 2px 7px;
}
.v14-hint { color: #7a828c; font-weight: 500; font-size: 11px; }

.v14-opts { flex-wrap: wrap; }
.opt-btn.v14-opt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  line-height: 1.25;
}
.opt-btn.v14-opt b { font-weight: 700; }
.opt-btn.v14-opt .v14-link {
  font-size: 10px;
  opacity: .75;
  font-weight: 600;
}
.opt-btn.v14-off {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
}
.v14-opt-off {
  font-size: 10px;
  font-weight: 700;
  color: #b02525;
}

/* ---------- Admin: inventori ---------- */
.v14-stok-act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.v14-stok-card .adm-title { flex-wrap: wrap; }

.v14-hari {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}
.v14-hari-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}
.v14-hari-item input { accent-color: #198754; }

/* ---------- Admin: kaitan grup varian ke menu ---------- */
.v14-linklist {
  max-height: 300px;
  overflow: auto;
  border: 1px solid #e5e9ee;
  border-radius: 10px;
  padding: 6px;
  margin: 8px 0;
  text-align: left;
}
.v14-linkitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.v14-linkitem:hover { background: #f5f7fa; }
.v14-linkitem input { accent-color: #198754; }
.v14-linkitem small { color: #7a828c; margin-left: 6px; }
.v14-linkitem i { color: #7a828c; font-style: normal; }

/* ---------- Kartu stok ---------- */
.v14-log { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.v14-log th, .v14-log td {
  border-bottom: 1px solid #eef1f5;
  padding: 7px 8px;
  text-align: left;
}
.v14-log th { color: #6b7480; font-weight: 700; background: #f7f9fb; }
.v14-pos { color: #1a7f45; font-weight: 700; }
.v14-neg { color: #b02525; font-weight: 700; }


/* ==== [css/v15.css] ==== */
/* =========================================================
   AMAZZA COFFEE — GAYA v15
   Bahan baku, resep menu, dan notifikasi stok
   ========================================================= */

/* ---------- Badge kartu menu kasir ---------- */
.v15-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.v15-badge {
  font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px; line-height: 1.5;
}
.v15-badge.v15-bahan { background: #e8f5e9; color: #1b5e20; }
.v15-badge.v15-bahan-tipis { background: #fff8e1; color: #a35b00; }
.v15-badge.v15-bahan-habis { background: #fdecea; color: #b3261e; }

/* ---------- Kartu bahan baku ---------- */
.v15-bahan-card.off { opacity: .72; }
.v15-bahan-act { display: flex; flex-wrap: wrap; gap: 4px; }
.v15-bahan-act .btn { padding: .25rem .5rem; font-size: .8rem; }

/* ---------- Editor resep di form menu ---------- */
.v15-resep {
  border: 1px dashed #c8d6c8; border-radius: 12px; padding: 10px 12px;
  margin: 10px 0; background: #fbfdfb; text-align: left;
}
.v15-resep-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.v15-resep-tools { display: flex; align-items: center; gap: 8px; }
.v15-switch { font-size: .78rem; display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.v15-resep-rows { display: flex; flex-direction: column; gap: 6px; }
.v15-resep-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 54px 96px 36px;
  gap: 6px; align-items: center;
}
.v15-resep-row .adm-input { margin: 0; }
.v15-r-satuan { font-size: .74rem; color: #6b7280; }
.v15-r-sub { font-size: .78rem; font-weight: 600; text-align: right; }
.v15-resep-empty { font-size: .8rem; color: #6b7280; padding: 6px 2px; }
.v15-resep-total {
  margin-top: 8px; font-size: .84rem; padding-top: 6px; border-top: 1px solid #e6ece6;
}
.v15-resep-chip {
  font-size: .72rem; font-weight: 600; color: #1b5e20;
  background: #e8f5e9; border-radius: 999px; padding: 2px 8px;
}
.adm-input.v15-auto { background: #f1f5f9; font-weight: 700; }

@media (max-width: 575px) {
  .v15-resep-row { grid-template-columns: minmax(0, 1fr) 80px 40px; }
  .v15-r-sub { grid-column: 1 / -1; text-align: left; }
}

/* ---------- Lonceng peringatan ---------- */
.v15-bell {
  position: fixed; right: 16px; bottom: 96px; z-index: 1080; cursor: pointer;
  background: #fff8e1; color: #a35b00; border: 1px solid #f0d38a;
  border-radius: 999px; padding: 8px 14px; font-size: .8rem; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  display: inline-flex; align-items: center; gap: 8px;
}
.v15-bell.v15-bell-danger { background: #fdecea; color: #b3261e; border-color: #f3b4ae; }
.v15-bell-count {
  background: currentColor; color: #fff; border-radius: 999px;
  min-width: 20px; text-align: center; padding: 0 6px; font-size: .72rem;
}
.v15-bell-danger .v15-bell-count { color: #fff; }
.v15-bell-text { display: none; }
@media (min-width: 576px) { .v15-bell-text { display: inline; } }

/* ---------- Daftar peringatan & kartu stok ---------- */
.v15-toast { font-size: .8rem; text-align: left; line-height: 1.6; }
.v15-alert-list { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.v15-alert-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid #eef0f2; border-radius: 10px; padding: 8px 10px;
}
.v15-alert-item.off { background: #fdecea; border-color: #f3b4ae; }
.v15-alert-item small { display: block; color: #6b7280; font-size: .74rem; }
.v15-log { max-height: 60vh; overflow: auto; }
.v15-log-table { width: 100%; font-size: .78rem; border-collapse: collapse; }
.v15-log-table th, .v15-log-table td {
  border-bottom: 1px solid #eef0f2; padding: 6px 8px; text-align: left; white-space: nowrap;
}
.v15-log-table th { background: #f7f9f7; font-weight: 700; }
.v15-plus { color: #1b5e20; font-weight: 700; }
.v15-minus { color: #b3261e; font-weight: 700; }


/* ==== [css/v16.css] ==== */
/* =========================================================
   AMAZZA COFFEE — GAYA v16
   Ceklis varian suhu (Hot / Iced) pada form Kelola Menu
   ========================================================= */

.v16-varian {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.v16-chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1.5px solid #e2e2e6;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #4a4a52;
  background: #fff;
  cursor: pointer;
  transition: all .15s ease;
  margin: 0;
}

.v16-chk:hover { border-color: #c9a227; }

.v16-chk.on {
  border-color: #c9a227;
  background: #fff9e6;
  color: #8a6d0b;
}

.v16-chk input { accent-color: #c9a227; cursor: pointer; }

.v16-varian-note {
  flex: 1 1 100%;
  font-size: 11px;
  color: #8a8a93;
}

.v16-hint { color: #8a8a93; font-weight: 500; }

.v16-box {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px dashed #d9d9e0;
  border-radius: 12px;
  background: #fbfdfb;
  text-align: left;
}

.v16-box-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #4a4a52;
  margin-bottom: 8px;
}

.v16-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #4a4a52;
  margin: 0;
  cursor: pointer;
}

.v16-switch input { accent-color: #c9a227; }

.v16-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}

.v16-warn {
  flex: 1 1 100%;
  margin-top: 6px;
  font-size: 11.5px;
  color: #b4232a;
}

.v16-harga-rows { margin-top: 10px; display: none; }

.v16-harga-row {
  display: grid;
  grid-template-columns: 62px 1fr 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.v16-harga-lbl {
  font-size: 12px;
  font-weight: 700;
  color: #4a4a52;
}

@media (max-width: 575.98px) {
  .v16-harga-row { grid-template-columns: 1fr 1fr; }
  .v16-harga-lbl { grid-column: 1 / -1; }
}


/* ==== [css/v17.css] ==== */
/* =========================================================
   AMAZZA COFFEE — GAYA v17
   Kartu inventori gabungan varian + form ceklis yang rapih
   ========================================================= */

.v17-card .adm-card-main { display: flex; flex-direction: column; gap: 8px; }

.v17-var-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.v17-var {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fafafa;
  font-size: 0.85rem;
}
.v17-var.is-off { background: #fdf0f0; border-color: #f3cfcf; }

.v17-var-tipe { font-weight: 600; color: #333; }
.v17-var-kode { color: #888; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.v17-var-stok {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eee;
  color: #555;
  white-space: nowrap;
}
.v17-var-stok.ok   { background: #e8f5ec; color: #1a7f45; }
.v17-var-stok.warn { background: #fff5e0; color: #a86500; }
.v17-var-stok.off  { background: #fdeaea; color: #b02a2a; }

.v17-var-act { display: flex; gap: 4px; }
.v17-var-act .btn { padding: 2px 8px; line-height: 1.2; }

.v17-act { align-self: flex-start; }

/* ---------- Form dialog ---------- */
.v17-form { text-align: left; }

.v17-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #f7f9f8;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
}
.v17-check input { width: 18px; height: 18px; accent-color: #198754; }

.v17-fields { margin-bottom: 6px; }

.v17-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 520px) {
  .v17-grid { grid-template-columns: 1fr; }
  .v17-var { grid-template-columns: 1fr auto; }
  .v17-var-kode { display: none; }
}

.v17-field { display: flex; flex-direction: column; gap: 4px; }
.v17-field label { font-size: 0.8rem; color: #555; margin: 0; }
.v17-field label small { color: #999; font-weight: 400; }

.v17-sublabel { display: block; margin: 12px 0 6px; font-size: 0.8rem; color: #555; }


/* ==== [css/v18.css] ==== */
/* =========================================================
   AMAZZA COFFEE — v18 : GRADASI SERAGAM (DASHBOARD)
   Semua elemen penting memakai variabel gradasi yang dihasilkan
   js/theme.js (--grad-primary, --grad-accent, --grad-danger, ...)
   sehingga warnanya sama dengan aplikasi member.
   Dimuat PALING AKHIR agar menimpa gaya lama.
   ========================================================= */

/* Nilai cadangan bila js/theme.js belum sempat jalan */
:root {
  --grad-primary: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  --grad-primary-90: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
  --grad-primary-180: linear-gradient(180deg, #16a34a 0%, #22c55e 100%);
  --grad-accent: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  --grad-accent-90: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
  --grad-warning: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --grad-warning-180: linear-gradient(180deg, #f59e0b 0%, #f97316 100%);
  --grad-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --grad-dark: linear-gradient(180deg, #0f172a 0%, #111a2e 100%);
  --grad-dark-180: linear-gradient(180deg, #0f172a 0%, #111a2e 100%);
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --on-warning: #3b2a05;
  --primary-ring: rgba(22,163,74,.25);
  --primary-shadow: 0 10px 24px rgba(22,163,74,.28);
  --primary-soft: #dcfce7;
}

/* Hanya aktif bila tema dinyalakan di Pengaturan */
/* ---------- Tombol utama ---------- */
html[data-amz-tema="on"] .btn-primary,
html[data-amz-tema="on"] .btn-success,
html[data-amz-tema="on"] .swal2-confirm,
html[data-amz-tema="on"] .btn-brand {
    background-image: var(--grad-primary) !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--on-primary) !important;
  }
html[data-amz-tema="on"] .btn-primary:hover,
html[data-amz-tema="on"] .btn-success:hover,
html[data-amz-tema="on"] .btn-brand:hover {
    filter: brightness(1.06);
    box-shadow: var(--primary-shadow);
  }
html[data-amz-tema="on"] .btn-info { background-image: var(--grad-accent) !important; border: none !important; color: var(--on-accent) !important; }
html[data-amz-tema="on"] .btn-danger { background-image: var(--grad-danger) !important; border: none !important; color: var(--on-danger) !important; }
html[data-amz-tema="on"] .btn-warning { background-image: var(--grad-warning) !important; border: none !important; color: var(--on-warning) !important; }
html[data-amz-tema="on"] .btn-outline-primary { border-color: var(--primary-1) !important; color: var(--primary-1) !important; }
html[data-amz-tema="on"] .btn-outline-primary:hover {
    background-image: var(--grad-primary) !important;
    color: var(--on-primary) !important;
    border-color: transparent !important;
  }

  /* ---------- Sidebar & topbar ---------- */
html[data-amz-tema="on"] .sidebar,
html[data-amz-tema="on"] .app-sidebar,
html[data-amz-tema="on"] #sidebar,
html[data-amz-tema="on"] .mm-panel,
html[data-amz-tema="on"] .mobile-menu {
    background: var(--grad-dark-180) !important;
  }
html[data-amz-tema="on"] .sidebar .nav-item.active,
html[data-amz-tema="on"] .sidebar .nav-sub-item.active,
html[data-amz-tema="on"] .nav-sub-item.active,
html[data-amz-tema="on"] .mm-btn.active {
    background-image: var(--grad-primary) !important;
    color: var(--on-primary) !important;
    border-color: transparent !important;
  }

  /* ---------- Tab & chip aktif ---------- */
html[data-amz-tema="on"] .adm-tab.active,
html[data-amz-tema="on"] .page-tabs .adm-tab.active,
html[data-amz-tema="on"] .nav-pills .nav-link.active {
    background-image: var(--grad-primary) !important;
    border-color: transparent !important;
    color: var(--on-primary) !important;
  }
html[data-amz-tema="on"] .badge.bg-primary,
html[data-amz-tema="on"] .badge.bg-success { background-image: var(--grad-primary) !important; color: var(--on-primary) !important; }
html[data-amz-tema="on"] .badge.bg-info { background-image: var(--grad-accent) !important; color: var(--on-accent) !important; }
html[data-amz-tema="on"] .badge.bg-danger { background-image: var(--grad-danger) !important; color: var(--on-danger) !important; }
html[data-amz-tema="on"] .badge.bg-warning { background-image: var(--grad-warning) !important; color: var(--on-warning) !important; }

  /* ---------- Kartu statistik / KPI ---------- */
html[data-amz-tema="on"] .stat-1 .stat-ico,
html[data-amz-tema="on"] .cat-bars .cat-fill,
html[data-amz-tema="on"] #incomeList .list-group-item::before,
html[data-amz-tema="on"] .top-list li:nth-child(1) .rank { background: var(--grad-primary-90) !important; }
html[data-amz-tema="on"] .stat-2 .stat-ico,
html[data-amz-tema="on"] .recent-list .r-ico,
html[data-amz-tema="on"] .cat-bars .cat-row:nth-child(2) .cat-fill,
html[data-amz-tema="on"] .top-list li:nth-child(2) .rank { background: var(--grad-accent-90) !important; }
html[data-amz-tema="on"] .stat-3 .stat-ico,
html[data-amz-tema="on"] #queueList .list-group-item::before,
html[data-amz-tema="on"] .cat-bars .cat-row:nth-child(3) .cat-fill,
html[data-amz-tema="on"] .top-list li:nth-child(3) .rank { background: var(--grad-warning-180) !important; }
html[data-amz-tema="on"] .stat-4 .stat-ico,
html[data-amz-tema="on"] .cat-bars .cat-row:nth-child(4) .cat-fill { background: var(--grad-accent) !important; }
html[data-amz-tema="on"] .rp-stat-net { background: var(--grad-primary) !important; color: var(--on-primary) !important; }
html[data-amz-tema="on"] .st-card > header > i { background: var(--grad-primary) !important; color: var(--on-primary) !important; }

  /* ---------- Judul & aksen halus ---------- */
html[data-amz-tema="on"] .dash-title i,
html[data-amz-tema="on"] .sec-title i { color: var(--primary-1) !important; }
html[data-amz-tema="on"] .st-status { border-left: 4px solid var(--primary-1); }

  /* ---------- Fokus input ---------- */
html[data-amz-tema="on"] .form-control:focus,
html[data-amz-tema="on"] .form-select:focus {
    border-color: var(--primary-1) !important;
    box-shadow: 0 0 0 .2rem var(--primary-ring) !important;
  }

  /* ---------- Progress & spinner ---------- */
html[data-amz-tema="on"] .progress-bar { background-image: var(--grad-primary-90) !important; }
html[data-amz-tema="on"] .spinner-border.text-primary { color: var(--primary-1) !important; }

/* =========================================================
   PANEL PENGATURAN "TEMA & GRADASI" (dibuat oleh js/v18.js)
   ========================================================= */
.tm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .9rem;
}
.tm-item {
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  padding: .7rem .8rem;
  background: #fbfcfe;
}
.tm-item h6 { margin: 0 0 .1rem; font-size: .86rem; font-weight: 700; }
.tm-item p { margin: 0 0 .5rem; font-size: .74rem; color: #64748b; }
.tm-colors { display: flex; gap: .5rem; align-items: center; }
.tm-colors input[type="color"] {
  width: 46px; height: 38px; padding: 2px;
  border: 1px solid #dbe3ec; border-radius: 10px; background: #fff; cursor: pointer;
}
.tm-swatch {
  flex: 1; height: 38px; border-radius: 10px;
  border: 1px solid rgba(15,23,42,.08);
}
.tm-presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.tm-preset {
  border: 1px solid #dbe3ec; border-radius: 999px;
  padding: .35rem .5rem .35rem .35rem;
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; cursor: pointer; font-size: .8rem; font-weight: 600;
}
.tm-preset:hover { border-color: #94a3b8; }
.tm-preset.active { border-color: var(--primary-1, #16a34a); box-shadow: 0 0 0 3px var(--primary-ring, rgba(22,163,74,.2)); }
.tm-preset .dot { width: 26px; height: 26px; border-radius: 50%; display: inline-block; }
.tm-angle { display: flex; align-items: center; gap: .75rem; }
.tm-angle input[type="range"] { flex: 1; }
.tm-angle .val { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 52px; text-align: right; }

/* Pratinjau */
.tm-preview { display: grid; gap: .6rem; }
.tm-preview .pv-hero {
  border-radius: 16px; padding: 1rem; color: var(--on-primary, #fff);
  background: var(--grad-primary);
}
.tm-preview .pv-hero b { font-size: 1.15rem; }
.tm-preview .pv-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.tm-preview .pv-chip {
  border-radius: 999px; padding: .35rem .8rem; font-size: .78rem; font-weight: 700; color: #fff;
}
.tm-preview .pv-chip.p { background: var(--grad-primary); color: var(--on-primary); }
.tm-preview .pv-chip.a { background: var(--grad-accent); color: var(--on-accent); }
.tm-preview .pv-chip.w { background: var(--grad-warning); color: var(--on-warning); }
.tm-preview .pv-chip.d { background: var(--grad-danger); color: var(--on-danger); }
.tm-preview .pv-dark {
  border-radius: 14px; padding: .7rem .9rem; color: #fff; font-size: .8rem;
  background: var(--grad-dark);
}
.tm-note { font-size: .76rem; color: #64748b; margin: .6rem 0 0; }


/* ==== [css/v19.css] ==== */
/* =========================================================
   AMAZZA COFFEE — v19 : PENYELARASAN WARNA MENYELURUH (DASHBOARD)
   Melengkapi v18. Menyapu elemen-elemen yang latarnya masih
   "hard-coded" (hijau/biru/ungu tetap) agar ikut gradasi tema.
   Semua nilai memakai variabel dari js/theme.js:
     --grad-*        gradasi penuh
     --*-soft/-soft-2  latar lembut (chip, badge, banner)
     --*-text        warna teks di atas latar lembut
     --*-line        garis tepi selaras tema
     --surface*      permukaan halaman/tabel/scrollbar
   Dimuat PALING AKHIR (setelah v18).
   ========================================================= */

/* Nilai cadangan bila js/theme.js belum sempat jalan */
:root {
  --primary-soft: #dcfce7;
  --primary-soft-2: #f0fdf4;
  --primary-text: #0f5132;
  --primary-line: #86d5a5;
  --primary-fade: rgba(22, 163, 74, .12);
  --grad-primary-soft: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
  --accent-soft: #dbeafe;
  --accent-soft-2: #eff6ff;
  --accent-text: #0b3a6b;
  --accent-line: #93c5fd;
  --warning-soft: #fef3c7;
  --warning-text: #7a4a05;
  --warning-line: #fcd34d;
  --danger-soft: #fee2e2;
  --danger-text: #8f1d1d;
  --danger-line: #fca5a5;
  --surface: #f6f8fb;
  --surface-2: #ffffff;
  --surface-3: #eef2f7;
  --surface-line: #e6ebf2;
  --surface-head: #f7f9fb;
  --scroll-thumb: #cbd5e1;
  --scroll-thumb-hover: #94a3b8;
}

/* ============ 1. PERMUKAAN HALAMAN & SCROLLBAR ============ */
html[data-amz-tema="on"] body,
html[data-amz-tema="on"] .app-main,
html[data-amz-tema="on"] .content,
html[data-amz-tema="on"] .page-wrap { background-color: var(--surface); }

html[data-amz-tema="on"] *::-webkit-scrollbar-thumb,
html[data-amz-tema="on"] .amz-scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
html[data-amz-tema="on"] *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* Kartu & panel: garis tepi ikut tema (sangat halus, tetap netral) */
html[data-amz-tema="on"] .card,
html[data-amz-tema="on"] .st-card,
html[data-amz-tema="on"] .adm-card,
html[data-amz-tema="on"] .tm-item { border-color: var(--surface-line); }
html[data-amz-tema="on"] .tm-item { background: var(--surface-2); }

/* Kepala tabel & baris hover */
html[data-amz-tema="on"] .table > thead th,
html[data-amz-tema="on"] .v14-log th,
html[data-amz-tema="on"] .v15-log-table th { background: var(--surface-head) !important; }
html[data-amz-tema="on"] .table-hover > tbody > tr:hover > * { background-color: var(--primary-fade) !important; }

/* Segmented / tab container */
html[data-amz-tema="on"] .page-tabs,
html[data-amz-tema="on"] .seg-wrap { background: var(--surface-3) !important; }

/* Skeleton loading ikut nuansa tema */
html[data-amz-tema="on"] .skeleton,
html[data-amz-tema="on"] .sk-line {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%) !important;
}

/* ============ 2. KARTU STATISTIK / KPI / RANK ============ */
html[data-amz-tema="on"] .stat-1 .stat-ico { background: var(--grad-primary) !important; }
html[data-amz-tema="on"] .stat-2 .stat-ico { background: var(--grad-accent) !important; }
html[data-amz-tema="on"] .stat-3 .stat-ico { background: var(--grad-warning) !important; }
html[data-amz-tema="on"] .stat-4 .stat-ico { background: var(--grad-hero, var(--grad-dark)) !important; }

html[data-amz-tema="on"] .top-list li .rank { background: var(--grad-dark) !important; color: #fff !important; }
html[data-amz-tema="on"] .top-list li:nth-child(1) .rank { background: var(--grad-primary-90) !important; color: var(--on-primary) !important; }
html[data-amz-tema="on"] .top-list li:nth-child(2) .rank { background: var(--grad-accent-90) !important; color: var(--on-accent) !important; }
html[data-amz-tema="on"] .top-list li:nth-child(3) .rank { background: var(--grad-warning-180) !important; color: var(--on-warning) !important; }

html[data-amz-tema="on"] .cat-bars .cat-track,
html[data-amz-tema="on"] .bc-track { background: var(--surface-3) !important; }

/* Kartu ringkasan bergradasi bawaan (hijau/biru tetap) */
html[data-amz-tema="on"] .sum-card,
html[data-amz-tema="on"] .kpi-soft,
html[data-amz-tema="on"] .card-soft-green { background: var(--grad-primary-soft) !important; color: var(--primary-text) !important; }
html[data-amz-tema="on"] .card-blue,
html[data-amz-tema="on"] .pos-cta,
html[data-amz-tema="on"] .btn-pos,
html[data-amz-tema="on"] .cta-blue { background: var(--grad-accent) !important; color: var(--on-accent) !important; border: none !important; }
html[data-amz-tema="on"] .card-purple,
html[data-amz-tema="on"] .user-hero { background: var(--grad-hero, var(--grad-dark)) !important; color: #fff !important; }

/* ============ 3. STATUS / CHIP / BADGE LEMBUT ============ */
html[data-amz-tema="on"] .st-status-on,
html[data-amz-tema="on"] .adm-chip.chip-on,
html[data-amz-tema="on"] .v14-stok,
html[data-amz-tema="on"] .v15-badge.v15-bahan,
html[data-amz-tema="on"] .v17-var-stok.ok,
html[data-amz-tema="on"] .badge-soft-ok,
html[data-amz-tema="on"] .pay-member-ok {
  background: var(--primary-soft) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary-line) !important;
}
html[data-amz-tema="on"] .pay-member-ok button { color: var(--primary-text) !important; }

html[data-amz-tema="on"] .adm-chip.chip-iced,
html[data-amz-tema="on"] .v14-jam,
html[data-amz-tema="on"] .user-role.role-karyawan,
html[data-amz-tema="on"] #page-users .role-karyawan,
html[data-amz-tema="on"] .badge-soft-info {
  background: var(--accent-soft) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent-line) !important;
}

html[data-amz-tema="on"] .adm-chip.chip-hot,
html[data-amz-tema="on"] .st-status-warn,
html[data-amz-tema="on"] .user-role.role-owner,
html[data-amz-tema="on"] #page-users .role-owner,
html[data-amz-tema="on"] .v17-var-stok.warn,
html[data-amz-tema="on"] .badge-soft-warn {
  background: var(--warning-soft) !important;
  color: var(--warning-text) !important;
  border-color: var(--warning-line) !important;
}

html[data-amz-tema="on"] .st-status-off,
html[data-amz-tema="on"] .chip-off,
html[data-amz-tema="on"] .adm-chip.chip-off,
html[data-amz-tema="on"] .v14-habis,
html[data-amz-tema="on"] .v15-badge.v15-bahan-habis,
html[data-amz-tema="on"] .v17-var-stok.off,
html[data-amz-tema="on"] .v17-var.is-off,
html[data-amz-tema="on"] .v15-bell.v15-bell-danger,
html[data-amz-tema="on"] .v15-alert-item.off,
html[data-amz-tema="on"] .user-role.role-inactive,
html[data-amz-tema="on"] #page-users .role-inactive {
  background: var(--danger-soft) !important;
  color: var(--danger-text) !important;
  border-color: var(--danger-line) !important;
}

html[data-amz-tema="on"] .adm-chip.chip-point,
html[data-amz-tema="on"] .v14-varian {
  background: var(--accent-soft-2) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent-line) !important;
}

/* Pil status sinkronisasi di topbar */
html[data-amz-tema="on"] .sync-online { background: var(--primary-fade-strong, var(--primary-fade)) !important; color: var(--primary-2) !important; }
html[data-amz-tema="on"] .sync-pending { background: var(--warning-fade-strong, var(--warning-fade)) !important; color: var(--warning-2) !important; }

/* ============ 4. KONTROL & INTERAKSI ============ */
html[data-amz-tema="on"] .st-switch input:checked + span { background: var(--grad-primary-90) !important; }
html[data-amz-tema="on"] .cfg-foot .cfg-save {
  background-image: var(--grad-primary) !important;
  border-color: transparent !important;
  color: var(--on-primary) !important;
}
html[data-amz-tema="on"] .pay-member-item:hover {
  border-color: var(--primary-1) !important;
  background: var(--primary-soft-2) !important;
}
html[data-amz-tema="on"] .list-group-item.active,
html[data-amz-tema="on"] .dropdown-item.active,
html[data-amz-tema="on"] .dropdown-item:active {
  background-image: var(--grad-primary) !important;
  border-color: transparent !important;
  color: var(--on-primary) !important;
}
html[data-amz-tema="on"] .form-check-input:checked {
  background-color: var(--primary-1) !important;
  border-color: var(--primary-1) !important;
}
html[data-amz-tema="on"] .nav-tabs .nav-link.active { border-bottom-color: var(--primary-1) !important; color: var(--primary-text) !important; }
html[data-amz-tema="on"] a { color: var(--primary-text); }
html[data-amz-tema="on"] a:hover { color: var(--primary-1); }
html[data-amz-tema="on"] ::selection { background: var(--primary-fade-strong, var(--primary-fade)); }

/* Baris/kotak sorotan (highlight) */
html[data-amz-tema="on"] .row-highlight,
html[data-amz-tema="on"] .is-highlight { background: var(--primary-fade) !important; }

/* Modal & offcanvas header ikut tema (halus, tidak mencolok) */
html[data-amz-tema="on"] .modal-header,
html[data-amz-tema="on"] .offcanvas-header { background: var(--grad-primary-soft) !important; }
html[data-amz-tema="on"] .modal-header .modal-title { color: var(--primary-text) !important; }

/* Ringkasan laba/net & kartu total */
html[data-amz-tema="on"] .rp-stat-net,
html[data-amz-tema="on"] .total-card { background: var(--grad-primary) !important; color: var(--on-primary) !important; }


/* ==== [css/v20.css] ==== */
/* =========================================================
   AMAZZA COFFEE — v20 : PENYELARASAN WARNA TAHAP AKHIR (DASHBOARD)
   Menutup elemen yang masih memakai warna bawaan (hijau/biru/ungu/
   emas/kopi tetap) pada keadaan aktif (button active, item active,
   tab active, chip, medali, dsb.) agar seluruhnya mengikuti set
   warna tema. Nuansa dibuat lembut & elegan, teks selalu kontras.

   Token dari js/theme.js (v20):
     --grad-*            gradasi penuh
     --*-soft/-soft-2    latar lembut
     --*-text            teks kontras di atas latar lembut
     --*-line            garis tepi selaras tema
     --ink/-2/-muted/-faint, --line     teks & garis netral bernuansa tema
     --grad-rank-1..3, --gold-*, --silver-1, --bronze-1
     --info-1/-2, --focus-ring, --select-bg/-ink
   Dimuat PALING AKHIR (setelah v19).
   ========================================================= */

/* Nilai cadangan bila js/theme.js belum sempat jalan */
:root {
  --ink: #16213a;
  --ink-2: #334155;
  --ink-muted: #64748b;
  --ink-faint: #94a3b8;
  --line: #e2e8f0;
  --gold-1: #f59e0b;
  --gold-2: #fbbf24;
  --gold-soft: #fef3c7;
  --gold-text: #7a4a05;
  --silver-1: #8e99a8;
  --bronze-1: #b0700a;
  --info-1: #0ea5e9;
  --info-2: #2563eb;
  --focus-ring: rgba(22, 163, 74, .28);
  --select-bg: #dcfce7;
  --select-ink: #0f5132;
  --grad-rank-1: linear-gradient(90deg, #16a34a, #22c55e);
  --grad-rank-2: linear-gradient(90deg, #0ea5e9, #2563eb);
  --grad-rank-3: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* ============ 1. TOMBOL (semua varian & keadaan) ============ */
html[data-amz-tema="on"] .btn-success,
html[data-amz-tema="on"] .btn-primary,
html[data-amz-tema="on"] .btn-success:hover,
html[data-amz-tema="on"] .btn-primary:hover,
html[data-amz-tema="on"] .btn-success:focus,
html[data-amz-tema="on"] .btn-primary:focus,
html[data-amz-tema="on"] .btn-success:active,
html[data-amz-tema="on"] .btn-primary:active,
html[data-amz-tema="on"] .btn-check:checked + .btn-primary,
html[data-amz-tema="on"] .btn-check:checked + .btn-success,
html[data-amz-tema="on"] .btn-primary.active,
html[data-amz-tema="on"] .btn-success.active,
html[data-amz-tema="on"] #strukModal .btn-success {
  background-image: var(--grad-primary) !important;
  background-color: var(--primary-1) !important;
  border-color: transparent !important;
  color: var(--on-primary) !important;
}

html[data-amz-tema="on"] .btn-info,
html[data-amz-tema="on"] .btn-info:hover,
html[data-amz-tema="on"] .btn-info:active,
html[data-amz-tema="on"] .btn-info.active,
html[data-amz-tema="on"] #strukModal .btn-info,
html[data-amz-tema="on"] #strukModal .btn-success + .btn-success {
  background-image: var(--grad-accent) !important;
  background-color: var(--accent-1) !important;
  border-color: transparent !important;
  color: var(--on-accent) !important;
}

html[data-amz-tema="on"] .btn-warning,
html[data-amz-tema="on"] .btn-warning:hover,
html[data-amz-tema="on"] .btn-warning:active,
html[data-amz-tema="on"] .btn-warning.active {
  background-image: var(--grad-warning) !important;
  background-color: var(--warning-1) !important;
  border-color: transparent !important;
  color: var(--on-warning) !important;
}

html[data-amz-tema="on"] .btn-danger,
html[data-amz-tema="on"] .btn-danger:hover,
html[data-amz-tema="on"] .btn-danger:active,
html[data-amz-tema="on"] .btn-danger.active {
  background-image: var(--grad-danger) !important;
  background-color: var(--danger-1) !important;
  border-color: transparent !important;
  color: var(--on-danger) !important;
}

html[data-amz-tema="on"] .btn-dark,
html[data-amz-tema="on"] .btn-dark:hover {
  background-image: var(--grad-dark) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Tombol garis / outline & sekunder */
html[data-amz-tema="on"] .btn-outline-success,
html[data-amz-tema="on"] .btn-outline-primary {
  color: var(--primary-text) !important;
  border-color: var(--primary-line) !important;
  background: transparent !important;
}
html[data-amz-tema="on"] .btn-outline-success:hover,
html[data-amz-tema="on"] .btn-outline-primary:hover,
html[data-amz-tema="on"] .btn-outline-success.active,
html[data-amz-tema="on"] .btn-outline-primary.active {
  background: var(--primary-soft) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary-line) !important;
}
html[data-amz-tema="on"] .btn-outline-danger { color: var(--danger-text) !important; border-color: var(--danger-line) !important; }
html[data-amz-tema="on"] .btn-outline-danger:hover { background: var(--danger-soft) !important; color: var(--danger-text) !important; }
html[data-amz-tema="on"] .btn-secondary,
html[data-amz-tema="on"] .btn-light {
  background: var(--surface-3) !important;
  border-color: var(--line) !important;
  color: var(--ink-2) !important;
  background-image: none !important;
}

/* Cincin fokus semua tombol/input */
html[data-amz-tema="on"] .btn:focus-visible,
html[data-amz-tema="on"] .form-control:focus,
html[data-amz-tema="on"] .form-select:focus,
html[data-amz-tema="on"] .login-form .form-control:focus {
  border-color: var(--primary-1) !important;
  box-shadow: 0 0 0 .2rem var(--focus-ring) !important;
  outline: none !important;
}

/* ============ 2. ITEM / TAB / CHIP AKTIF ============ */
html[data-amz-tema="on"] .sidebar button.active,
html[data-amz-tema="on"] .sidebar .btn-dark.active,
html[data-amz-tema="on"] .nav-submenu .nav-sub-item.active,
html[data-amz-tema="on"] .mobile-menu-content .mm-btn.active,
html[data-amz-tema="on"] .sidebar .nav-group-toggle.is-active-group,
html[data-amz-tema="on"] .page-tabs .nav-link.active,
html[data-amz-tema="on"] .opt-btn.active,
html[data-amz-tema="on"] .filter-bar .filter-btn.active,
html[data-amz-tema="on"] .pay-switch-btn.active,
html[data-amz-tema="on"] .nav-pills .nav-link.active,
html[data-amz-tema="on"] .cfg-body .option-buttons button.active,
html[data-amz-tema="on"] .cfg-body .option-buttons button.selected,
html[data-amz-tema="on"] .tm-preset.active {
  background-image: var(--grad-primary) !important;
  background-color: var(--primary-1) !important;
  border-color: transparent !important;
  color: var(--on-primary) !important;
  box-shadow: var(--primary-glow, none) !important;
}
html[data-amz-tema="on"] .tm-preset.active { box-shadow: 0 0 0 2px var(--primary-1) inset !important; }

/* Hover item netral */
html[data-amz-tema="on"] .cfg-body .option-buttons button:hover,
html[data-amz-tema="on"] .opt-btn:hover,
html[data-amz-tema="on"] .filter-bar .filter-btn:hover,
html[data-amz-tema="on"] .tm-preset:hover {
  border-color: var(--primary-line) !important;
  background: var(--primary-soft-2) !important;
  color: var(--primary-text) !important;
}
html[data-amz-tema="on"] .cfg-body .qty-box button {
  color: var(--primary-text) !important;
  border-color: var(--primary-line) !important;
}
html[data-amz-tema="on"] .page-tabs .nav-link { color: var(--ink-2) !important; }
html[data-amz-tema="on"] .page-tabs .nav-link:hover { color: var(--ink) !important; }

/* Kartu ikon pengaturan (dulu kopi tetap) */
html[data-amz-tema="on"] .st-card > header > i { background: var(--grad-primary) !important; color: var(--on-primary) !important; }

/* Keranjang mengapung & tombol utama POS */
html[data-amz-tema="on"] #floatingCart { background-image: var(--grad-primary) !important; color: var(--on-primary) !important; }

/* ============ 3. TEKS & GARIS NETRAL ============ */
html[data-amz-tema="on"] .dash-sub,
html[data-amz-tema="on"] .stat-card .stat-label,
html[data-amz-tema="on"] .stat-card .stat-foot,
html[data-amz-tema="on"] .recent-list .r-sub,
html[data-amz-tema="on"] .st-card > header p,
html[data-amz-tema="on"] .st-hint,
html[data-amz-tema="on"] .brand-upload-hint,
html[data-amz-tema="on"] .jam-hari-row .jh-libur,
html[data-amz-tema="on"] .tm-item p,
html[data-amz-tema="on"] .tm-note,
html[data-amz-tema="on"] .pmi-user,
html[data-amz-tema="on"] .pay-member-hint,
html[data-amz-tema="on"] .maint-overlay-admin .mo-box p { color: var(--ink-muted) !important; }

html[data-amz-tema="on"] .stat-card .stat-value,
html[data-amz-tema="on"] .top-list .name,
html[data-amz-tema="on"] .recent-list .r-id,
html[data-amz-tema="on"] .cat-bars .cat-name,
html[data-amz-tema="on"] .st-preview,
html[data-amz-tema="on"] .user-name,
html[data-amz-tema="on"] .pmi-nama,
html[data-amz-tema="on"] .login-brand h3 {  }

html[data-amz-tema="on"] .st-label,
html[data-amz-tema="on"] .st-status,
html[data-amz-tema="on"] .dash-badge,
html[data-amz-tema="on"] .cat-bars .cat-val,
html[data-amz-tema="on"] .login-form label,
html[data-amz-tema="on"] .adm-form label,
html[data-amz-tema="on"] .pay-member-label,
html[data-amz-tema="on"] .jam-hari-row .jh-nama { color: var(--ink-2) !important; }

html[data-amz-tema="on"] .top-list li.empty,
html[data-amz-tema="on"] .recent-list li.empty,
html[data-amz-tema="on"] .cat-bars .empty,
html[data-amz-tema="on"] .pay-member-empty,
html[data-amz-tema="on"] .login-hint,
html[data-amz-tema="on"] .gm-log-row small,
html[data-amz-tema="on"] .gm-log-date,
html[data-amz-tema="on"] .v14-muted,
html[data-amz-tema="on"] .v15-muted { color: var(--ink-faint) !important; }

html[data-amz-tema="on"] .form-control,
html[data-amz-tema="on"] .form-select,
html[data-amz-tema="on"] .table > :not(caption) > * > * { border-color: var(--line) !important; }

/* ============ 4. STATISTIK, MEDALI & GRAFIK ============ */
html[data-amz-tema="on"] .stat-1 { border-top-color: var(--primary-1) !important; }
html[data-amz-tema="on"] .stat-2 { border-top-color: var(--accent-1) !important; }
html[data-amz-tema="on"] .stat-3 { border-top-color: var(--warning-1) !important; }
html[data-amz-tema="on"] .stat-4 { border-top-color: var(--hero-1, var(--dark-2)) !important; }

html[data-amz-tema="on"] .top-list li:nth-child(1) .rank { background-image: var(--grad-rank-1) !important; color: var(--on-primary) !important; }
html[data-amz-tema="on"] .top-list li:nth-child(2) .rank { background-image: var(--grad-rank-2) !important; color: var(--on-accent) !important; }
html[data-amz-tema="on"] .top-list li:nth-child(3) .rank { background-image: var(--grad-rank-3) !important; color: var(--on-warning) !important; }
html[data-amz-tema="on"] .top-list .rank { background-image: var(--grad-dark) !important; color: #fff !important; }

html[data-amz-tema="on"] .top-list .qty,
html[data-amz-tema="on"] .recent-list .r-amt,
html[data-amz-tema="on"] .gm-log-poin,
html[data-amz-tema="on"] .pmi-poin,
html[data-amz-tema="on"] .v14-pos,
html[data-amz-tema="on"] .v15-plus,
html[data-amz-tema="on"] .pay-member-clear { color: var(--primary-text) !important; }

html[data-amz-tema="on"] .rp-stat-minus .rp-stat-val,
html[data-amz-tema="on"] .v14-neg,
html[data-amz-tema="on"] .v14-wajib,
html[data-amz-tema="on"] .v14-opt-off,
html[data-amz-tema="on"] .v15-minus,
html[data-amz-tema="on"] .v16-warn,
html[data-amz-tema="on"] .login-error,
html[data-amz-tema="on"] .mm-logout { color: var(--danger-text) !important; }

html[data-amz-tema="on"] .recent-list .r-ico { background-image: var(--grad-accent) !important; color: var(--on-accent) !important; }
html[data-amz-tema="on"] .cat-bars .cat-fill { background-image: var(--grad-primary-90) !important; }
html[data-amz-tema="on"] .cat-bars .cat-row:nth-child(2) .cat-fill { background-image: var(--grad-accent-90) !important; }
html[data-amz-tema="on"] .cat-bars .cat-row:nth-child(3) .cat-fill { background-image: var(--grad-warning-90) !important; }
html[data-amz-tema="on"] .cat-bars .cat-row:nth-child(4) .cat-fill { background-image: var(--grad-hero, var(--grad-dark)) !important; }

html[data-amz-tema="on"] #queueList .list-group-item::before { background-image: var(--grad-warning-180) !important; }
html[data-amz-tema="on"] #incomeList .list-group-item::before { background-image: var(--grad-primary-180) !important; }

/* ============ 5. LOGIN, AVATAR & PERAN ============ */
html[data-amz-tema="on"] .login-page { background-image: var(--grad-dark) !important; }
html[data-amz-tema="on"] .login-btn {
  background-image: var(--grad-primary) !important;
  border-color: transparent !important;
  color: var(--on-primary) !important;
}
html[data-amz-tema="on"] .sidebar-user .su-avatar,
html[data-amz-tema="on"] .user-avatar,
html[data-amz-tema="on"] #page-users .user-card .user-avatar { background-image: var(--grad-primary) !important; color: var(--on-primary) !important; }
html[data-amz-tema="on"] #page-users .user-card.role-owner .user-avatar { background-image: var(--grad-hero, var(--grad-dark)) !important; }

html[data-amz-tema="on"] .user-role.role-owner,
html[data-amz-tema="on"] #page-users .role-owner {
  background: var(--warning-soft) !important; color: var(--warning-text) !important; border-color: var(--warning-line) !important;
}
html[data-amz-tema="on"] .user-role.role-karyawan,
html[data-amz-tema="on"] #page-users .role-karyawan {
  background: var(--accent-soft) !important; color: var(--accent-text) !important; border-color: var(--accent-line) !important;
}
html[data-amz-tema="on"] .user-modal .uf-error,
html[data-amz-tema="on"] #page-users .role-inactive,
html[data-amz-tema="on"] .user-role.role-inactive {
  background: var(--danger-soft) !important; color: var(--danger-text) !important; border-color: var(--danger-line) !important;
}

/* ============ 6. CHIP & BADGE SISA (ungu/emas/kopi bawaan) ============ */
html[data-amz-tema="on"] .adm-chip.chip-point,
html[data-amz-tema="on"] .dr-day-p,
html[data-amz-tema="on"] .v14-varian,
html[data-amz-tema="on"] .badge-point {
  background: var(--accent-soft-2) !important; color: var(--accent-text) !important; border-color: var(--accent-line) !important;
}
html[data-amz-tema="on"] .adm-terms,
html[data-amz-tema="on"] .v14-tipis,
html[data-amz-tema="on"] .v15-badge.v15-bahan-tipis,
html[data-amz-tema="on"] .v15-bell,
html[data-amz-tema="on"] .v17-var-stok.warn,
html[data-amz-tema="on"] .v16-chk.on {
  background: var(--warning-soft) !important; color: var(--warning-text) !important; border-color: var(--warning-line) !important;
}
html[data-amz-tema="on"] .adm-chip.chip-hot {
  background: var(--warning-soft) !important; color: var(--warning-text) !important; border-color: var(--warning-line) !important;
}
html[data-amz-tema="on"] .adm-chip.chip-iced,
html[data-amz-tema="on"] .v14-jam {
  background: var(--accent-soft) !important; color: var(--accent-text) !important; border-color: var(--accent-line) !important;
}
html[data-amz-tema="on"] .v15-resep-chip,
html[data-amz-tema="on"] .v15-badge.v15-bahan,
html[data-amz-tema="on"] .v17-var-stok.ok,
html[data-amz-tema="on"] .v14-stok {
  background: var(--primary-soft) !important; color: var(--primary-text) !important; border-color: var(--primary-line) !important;
}
html[data-amz-tema="on"] .v14-habis,
html[data-amz-tema="on"] .v15-badge.v15-bahan-habis,
html[data-amz-tema="on"] .v17-var-stok.off,
html[data-amz-tema="on"] .v17-var.is-off {
  background: var(--danger-soft) !important; color: var(--danger-text) !important; border-color: var(--danger-line) !important;
}
html[data-amz-tema="on"] .v16-chk:hover { border-color: var(--primary-line) !important; }

/* Kotak centang / radio / switch semua modul */
html[data-amz-tema="on"] .form-check-input:checked,
html[data-amz-tema="on"] .v14-hari-item input,
html[data-amz-tema="on"] .v14-linkitem input,
html[data-amz-tema="on"] .v17-check input,
html[data-amz-tema="on"] .v16-chk input,
html[data-amz-tema="on"] .v16-switch input,
html[data-amz-tema="on"] input[type="checkbox"],
html[data-amz-tema="on"] input[type="radio"] {
  accent-color: var(--primary-1) !important;
}
html[data-amz-tema="on"] .form-check-input:checked {
  background-color: var(--primary-1) !important;
  border-color: var(--primary-1) !important;
}
html[data-amz-tema="on"] .form-switch .form-check-input:focus { box-shadow: 0 0 0 .2rem var(--focus-ring) !important; }

/* ============ 7. STRUK, MODAL & SELEKSI ============ */
html[data-amz-tema="on"] .struk-head,
html[data-amz-tema="on"] .sidebar,
html[data-amz-tema="on"] .sidebar-top,
html[data-amz-tema="on"] .mobile-header,
html[data-amz-tema="on"] .mobile-menu-content { background-image: var(--grad-dark) !important; }

html[data-amz-tema="on"] #strukModal .modal-content > .d-flex:nth-of-type(3) { background-image: var(--grad-primary-soft) !important; color: var(--primary-text) !important; }
html[data-amz-tema="on"] #strukModal #strukTotal,
html[data-amz-tema="on"] #detailTitle2,
html[data-amz-tema="on"] .rp-stat-net { color: var(--primary-text) !important; }

html[data-amz-tema="on"] ::selection { background: var(--select-bg); color: var(--select-ink); }
html[data-amz-tema="on"] a { color: var(--primary-text); }
html[data-amz-tema="on"] a:hover { color: var(--primary-1); }

/* Sinkronisasi (pil topbar) */
html[data-amz-tema="on"] .sync-online { background: var(--primary-soft) !important; color: var(--primary-text) !important; }
html[data-amz-tema="on"] .sync-pending { background: var(--warning-soft) !important; color: var(--warning-text) !important; }
html[data-amz-tema="on"] .sync-offline { background: var(--danger-soft) !important; color: var(--danger-text) !important; }

/* SweetAlert2 agar ikut tema */
html[data-amz-tema="on"] .swal2-styled.swal2-confirm {
  background-image: var(--grad-primary) !important;
  background-color: var(--primary-1) !important;
  color: var(--on-primary) !important;
}
html[data-amz-tema="on"] .swal2-styled.swal2-deny { background-image: var(--grad-danger) !important; color: var(--on-danger) !important; }
html[data-amz-tema="on"] .swal2-styled.swal2-cancel { background: var(--surface-3) !important; color: var(--ink-2) !important; }
html[data-amz-tema="on"] .swal2-styled:focus { box-shadow: 0 0 0 .2rem var(--focus-ring) !important; }

/* Flatpickr (pemilih tanggal) */
html[data-amz-tema="on"] .flatpickr-day.selected,
html[data-amz-tema="on"] .flatpickr-day.startRange,
html[data-amz-tema="on"] .flatpickr-day.endRange {
  background: var(--primary-1) !important;
  border-color: var(--primary-1) !important;
  color: var(--on-primary) !important;
}
html[data-amz-tema="on"] .flatpickr-day:hover { background: var(--primary-soft) !important; color: var(--primary-text) !important; }
html[data-amz-tema="on"] .flatpickr-months .flatpickr-month { color: var(--ink) !important; }

/* Bootstrap warna teks bawaan */
html[data-amz-tema="on"] .text-success { color: var(--primary-text) !important; }
html[data-amz-tema="on"] .text-primary { color: var(--accent-text) !important; }
html[data-amz-tema="on"] .text-warning { color: var(--warning-text) !important; }
html[data-amz-tema="on"] .text-danger { color: var(--danger-text) !important; }
html[data-amz-tema="on"] .text-muted { color: var(--ink-muted) !important; }
html[data-amz-tema="on"] .bg-success { background: var(--primary-soft) !important; color: var(--primary-text) !important; }
html[data-amz-tema="on"] .bg-primary { background: var(--accent-soft) !important; color: var(--accent-text) !important; }
html[data-amz-tema="on"] .bg-warning { background: var(--warning-soft) !important; color: var(--warning-text) !important; }
html[data-amz-tema="on"] .bg-danger { background: var(--danger-soft) !important; color: var(--danger-text) !important; }
html[data-amz-tema="on"] .badge.bg-success,
html[data-amz-tema="on"] .badge.bg-primary,
html[data-amz-tema="on"] .badge.bg-warning,
html[data-amz-tema="on"] .badge.bg-danger { border: 1px solid currentColor; }


/* ==== [css/v21.css] ==== */
/* =========================================================
   AMAZZA COFFEE — v21
   1) Tata letak kartu menu (halaman Kasir) lebih rapi & mudah dibaca
   2) Kartu "Laba Bersih" (rp-stat-net) mengikuti gaya kartu lain,
      hanya teks nilainya yang berwarna
   3) Kartu status printer (nama + ID) & preview prefix per platform
   Dimuat PALING AKHIR (setelah v20).
   ========================================================= */

/* ============ 1. MENU CARD — HALAMAN KASIR ============ */
#menuList { gap: 0 !important; }
#menuList > [class*="col-"] { padding: 7px !important; }

#menuList .menu-card {
  padding: 10px !important;
  border-radius: 16px;
  gap: 0;
}
#menuList .menu-card:hover { transform: translateY(-2px); }

#menuList .menu-img {
  height: 128px;
  border-radius: 12px;
}

#menuList .menu-body {
  margin-top: 10px;
  padding: 0 2px 2px;
  gap: 8px;
}

/* Judul: 2 baris rapi, tinggi seragam antar kartu */
#menuList .menu-title {
  min-height: 36px;
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0;
}

/* Footer: kategori di atas, harga tombol lebar penuh di bawah */
#menuList .menu-footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border-top: 1px dashed var(--border-soft, #e9edf3);
}
#menuList .menu-footer .cat-footer {
  display: flex;
  min-width: 0;
}
#menuList .menu-category {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  padding: 3px 9px;
}

#menuList .menu-price {
  display: block;
  width: 100%;
  min-width: 0 !important;
  padding: 7px 8px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -.02em;
}

/* Badge "Tidak Tersedia" ikut sudut gambar */
#menuList .menu-card .badge.bg-danger { font-size: 10.5px; }

@media (max-width: 575.98px) {
  #menuList > [class*="col-"] { padding: 5px !important; }
  #menuList .menu-img { height: 104px; }
  #menuList .menu-title { font-size: 12.5px; min-height: 33px; }
  #menuList .menu-price { font-size: 12.5px; padding: 6px; }
}
@media (min-width: 1400px) {
  #menuList .menu-img { height: 140px; }
}

/* ============ 2. RINGKASAN LAPORAN — LABA BERSIH ============ */
/* Sama seperti rp-stat lain: kartu putih, hanya teks nilai yang berwarna */
.rp-stat-net,
#page-report .rp-stat-net,
html[data-amz-tema="on"] .rp-stat-net,
html[data-amz-tema="on"] #page-report .rp-stat-net {
  background: var(--white, #fff) !important;
  background-image: none !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: var(--shadow-xs) !important;
  color: var(--text, #16213a) !important;
}
.rp-stat-net .rp-stat-label,
#page-report .rp-stat-net .rp-stat-label,
html[data-amz-tema="on"] .rp-stat-net .rp-stat-label {
  color: var(--text-muted, #64748b) !important;
}
.rp-stat-net .rp-stat-val,
#page-report .rp-stat-net .rp-stat-val,
html[data-amz-tema="on"] .rp-stat-net .rp-stat-val {
  color: var(--primary-1, #16a34a) !important;
  -webkit-text-fill-color: currentColor;
}

/* ============ 3. STATUS PRINTER (nama + ID) ============ */
#printerModal .v21-prn {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  margin-bottom: 8px;
}
#printerModal .v21-prn:last-child { margin-bottom: 0; }
#printerModal .v21-prn-head {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  font-size: 13px;
  font-weight: 600;
  flex-direction: column;
}
#printerModal .v21-prn-chip {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#printerModal .v21-prn-on .v21-prn-chip { background: #dcfce7; color: #14532d; }
#printerModal .v21-prn-off .v21-prn-chip { background: #fee2e2; color: #991b1b; }
#printerModal .v21-prn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .6rem;
  margin-top: 4px;
  font-size: 11.5px;
}
#printerModal .v21-prn-name { font-weight: 600; color: var(--text, #16213a); }
#printerModal .v21-prn-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text-muted, #64748b);
  background: var(--bg-2, #f1f5f9);
  padding: 1px 7px;
  border-radius: 999px;
}
#printerModal .v21-prn-on { border-color: #bbf7d0; background: #f6fefa; }

/* ============ 4. PREFIX PER PLATFORM (Pengaturan) ============ */
.v21-prefix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.v21-prefix-grid .st-label { font-size: 11.5px; }
.v21-prev {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px;
}
.v21-prev-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--bg-2, #f1f5f9);
  font-size: 12px;
}
.v21-prev-tag { color: var(--text-muted, #64748b); }
.v21-prev-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--text, #16213a);
}


/* ==== [css/v22.css] ==== */
/* =========================================================
   AMAZZA COFFEE — v22
   1) Contoh nomor order tampil di bawah tiap input prefix
   2) Halaman Reward & Voucher: toolbar, filter kanal, kartu promo
   3) Panel Promo & Voucher di modal pembayaran (kasir)
   Dimuat PALING AKHIR (setelah v21).
   ========================================================= */

/* ============ 1. PREVIEW PREFIX PER PLATFORM ============ */
.v22-prefix-cell { display: flex; flex-direction: column; gap: 6px; }

.v22-prev-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: 10px;
  background: #f4f7fb;
  border: 1px dashed #d7e0ec;
  font-size: 12px;
}
.v22-prev-label { color: #64748b; font-weight: 600; }
.v22-prev-val {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: #0f172a;
}
.v22-prev-note { color: #94a3b8; font-style: italic; }

/* ============ 2. TOOLBAR PROMO & VOUCHER ============ */
.v22-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.v22-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.v22-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 13px;
}
.v22-search .form-control { padding-left: 34px; border-radius: 10px; }

.v22-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.v22-chip {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s;
}
.v22-chip:hover { border-color: #cbd5e1; background: #f8fafc; }
.v22-chip.active { background: #111827; border-color: #111827; color: #fff; }

/* chip kanal pada kartu */
.adm-chip.chip-offline { background: #fef3c7; color: #92400e; }
.adm-chip.chip-online { background: #dbeafe; color: #1e40af; }
.adm-chip.chip-semua { background: #e2e8f0; color: #334155; }
.adm-chip.chip-promo { background: #fce7f3; color: #9d174d; }
.adm-chip.chip-auto { background: #dcfce7; color: #166534; }

/* progres kuota */
.v22-quota { margin-top: .45rem; max-width: 260px; }
.v22-quota-bar {
  height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden;
}
.v22-quota-bar > span { display: block; height: 100%; background: #6366f1; }
.v22-quota-text { font-size: 11.5px; color: #64748b; margin-top: 3px; }

/* form modal promo/voucher */
.v22-form-section {
  border: 1px solid #e9edf3;
  border-radius: 12px;
  padding: .8rem .9rem;
  margin-bottom: .7rem;
  background: #fcfdff;
}
.v22-form-section > h6 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: #64748b; margin: 0 0 .6rem; font-weight: 700;
}
.v22-channel-pick { display: flex; gap: .5rem; flex-wrap: wrap; }
.v22-channel-pick label {
  flex: 1 1 100px;
  border: 1px solid #e2e8f0; border-radius: 10px;
  padding: .5rem .6rem; text-align: center; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: #475569; margin: 0;
}
.v22-channel-pick input { display: none; }
.v22-channel-pick input:checked + span { color: #111827; }
.v22-channel-pick label:has(input:checked) {
  border-color: #111827; background: #f1f5f9;
}

/* ============ 3. PANEL PROMO DI MODAL PEMBAYARAN ============ */
.v22-pay-benefit {
  border: 1px solid #e9edf3;
  border-radius: 14px;
  padding: .7rem .8rem;
  margin-bottom: .9rem;
  background: #fbfcfe;
}
.v22-pay-benefit-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; color: #334155; margin-bottom: .55rem;
}
.v22-mode-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: #fef3c7; color: #92400e;
}
.v22-mode-badge.online { background: #dbeafe; color: #1e40af; }

.v22-pay-benefit-body { display: grid; gap: .45rem; max-height: 190px; overflow: auto; }

.v22-benefit-card {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid #e6ebf2; border-radius: 12px;
  padding: .5rem .6rem; background: #fff; cursor: pointer;
  transition: .15s;
}
.v22-benefit-card:hover { border-color: #cbd5e1; }
.v22-benefit-card.picked { border-color: #16a34a; background: #f0fdf4; }
.v22-benefit-card.locked { opacity: .55; cursor: not-allowed; }
.v22-benefit-ico {
  width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: grid; place-items: center; background: #f1f5f9; color: #475569;
}
.v22-benefit-card.tipe-voucher .v22-benefit-ico { background: #ede9fe; color: #5b21b6; }
.v22-benefit-main { flex: 1; min-width: 0; }
.v22-benefit-name {
  font-size: 13px; font-weight: 650; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v22-benefit-sub { font-size: 11.5px; color: #64748b; }
.v22-benefit-val { font-size: 12.5px; font-weight: 700; color: #16a34a; flex: none; }

.v22-benefit-empty {
  font-size: 12px; color: #94a3b8; text-align: center; padding: .6rem;
}

.v22-voucher-input { display: flex; gap: .4rem; margin-top: .55rem; }
.v22-voucher-input .form-control { border-radius: 10px; font-size: 13px; }

.v22-applied {
  margin-top: .55rem; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .5rem .65rem; border-radius: 10px;
  background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 12.5px; color: #166534;
}
.v22-applied button {
  border: none; background: transparent; color: #b91c1c; font-weight: 600; font-size: 12px;
}
.v22-neg { color: #b91c1c; font-weight: 600; }

@media (max-width: 576px) {
  .v22-toolbar { flex-direction: column; align-items: stretch; }
  .v22-chips { justify-content: flex-start; }
}


/* ==== [css/v23.css] ==== */
/* =========================================================
   AMAZZA COFFEE — STYLE v23
   1. Splashscreen / loader awal aplikasi
   2. Editor resep bahan baku pada form Opsi Varian / Add-on
   ========================================================= */

/* ---------- SPLASHSCREEN ---------- */
#appSplash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--amz-splash-bg, linear-gradient(160deg, #2b1b12 0%, #4a2c1a 45%, #7b4a24 100%));
  color: #fff;
  transition: opacity .35s ease, visibility .35s ease;
}

#appSplash.splash-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#appSplash .splash-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 24px;
  background: rgba(255, 255, 255, .10);
  padding: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  animation: splashPop .8s ease both;
}

#appSplash .splash-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  opacity: .95;
}

#appSplash .splash-text {
  font-size: .85rem;
  opacity: .75;
  margin: 0;
  min-height: 1.2em;
}

#appSplash .splash-bar {
  width: min(220px, 60vw);
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}

#appSplash .splash-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: #fff;
  animation: splashSlide 1.1s ease-in-out infinite;
}

body.splash-lock {
  overflow: hidden;
}

@keyframes splashSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}

@keyframes splashPop {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #appSplash .splash-logo,
  #appSplash .splash-bar span { animation: none; }
}

/* ---------- EDITOR RESEP ADD-ON ---------- */
.v23-resep-box {
  border: 1px dashed rgba(0, 0, 0, .18);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  background: rgba(0, 0, 0, .02);
  text-align: left;
}

.v23-resep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.v23-resep-head label {
  margin: 0;
  font-weight: 600;
  font-size: .85rem;
}

.v23-resep-row {
  display: grid;
  grid-template-columns: 1fr 110px 56px 40px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.v23-resep-row .adm-input {
  margin: 0;
}

.v23-resep-satuan {
  font-size: .75rem;
  opacity: .7;
  text-align: center;
}

.v23-resep-del {
  padding: 4px 8px;
  line-height: 1;
}

.v23-resep-auto {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  margin: 6px 0 4px;
}

.v23-resep-auto input {
  width: auto;
  margin: 0;
}

@media (max-width: 520px) {
  .v23-resep-row {
    grid-template-columns: 1fr 84px 44px 36px;
  }
}


/* ==== [css/v24.css] ==== */
/* =========================================================
   AMAZZA COFFEE — STYLE v24
   1. Splashscreen mengikuti warna tema
   2. Kolom "Biaya Lain-lain" pada ringkasan laporan
   3. Alamat & koordinat Google Maps pada Identitas Kafe
   ========================================================= */

/* ---------- 1. SPLASHSCREEN BERTEMA ---------- */
#appSplash {
  background: var(--amz-splash-bg, linear-gradient(160deg, #0f172a 0%, #16a34a 100%));
  color: var(--amz-splash-ink, #fff);
}
#appSplash .splash-logo {
  background: var(--amz-splash-logo-bg, rgba(255, 255, 255, .12));
  box-shadow: var(--amz-splash-shadow, 0 12px 32px rgba(0, 0, 0, .28));
}
#appSplash .splash-bar {
  background: var(--amz-splash-track, rgba(255, 255, 255, .18));
}
#appSplash .splash-bar span {
  background: var(--amz-splash-accent, #fff);
}
#appSplash .splash-title,
#appSplash .splash-text { color: var(--amz-splash-ink, #fff); }

/* ---------- 2. BIAYA LAIN-LAIN DI RINGKASAN ---------- */
.v24-lain-input {
  width: 100%;
  margin-top: 4px;
  padding: 4px 8px;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--surface-2, #fff);
  color: var(--ink, #0f172a);
}
.v24-lain-input:focus {
  outline: none;
  border-color: var(--brand, #16a34a);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(22, 163, 74, .25));
}
.v24-lain-hint {
  font-size: .7rem;
  opacity: .7;
  margin-top: 2px;
}

/* ---------- 3. LOKASI KAFE ---------- */
.v24-loc-status {
  font-size: .78rem;
  margin-top: 6px;
  opacity: .85;
}

/* tooltip ikon tanya — bantuan ringkas tanpa teks permanen */
.help-tt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(107, 66, 38, .12);
  color: var(--bs-secondary-color, #6c757d);
  font-size: .75rem;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
  flex: 0 0 auto;
  text-decoration: none;
  outline: none;
}
.help-tt i { font-size: .82rem; }
.help-tt::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  background: #2d2a26;
  color: #f5f1ea;
  font-size: .72rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 70;
  text-align: left;
  white-space: normal;
}
.help-tt::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #2d2a26;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 70;
}
.help-tt:hover::after,
.help-tt:focus::after,
.help-tt:hover::before,
.help-tt:focus::before {
  opacity: 1;
  visibility: visible;
}
.v24-map-frame {
  width: 100%;
  height: 190px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  margin-top: 10px;
  background: var(--surface-3, #eef2f7);
}


/* ==== [css/v25.css] ==== */
/* =========================================================
   AMAZZA COFFEE — v25
   Promo & Voucher: dropdown di modal pembayaran + panel kasir
   ========================================================= */

/* ---- badge mode order ---- */
.v25-mode-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: rgba(120, 120, 120, .18);
  color: var(--amz-ink, #333);
  letter-spacing: .02em;
}
.v25-mode-badge.online {
  background: rgba(13, 110, 253, .16);
  color: #0d6efd;
}

/* ---- blok dropdown pada modal pembayaran ---- */
#payBenefitWrap .v25-benefit-select { margin-bottom: .5rem; }
.v25-benefit-select label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  opacity: .75;
  margin-bottom: .25rem;
}
.v25-benefit-select select {
  font-size: .85rem;
}
.v25-benefit-select select option:disabled { color: #9aa0a6; }

.v25-benefit-note {
  font-size: .74rem;
  opacity: .75;
  margin-top: .3rem;
  line-height: 1.35;
}
.v25-benefit-note.aktif {
  opacity: 1;
  font-weight: 600;
  color: #198754;
}

/* ---- blok promo/voucher di panel kasir ---- */
.v25-kasir-benefit {
  border: 1px dashed rgba(125, 125, 125, .45);
  border-radius: .6rem;
  padding: .5rem .6rem;
  margin-bottom: .55rem;
  background: rgba(125, 125, 125, .06);
}
.v25-kasir-benefit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.v25-kasir-benefit select { font-size: .8rem; }
.v25-kasir-benefit-info {
  font-size: .72rem;
  opacity: .75;
  margin-top: .3rem;
  line-height: 1.35;
}
.v25-kasir-benefit-info.aktif {
  opacity: 1;
  font-weight: 600;
  color: #198754;
}
.v25-kasir-benefit-total {
  display: none;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid rgba(125, 125, 125, .3);
}


/* ==== [css/v26.css] ==== */
/* =========================================================
   AMAZZA COFFEE — GAYA v26
   1. Panel lokasi / koordinat toko
   2. Grid pajak / komisi per platform (Perhitungan Laporan)
   3. Rincian fee platform pada ringkasan laporan
   ========================================================= */

/* ---------- 1. LOKASI TOKO ---------- */
.v26-link-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.v26-link-row input { flex: 1 1 220px; }

.v26-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: .8rem;
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(25, 135, 84, .08);
  color: #146c43;
}
.v26-saved.is-empty { background: rgba(108, 117, 125, .1); color: #5c636a; }
.v26-saved.is-bad { background: rgba(220, 53, 69, .1); color: #b02a37; }
.v26-saved code { font-size: .78rem; }

/* ---------- 2. PAJAK / KOMISI PER PLATFORM ---------- */
.v26-pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.v26-pf-item {
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .015);
}
.v26-pf-item.is-off { opacity: .55; }
.v26-pf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.v26-pf-head .form-check-input { margin: 0; }
.v26-pf-input {
  display: flex;
  align-items: center;
  gap: 6px;
}
.v26-pf-input input { text-align: right; }
.v26-pf-input span { font-size: .8rem; opacity: .7; }
.v26-pf-note {
  font-size: .72rem;
  opacity: .7;
  margin-top: 5px;
}

/* ---------- 3. RINCIAN FEE ---------- */
.v26-fee-break {
  margin-top: 6px;
  font-size: .7rem;
  line-height: 1.5;
  opacity: .85;
  text-align: left;
}
.v26-fee-break div { display: flex; justify-content: space-between; gap: 8px; }


/* ==== [css/v27.css] ==== */
/* =========================================================
   AMAZZA COFFEE — GAYA v27
   Peta interaktif (Leaflet + OpenStreetMap) & pencarian lokasi
   pada halaman Pengaturan > Identitas Kafe.
   ========================================================= */

/* ---------- PETA INTERAKTIF ---------- */
.v27-map-frame {
  position: relative;
  width: 100%;
  height: 280px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 10px;
  background: var(--surface-3, #eef2f7);
}
.v27-map-frame .leaflet-container {
  width: 100%;
  height: 100%;
  font-family: inherit;
}
.v27-map-hint {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 500;
  max-width: calc(100% - 16px);
  font-size: .7rem;
  line-height: 1.3;
  color: var(--bs-body-color, #212529);
  background: var(--bs-body-bg, rgba(255, 255, 255, .92));
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 8px;
  padding: 5px 9px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  pointer-events: none;
}

/* ---------- PENCARIAN LOKASI (stMapsLink) ---------- */
.v27-loc-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}
.v27-loc-search input { width: 100%; }
.v27-loc-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 800;
  max-height: 250px;
  overflow-y: auto;
  color: var(--bs-body-color, #212529);
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  display: none;
  text-align: left;
}
.v27-loc-results.open { display: block; }
.v27-loc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  background: none;
  color: inherit;
  padding: 7px 10px;
  font-size: .78rem;
  line-height: 1.35;
}
.v27-loc-item:last-child { border-bottom: 0; }
.v27-loc-item:hover,
.v27-loc-item:focus { background: rgba(13, 110, 253, .1); }
.v27-loc-txt { flex: 1 1 auto; min-width: 0; }
.v27-loc-name { display: block; font-weight: 600; }
.v27-loc-sub { display: block; font-size: .7rem; opacity: .7; }
.v27-loc-open {
  flex: 0 0 auto;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: .55;
  cursor: pointer;
}
.v27-loc-open:hover {
  opacity: 1;
  color: #0d6efd;
  background: rgba(13, 110, 253, .12);
}
.v27-loc-err {
  padding: 8px 10px;
  font-size: .75rem;
  line-height: 1.4;
  opacity: .85;
}

/* ---------- seksi riwayat lokasi terpilih ---------- */
.v27-loc-sec {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
  padding: 6px 10px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.v27-loc-riwayat .v27-loc-name { font-weight: 500; }
.v27-loc-riwayat .fa-clock {
  opacity: .55;
  margin-right: 5px;
}

/* ---------- tombol jalan keluar ke Google Maps ---------- */
.v27-loc-gmaps {
  border-top: 1px solid rgba(0, 0, 0, .12);
}
.v27-loc-gmaps-btn {
  border-bottom: 0 !important;
}
.v27-loc-gmaps-btn .v27-loc-name {
  color: #1a73e8;
}
.v27-loc-gmaps-btn .fa-google {
  margin-right: 5px;
}

/* ---------- HAK AKSES STAFF (v27) ----------
   Menyembunyikan menu yang tidak diizinkan untuk role staff.
   !important menang atas display:flex !important milik .nav-sub-item. */
.sf-tersembunyi,
.nav-submenu .nav-sub-item.sf-tersembunyi { display: none !important; }

/* chip ringkasan per platform di halaman Riwayat Poin (v27) */
.ph-chip {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 3px 10px;
  font-size: 11px;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border, #dbe3ec);
  border-radius: 999px;
  color: var(--text-muted, #475569);
}
.ph-chip b { color: var(--text, #1f2937); }

/* ---------- RINGKASAN LAPORAN RINGKAS (v27) ---------- */
#page-report .report-summary {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
#page-report .rp-stat-hero .rp-stat-val {
  font-size: 24px;
  margin-top: 6px;
}
#page-report .rp-stat-sub {
  font-size: 12px;
  color: var(--text-muted, #6c7a8c);
  margin-top: 4px;
}
#page-report .rp-stat-sub b {
  font-weight: 700;
  color: var(--text, #1f2937);
}
#page-report .rp-stat-detail {
  grid-column: 1 / -1;
}
#page-report .rp-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
#page-report .rp-detail-item {
  background: var(--surface-2, #f7f9fb);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
}
#page-report .rp-detail-name {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #6c7a8c);
  font-weight: 600;
  margin-bottom: 2px;
}
#page-report .rp-detail-item b {
  font-size: 16px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text, #1f2937);
}
#page-report .rp-detail-item.rp-stat-minus b { color: #b91c1c; }
#page-report .rp-detail-item .rp-stat-label {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 1px;
  line-height: 1.3;
}
#page-report .rp-detail-item .v24-lain-input {
  width: 100%;
  margin-top: 6px;
  font-size: 12px;
  padding: 3px 6px;
}
/* v29: dropdown target pengurangan biaya lain-lain di halaman Laporan */
#page-report .rp-detail-item .v24-lain-target {
  width: 100%;
  margin-top: 5px;
  font-size: 11.5px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  cursor: pointer;
}
#page-report .rp-detail-item .v24-lain-hint {
  font-size: 10px;
  margin-top: 3px;
}

/* Tombol & kotak "Biaya lain-lain" di dalam kartu Diskon & Promo (v27) */
#page-report .rp-lain-toggle {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  color: var(--bs-link-color, #0d6efd);
  background: rgba(13, 110, 253, .06);
  border: 1px dashed var(--border, #c7d2e0);
  border-radius: 6px;
  transition: background .15s ease;
}
#page-report .rp-lain-toggle:hover {
  background: rgba(13, 110, 253, .12);
}
#page-report .rp-lain-box {
  margin-top: 8px;
  padding: 8px;
  background: var(--surface-2, #f7f9fb);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
}
#page-report .rp-lain-box b {
  display: block;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  color: #b91c1c;
  margin-bottom: 4px;
}

/* Ringkasan laporan versi mobile: kartu bertumpuk vertikal (hemat ruang) */
@media (max-width: 575.98px) {
  #page-report .report-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #page-report .rp-stat-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
  }
  #page-report .rp-stat-hero .rp-stat-val {
    font-size: 20px;
    margin-top: 0;
  }
  #page-report .rp-stat-hero .rp-stat-label {
    margin-bottom: 0;
  }
  #page-report .rp-stat-hero .rp-stat-sub {
    text-align: right;
    margin-top: 0;
  }
  #page-report .rp-stat-detail {
    grid-column: auto;
  }
  #page-report .rp-detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
  }
}

/* =========================================================
   [css/v44.css] — DASHBOARD: GRAFIK, TREN MENU, AKTIVITAS MEMBER
   + halaman Riwayat Aktivitas (tab staff/member/poin)
   ========================================================= */

/* ---- Filter pill kecil (grafik & tren) ---- */
.dash-fbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dash-fbtn {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: #f1f5f9; color: #475569; border: 1px solid transparent;
  transition: all .15s ease; user-select: none; white-space: nowrap;
}
.dash-fbtn:hover { background: #e2e8f0; color: #0f172a; }
.dash-fbtn.active {
  background: linear-gradient(135deg, var(--brand, #16a34a) 0%, #22c55e 100%);
  color: #fff; border-color: transparent;
}

/* ---- Canvas grafik ---- */
#dashChart { width: 100%; height: 190px; display: block; }
.dash-chart-foot { font-size: 12px; color: #64748b; margin-top: 10px; text-align: center; }
.dash-chart-foot b { color: #0f172a; }

/* ---- Tren menu ---- */
.trend-bars { display: grid; gap: 9px; }
.trend-sub { font-size: 11.5px; color: #475569; margin-bottom: 2px; }
.trend-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 10px; }
.trend-name { font-weight: 600; color: #0f172a; font-size: 12.5px; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-track { position: relative; height: 9px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.trend-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width .6s ease; }
.trend-row:nth-child(2) .trend-fill { background: linear-gradient(90deg, #38bdf8, #0284c7); }
.trend-row:nth-child(3) .trend-fill { background: linear-gradient(90deg, #fbbf24, #d97706); }
.trend-row:nth-child(4) .trend-fill { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.trend-val { font-weight: 700; font-size: 12px; color: #334155; white-space: nowrap; }
.trend-bars .empty { text-align: center; color: #94a3b8; padding: 22px; border: 1px dashed #e2e8f0; border-radius: 12px; }

/* ---- Kategori Penjualan lebih kecil (v44) ---- */
.cat-bars-sm { gap: 6px; }
.cat-bars-sm .cat-row { grid-template-columns: 105px 1fr auto; gap: 8px; }
.cat-bars-sm .cat-name { font-size: 12px; }
.cat-bars-sm .cat-track { height: 7px; }
.cat-bars-sm .cat-val { font-size: 11.5px; min-width: 32px; }

/* ---- Aktivitas member (dashboard & halaman) ---- */
.akt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.akt-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; background: #f8fafc; border: 1px solid #eef2f7;
  border-radius: 12px; font-size: 13px;
}
.akt-list li.empty { justify-content: center; color: #94a3b8; background: transparent; border-style: dashed; }
.akt-ico {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}
.akt-list li:nth-child(1) .akt-ico { background: linear-gradient(135deg, #22c55e, #15803d); }
.akt-list li:nth-child(2) .akt-ico { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.akt-list li:nth-child(3) .akt-ico { background: linear-gradient(135deg, #f59e0b, #d97706); }
.akt-list li:nth-child(4) .akt-ico { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.akt-info { flex: 1; min-width: 0; }
.akt-title { font-size: 12.5px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akt-sub { font-size: 11.5px; color: #475569; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akt-poin { font-weight: 700; font-size: 12px; color: #94a3b8; white-space: nowrap; }
.akt-poin.plus { color: #16a34a; }
.akt-poin.minus { color: #dc2626; }

/* ---- Tema gradasi (v44): teks mengikuti latar kartu (negatif) — kartu
   dashboard berlatarkan terang, jadi teks dibuat gelap via token --ink*.
   Bila kelak latar kartu digelapkan, cukup ganti token ini dengan varian
   terang (#e2e8f0/#cbd5e1) agar kontras tetap benar. ---- */
html[data-amz-tema="on"] .dash-panel-head h5 { color: var(--ink) !important; }
html[data-amz-tema="on"] .dash-fbtn { background: #f1f5f9; color: #475569; }
html[data-amz-tema="on"] .dash-fbtn:hover { background: #e2e8f0; color: #0f172a; }
html[data-amz-tema="on"] .dash-fbtn.active { background-image: var(--grad-primary) !important; color: var(--on-primary) !important; }
html[data-amz-tema="on"] .dash-chart-foot, html[data-amz-tema="on"] .trend-sub { color: var(--ink-muted) !important; }
html[data-amz-tema="on"] .dash-chart-foot b { color: var(--ink) !important; }
html[data-amz-tema="on"] .trend-val { color: var(--ink-2) !important; }
html[data-amz-tema="on"] .trend-name, html[data-amz-tema="on"] .akt-title { color: var(--ink-2) !important; }
html[data-amz-tema="on"] .trend-track { background: #f1f5f9; }
html[data-amz-tema="on"] .trend-fill { background: var(--grad-primary) !important; }
html[data-amz-tema="on"] .trend-row:nth-child(2) .trend-fill { background: var(--grad-accent) !important; }
html[data-amz-tema="on"] .trend-row:nth-child(3) .trend-fill { background: var(--grad-warning-180) !important; }
html[data-amz-tema="on"] .trend-row:nth-child(4) .trend-fill { background: var(--grad-accent) !important; }
html[data-amz-tema="on"] .trend-bars .empty { border-color: var(--line, #e2e8f0); color: var(--ink-faint, #94a3b8); }
html[data-amz-tema="on"] .akt-list li { background: var(--surface-2, #f8fafc); border-color: var(--surface-line, #eef2f7); }
html[data-amz-tema="on"] .akt-list li.empty { background: transparent; color: var(--ink-faint, #94a3b8); }
html[data-amz-tema="on"] .akt-sub { color: var(--ink-muted) !important; }
html[data-amz-tema="on"] .akt-ico { background: var(--grad-accent) !important; color: var(--on-accent) !important; }
html[data-amz-tema="on"] .akt-poin.plus { color: var(--primary-text, #16a34a) !important; }
html[data-amz-tema="on"] .akt-poin.minus { color: var(--danger-text, #dc2626) !important; }

/* ============ LAPORAN: Dana Tersedia + konten header pesanan ============ */
#page-report .rp-stat-dana { background: linear-gradient(135deg,#0ea5e9,#0284c7); color: #fff; border: 0; }
#page-report .rp-stat-dana .rp-stat-label,
#page-report .rp-stat-dana .rp-stat-val,
#page-report .rp-stat-dana .rp-stat-sub { color: #fff; }
#page-report .rp-stat-dana .rp-stat-sub { font-size: 11px; margin-top: 4px; opacity: .92; text-transform: none; letter-spacing: 0; }
html[data-amz-tema="on"] #page-report .rp-stat-dana { background: linear-gradient(135deg, var(--primary-1, #0ea5e9), var(--primary-2, #0284c7)) !important; color: var(--on-primary, #fff) !important; }
html[data-amz-tema="on"] #page-report .rp-stat-dana .rp-stat-label,
html[data-amz-tema="on"] #page-report .rp-stat-dana .rp-stat-val,
html[data-amz-tema="on"] #page-report .rp-stat-dana .rp-stat-sub { color: var(--on-primary, #fff) !important; }

.rp-order-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed #dbe3ee;
  font-size: 12px; color: #64748b;
}
.rp-order-meta span { display: inline-flex; align-items: center; white-space: nowrap; }
.rp-order-meta i { color: #0f766e; }
.rp-order-meta span:last-child { font-weight: 700; color: #b45309; }
html[data-amz-tema="on"] .rp-order-meta { border-top-color: var(--line, #e2e8f0); color: var(--ink-muted, #94a3b8); }

/* ============ DASHBOARD: jarak antar card konsisten ============ */
#page-dashboard > .dash-panel { margin-bottom: 14px; }
#page-dashboard > .dash-panel:last-child { margin-bottom: 0; }
#page-dashboard .dash-grid { margin-bottom: 14px; }

/* =========================================================
   UI POLISH v67 — Aktivitas, Laporan, Loyalty, Notifikasi, Game
   ========================================================= */

/* ---------- Panel admin: header seksi ---------- */
.adm-panel { box-shadow: 0 1px 3px rgba(16, 24, 40, .05); }
.adm-panel-head {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .9rem; padding-bottom: .8rem;
  border-bottom: 1px solid #eef1f6;
}
.adm-panel-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1rem;
  background: #f0fdfa; color: #0f766e;
}
.adm-panel-head h5 { margin: 0; }
.adm-panel-head .adm-panel-sub { margin: .1rem 0 0; }

/* ---------- Kartu daftar (adm-card): hover + aksen ---------- */
.adm-list { gap: .7rem; }
.adm-card {
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.adm-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(16, 24, 40, .08); }
.adm-card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #0f766e, #16a34a);
  opacity: 0; transition: opacity .15s ease;
}
.adm-card:hover::before { opacity: 1; }
.adm-card.off::before { display: none; }
.adm-title { line-height: 1.35; }
.adm-title .adm-chip { margin-top: .15rem; }
.adm-sub { line-height: 1.45; }

/* ---------- Chip ---------- */
.adm-chip { letter-spacing: .04em; }

/* ---------- Tabel dalam panel (Riwayat Aktivitas) ---------- */
.adm-table-wrap {
  border: 1px solid #e5e7eb; border-radius: 12px; overflow: auto;
  background: #fff;
}
.adm-table-wrap .table { margin-bottom: 0; }
.adm-table-wrap thead th {
  background: #f8fafc;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: #6b7280; font-weight: 700;
  border-bottom: 1px solid #e5e7eb;
  padding: .65rem .8rem; white-space: nowrap;
}
.adm-table-wrap tbody td {
  padding: .62rem .8rem; vertical-align: middle; font-size: .85rem;
  border-color: #f1f5f9;
}
.adm-table-wrap tbody tr { transition: background .12s ease; }
.adm-table-wrap tbody tr:hover { background: #f8fafc; }

/* ---------- Badge aksi / aktivitas ---------- */
.akt-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .22rem .55rem; border-radius: 999px; white-space: nowrap;
  background: #f1f5f9; color: #475569;
}
.akt-badge.b-ok   { background: #dcfce7; color: #166534; }
.akt-badge.b-warn { background: #fef3c7; color: #92400e; }
.akt-badge.b-err  { background: #fee2e2; color: #991b1b; }
.akt-badge.b-info { background: #e0f2fe; color: #075985; }
.akt-badge.b-po   { background: #ede9fe; color: #5b21b6; }

/* ---------- st-checks → chip pilihan ---------- */
.st-checks { display: flex; flex-wrap: wrap; gap: .45rem; }
.st-checks label {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid #e5e7eb; background: #fff; border-radius: 999px;
  padding: .42rem .85rem; margin: 0;
  font-size: .82rem; font-weight: 600; color: #374151;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.st-checks label:hover { border-color: #cbd5e1; background: #f8fafc; }
.st-checks label:has(input:checked) { border-color: #0f766e; background: #f0fdfa; color: #115e59; }
.st-checks input { margin: 0; }

/* ---------- Seksi berjudul dalam st-card (Perhitungan Laporan) ---------- */
.st-sec { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px dashed #e2e8f0; }
.st-sec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.st-sec-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #64748b; margin-bottom: .75rem;
}
.st-sec-title i { color: #0f766e; }

/* ---------- Mini Game: baris daftar game ---------- */
.gm-game-row {
  display: flex; align-items: center; gap: .8rem;
  border: 1px solid #e5e7eb; background: #fff; border-radius: 12px;
  padding: .65rem .85rem; height: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.gm-game-row:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }
.gm-game-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1rem;
  background: #f0fdfa; color: #0f766e;
}
.gm-game-info { flex: 1; min-width: 0; }
.gm-game-info b { display: block; font-size: .9rem; color: #111827; }
.gm-game-info span { display: block; font-size: .76rem; color: #6b7280; margin-top: .1rem; }

/* ---------- Mini Game: log riwayat ---------- */
.gm-log { gap: .5rem; }
.gm-log-row {
  background: #fff; border: 1px solid #eef1f6;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .15s, box-shadow .15s;
}
.gm-log-row:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }
.gm-log-row > div:first-child b { display: block; }
.gm-log-poin {
  display: inline-block; justify-self: start;
  background: #dcfce7; color: #166534;
  border-radius: 999px; padding: .15rem .5rem; font-size: .72rem;
}

/* ---------- Laporan: header konten report-table ---------- */
.rp-table-head {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .8rem 1rem;
  border-bottom: 1px solid #eef1f6;
  background: #fbfcfe;
}
.rp-table-head-title { flex: 1; min-width: 180px; }
.rp-table-head h5 { margin: 0; font-size: .95rem; font-weight: 700; }
.rp-table-head .small { margin-top: .1rem; }

/* ---------- Daily Reward: kartu simulasi ---------- */
.dr-day {
  border: 1px solid #e5e7eb; border-radius: 12px;
  padding: .5rem .3rem; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.dr-day:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }
.dr-day-n { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.dr-day-p { font-size: .95rem; }

/* ---------- Toolbar voucher/promo ---------- */
.v22-toolbar { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: .7rem .85rem; }
.v22-chip { border-color: #e5e7eb; }

/* ---------- Notifikasi: form & daftar ---------- */
#page-notif .adm-panel { background: #fff; }
#noticePane-send .adm-input,
#noticePane-welcome .adm-input { margin-bottom: .15rem; }

/* ---------- Tema gelap: override komponen baru ---------- */
html[data-amz-tema="on"] .adm-panel-head { border-bottom-color: var(--surface-line, #eef2f7); }
html[data-amz-tema="on"] .adm-panel-ico { background: var(--primary-fade, rgba(22, 163, 74, .12)); color: var(--primary-text, #0f5132); }
html[data-amz-tema="on"] .adm-card:hover { border-color: var(--surface-line, #eef2f7); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
html[data-amz-tema="on"] .adm-table-wrap { background: var(--surface-2, #fff); border-color: var(--surface-line, #eef2f7); }
html[data-amz-tema="on"] .adm-table-wrap thead th { background: var(--surface-head, #f7f9fb); color: var(--ink-faint, #94a3b8); border-color: var(--line, #e2e8f0); }
html[data-amz-tema="on"] .adm-table-wrap tbody td { border-color: var(--line, #e2e8f0); color: var(--ink-2, #e2e8f0); }
html[data-amz-tema="on"] .adm-table-wrap tbody tr:hover { background: var(--surface-3, #eef2f7); }
html[data-amz-tema="on"] .akt-badge { background: var(--surface-3, #eef2f7); color: var(--ink-2, #e2e8f0); }
html[data-amz-tema="on"] .akt-badge.b-ok   { background: rgba(22, 163, 74, .16); color: #6ee7a0; }
html[data-amz-tema="on"] .akt-badge.b-warn { background: rgba(245, 158, 11, .16); color: #fcd34d; }
html[data-amz-tema="on"] .akt-badge.b-err  { background: rgba(220, 38, 38, .16); color: #fca5a5; }
html[data-amz-tema="on"] .akt-badge.b-info { background: rgba(14, 165, 233, .16); color: #7dd3fc; }
html[data-amz-tema="on"] .akt-badge.b-po   { background: rgba(139, 92, 246, .18); color: #c4b5fd; }
html[data-amz-tema="on"] .st-checks label { background: var(--surface-2, #fff); border-color: var(--surface-line, #eef2f7); color: var(--ink-2, #e2e8f0); }
html[data-amz-tema="on"] .st-checks label:hover { background: var(--surface-3, #eef2f7); border-color: var(--surface-line, #eef2f7); }
html[data-amz-tema="on"] .st-checks label:has(input:checked) { border-color: var(--primary-1, #16a34a); background: var(--primary-fade, rgba(22, 163, 74, .12)); color: var(--primary-text, #4ade80); }
html[data-amz-tema="on"] .st-sec { border-top-color: var(--surface-line, #eef2f7); }
html[data-amz-tema="on"] .st-sec-title { color: var(--ink-faint, #94a3b8); }
html[data-amz-tema="on"] .st-sec-title i { color: var(--primary-1, #16a34a); }
html[data-amz-tema="on"] .gm-game-row { background: var(--surface-2, #fff); border-color: var(--surface-line, #eef2f7); }
html[data-amz-tema="on"] .gm-game-row:hover { border-color: var(--surface-line, #eef2f7); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
html[data-amz-tema="on"] .gm-game-ico { background: var(--primary-fade, rgba(22, 163, 74, .12)); color: var(--primary-text, #4ade80); }
html[data-amz-tema="on"] .gm-game-info b { color: var(--ink-2, #e2e8f0); }
html[data-amz-tema="on"] .gm-game-info span { color: var(--ink-faint, #94a3b8); }
html[data-amz-tema="on"] .gm-log-row { background: var(--surface-2, #fff); border-color: var(--surface-line, #eef2f7); }
html[data-amz-tema="on"] .gm-log-poin { background: rgba(22, 163, 74, .16); color: #6ee7a0; }
html[data-amz-tema="on"] .rp-table-head { background: var(--surface-2, #fff); border-bottom-color: var(--surface-line, #eef2f7); }
html[data-amz-tema="on"] .dr-day { background: var(--surface-2, #fff); border-color: var(--surface-line, #eef2f7); }
html[data-amz-tema="on"] .v22-toolbar { background: var(--surface-2, #fff); border-color: var(--surface-line, #eef2f7); }
html[data-amz-tema="on"] .v22-chip { background: var(--surface-2, #fff); border-color: var(--surface-line, #eef2f7); color: var(--ink-2, #e2e8f0); }

/* =========================================================
   UI POLISH v68 — statistik aktivitas, header daftar, mobile
   ========================================================= */

/* ---------- Statistik ringkas Riwayat Aktivitas ---------- */
.akt-stats {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin: 0 0 .9rem;
}
.akt-stat {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 600; color: #475569;
  background: #f8fafc; border: 1px solid #e5e7eb;
  border-radius: 999px; padding: .32rem .7rem;
}
.akt-stat i { font-size: .72rem; }
.akt-stat b { font-size: .85rem; }
.akt-stat.b-ok   { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.akt-stat.b-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.akt-stat.b-err  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.akt-stat.b-info { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.akt-stat.b-po   { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }

/* ---------- Header daftar konten (menu / pengguna) ---------- */
.adm-section { overflow: hidden; }
.adm-section .user-list,
.adm-section .adm-list { padding: .25rem 1rem 1rem; }
#page-users .adm-section .user-toolbar { margin: 14px 16px 6px; }

/* ---------- Mobile: komponen baru tidak menumpuk ---------- */
@media (max-width: 640px) {
  .rp-table-head { padding: .7rem .8rem; }
  .rp-table-head .btn { flex: 1 1 auto; }
  .adm-panel-head { gap: .55rem; }
  .adm-panel-ico { width: 32px; height: 32px; font-size: .9rem; }
  .akt-stat { font-size: .7rem; padding: .28rem .6rem; }
  .gm-game-row { padding: .55rem .7rem; }
  .gm-game-ico { width: 34px; height: 34px; }
}

/* ---------- Tema gelap: v68 ---------- */
html[data-amz-tema="on"] .akt-stat { background: var(--surface-3, #eef2f7); border-color: var(--surface-line, #eef2f7); color: var(--ink-2, #e2e8f0); }
html[data-amz-tema="on"] .akt-stat.b-ok   { background: rgba(22, 163, 74, .14); border-color: rgba(22, 163, 74, .3); color: #6ee7a0; }
html[data-amz-tema="on"] .akt-stat.b-warn { background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .3); color: #fcd34d; }
html[data-amz-tema="on"] .akt-stat.b-err  { background: rgba(220, 38, 38, .14); border-color: rgba(220, 38, 38, .3); color: #fca5a5; }
html[data-amz-tema="on"] .akt-stat.b-info { background: rgba(14, 165, 233, .14); border-color: rgba(14, 165, 233, .3); color: #7dd3fc; }
html[data-amz-tema="on"] .akt-stat.b-po   { background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .3); color: #c4b5fd; }

/* =========================================================
   MODE GELAP v72 — tombol gelap/terang; tetap memakai
   tema & gradasi (variabel --primary/--accent/--grad dst.)
   ========================================================= */
html[data-amz-mode="dark"] {
  --surface: #0f172a !important;
  --surface-2: #1e293b !important;
  --surface-3: #2b3a4e !important;
  --surface-line: #3b4a5f !important;
  --surface-head: #263448 !important;
  --line: #3b4a5f !important;
  --ink: #e8eef5 !important;
  --ink-2: #c6d2e0 !important;
  --ink-muted: #aab8ca !important;
  --ink-faint: #8fa0b5 !important;
  --muted: #aab8ca !important;
  --primary-fade: rgba(52, 211, 153, .14) !important;
  --primary-text: #6ee7a0 !important;
  --scroll-thumb: #46566d !important;
  --scroll-thumb-hover: #5b6d85 !important;
}
html[data-amz-mode="dark"] body {
  background: #0f172a !important;
  color: #c6d2e0;
}
html[data-amz-mode="dark"] .content,
html[data-amz-mode="dark"] .main-wrap { background: transparent; }

/* ---------- kartu & panel ---------- */
html[data-amz-mode="dark"] .st-card,
html[data-amz-mode="dark"] .adm-panel,
html[data-amz-mode="dark"] .adm-section.card,
html[data-amz-mode="dark"] .card,
html[data-amz-mode="dark"] .dash-panel,
html[data-amz-mode="dark"] .report-filter,
html[data-amz-mode="dark"] .report-table-wrap,
html[data-amz-mode="dark"] .rp-table-head,
html[data-amz-mode="dark"] .v22-toolbar,
html[data-amz-mode="dark"] .dr-day,
html[data-amz-mode="dark"] .gm-game-row,
html[data-amz-mode="dark"] .gm-log-row,
html[data-amz-mode="dark"] .adm-card,
html[data-amz-mode="dark"] .adm-empty,
html[data-amz-mode="dark"] .adm-table-wrap,
html[data-amz-mode="dark"] .st-preview,
html[data-amz-mode="dark"] .st-status,
html[data-amz-mode="dark"] .gm-prize,
html[data-amz-mode="dark"] .adm-note,
html[data-amz-mode="dark"] .login-card,
html[data-amz-mode="dark"] .user-card,
html[data-amz-mode="dark"] .user-empty,
html[data-amz-mode="dark"] .adm-variant,
html[data-amz-mode="dark"] .jam-hari-row {
  background: var(--surface-2) !important;
  border-color: var(--surface-line) !important;
}
html[data-amz-mode="dark"] .adm-panel-head { border-bottom-color: var(--surface-line) !important; }
html[data-amz-mode="dark"] .st-sec { border-top-color: var(--surface-line) !important; }
html[data-amz-mode="dark"] .rp-order-meta { border-top-color: var(--surface-line) !important; }

/* ---------- kartu order laporan ---------- */
html[data-amz-mode="dark"] #rpTbody .panel { background: var(--surface-2) !important; border-color: var(--surface-line) !important; }
html[data-amz-mode="dark"] #rpTbody .panel-heading { background: var(--surface-3) !important; }
html[data-amz-mode="dark"] #rpTbody .panel-heading,
html[data-amz-mode="dark"] #rpTbody .panel-heading a,
html[data-amz-mode="dark"] #rpTbody .rp-detail-item,
html[data-amz-mode="dark"] .rp-detail-name,
html[data-amz-mode="dark"] .rp-detail-item b { color: var(--ink-2) !important; }

/* ---------- teks ---------- */
html[data-amz-mode="dark"] .dash-title,
html[data-amz-mode="dark"] .sec-title,
html[data-amz-mode="dark"] .st-card h5,
html[data-amz-mode="dark"] .adm-panel h5,
html[data-amz-mode="dark"] .rp-table-head h5,
html[data-amz-mode="dark"] .gm-game-info b,
html[data-amz-mode="dark"] .adm-title,
html[data-amz-mode="dark"] .st-label,
html[data-amz-mode="dark"] .rp-label,
html[data-amz-mode="dark"] .adm-form label,
html[data-amz-mode="dark"] .gm-stat b,
html[data-amz-mode="dark"] .su-name { color: var(--ink) !important; }
html[data-amz-mode="dark"] .dash-sub,
html[data-amz-mode="dark"] .adm-panel-sub,
html[data-amz-mode="dark"] .st-card header p,
html[data-amz-mode="dark"] .text-muted,
html[data-amz-mode="dark"] .small.text-muted,
html[data-amz-mode="dark"] .gm-game-info span,
html[data-amz-mode="dark"] .adm-sub,
html[data-amz-mode="dark"] .gm-log-date,
html[data-amz-mode="dark"] .gm-log-row small,
html[data-amz-mode="dark"] .rp-table-head .small,
html[data-amz-mode="dark"] .adm-count,
html[data-amz-mode="dark"] .su-role { color: var(--ink-muted) !important; }

/* ---------- input & pilih ---------- */
html[data-amz-mode="dark"] .form-control,
html[data-amz-mode="dark"] .form-select,
html[data-amz-mode="dark"] .adm-input,
html[data-amz-mode="dark"] .input-group-text,
html[data-amz-mode="dark"] .user-search input,
html[data-amz-mode="dark"] .st-preview {
  background: var(--surface-3) !important;
  border-color: var(--surface-line) !important;
  color: var(--ink) !important;
}
html[data-amz-mode="dark"] .form-control::placeholder,
html[data-amz-mode="dark"] .adm-input::placeholder,
html[data-amz-mode="dark"] .user-search input::placeholder { color: var(--ink-faint); opacity: 1; }
html[data-amz-mode="dark"] .form-control:focus,
html[data-amz-mode="dark"] .form-select:focus,
html[data-amz-mode="dark"] .adm-input:focus { border-color: var(--primary-1, #16a34a) !important; box-shadow: 0 0 0 3px var(--primary-fade) !important; }

/* ---------- tabel ---------- */
html[data-amz-mode="dark"] .table { --bs-table-bg: transparent; color: var(--ink-2); }
html[data-amz-mode="dark"] .table > :not(caption) > * > * {
  background: transparent !important;
  border-color: var(--surface-line) !important;
  color: var(--ink-2) !important;
}
html[data-amz-mode="dark"] .table > thead th,
html[data-amz-mode="dark"] .adm-table-wrap thead th { background: var(--surface-head) !important; color: var(--ink-faint) !important; }
html[data-amz-mode="dark"] .adm-table-wrap tbody tr:hover,
html[data-amz-mode="dark"] .table-hover > tbody > tr:hover > * { background: var(--surface-3) !important; }

/* ---------- tab & chip ---------- */
html[data-amz-mode="dark"] .page-tabs { background: var(--surface-3) !important; }
html[data-amz-mode="dark"] .adm-tab { background: var(--surface-2); border-color: var(--surface-line); color: var(--ink-2); }
html[data-amz-mode="dark"] .adm-tab:hover { color: var(--ink); }
html[data-amz-mode="dark"] .adm-tab.active { background-image: var(--grad-primary, linear-gradient(135deg, #16a34a, #22c55e)) !important; border-color: transparent !important; color: var(--on-primary, #fff) !important; }
html[data-amz-mode="dark"] .st-checks label { background: var(--surface-2) !important; border-color: var(--surface-line) !important; color: var(--ink-2) !important; }
html[data-amz-mode="dark"] .st-checks label:hover { background: var(--surface-3) !important; }
html[data-amz-mode="dark"] .st-checks label:has(input:checked) { background: var(--primary-fade) !important; border-color: var(--primary-1, #16a34a) !important; color: var(--primary-text) !important; }
html[data-amz-mode="dark"] .v22-chip { background: var(--surface-2); border-color: var(--surface-line); color: var(--ink-2); }
html[data-amz-mode="dark"] .v22-chip:hover { background: var(--surface-3); color: var(--ink); }

/* ---------- chip statistik & badge (mode gelap) ---------- */
html[data-amz-mode="dark"] .akt-stat { background: var(--surface-3) !important; border-color: var(--surface-line) !important; color: var(--ink-2) !important; }
html[data-amz-mode="dark"] .akt-stat.b-ok   { background: rgba(22, 163, 74, .14) !important; border-color: rgba(22, 163, 74, .3) !important; color: #6ee7a0 !important; }
html[data-amz-mode="dark"] .akt-stat.b-warn { background: rgba(245, 158, 11, .14) !important; border-color: rgba(245, 158, 11, .3) !important; color: #fcd34d !important; }
html[data-amz-mode="dark"] .akt-stat.b-err  { background: rgba(220, 38, 38, .14) !important; border-color: rgba(220, 38, 38, .3) !important; color: #fca5a5 !important; }
html[data-amz-mode="dark"] .akt-stat.b-info { background: rgba(14, 165, 233, .14) !important; border-color: rgba(14, 165, 233, .3) !important; color: #7dd3fc !important; }
html[data-amz-mode="dark"] .akt-stat.b-po   { background: rgba(139, 92, 246, .16) !important; border-color: rgba(139, 92, 246, .3) !important; color: #c4b5fd !important; }
html[data-amz-mode="dark"] .akt-badge { background: var(--surface-3) !important; color: var(--ink-2) !important; }
html[data-amz-mode="dark"] .akt-badge.b-ok   { background: rgba(22, 163, 74, .16) !important; color: #6ee7a0 !important; }
html[data-amz-mode="dark"] .akt-badge.b-warn { background: rgba(245, 158, 11, .16) !important; color: #fcd34d !important; }
html[data-amz-mode="dark"] .akt-badge.b-err  { background: rgba(220, 38, 38, .16) !important; color: #fca5a5 !important; }
html[data-amz-mode="dark"] .akt-badge.b-info { background: rgba(14, 165, 233, .16) !important; color: #7dd3fc !important; }
html[data-amz-mode="dark"] .akt-badge.b-po   { background: rgba(139, 92, 246, .18) !important; color: #c4b5fd !important; }

/* ---------- kartu game & log ---------- */
html[data-amz-mode="dark"] .gm-game-ico { background: var(--primary-fade) !important; color: var(--primary-text) !important; }
html[data-amz-mode="dark"] .gm-log-poin { background: rgba(22, 163, 74, .16) !important; color: #6ee7a0 !important; }
html[data-amz-mode="dark"] .gm-prize-dot { opacity: .85; }

/* ---------- tombol sekunder & info ---------- */
html[data-amz-mode="dark"] .btn-outline-secondary { border-color: var(--surface-line); color: var(--ink-2); }
html[data-amz-mode="dark"] .btn-outline-secondary:hover { background: var(--surface-3); color: var(--ink); }
html[data-amz-mode="dark"] .btn-outline-primary { border-color: var(--primary-1, #16a34a); color: var(--primary-text); }
html[data-amz-mode="dark"] .btn-outline-primary:hover { background: var(--primary-fade); color: var(--primary-text); }
html[data-amz-mode="dark"] .st-hint { color: var(--ink-muted) !important; }
html[data-amz-mode="dark"] .adm-terms { background: rgba(245, 158, 11, .12) !important; border-color: rgba(245, 158, 11, .35) !important; color: #fcd34d !important; }
html[data-amz-mode="dark"] .v24-lain-input,
html[data-amz-mode="dark"] .v24-lain-target { background: var(--surface-3) !important; color: var(--ink) !important; border-color: var(--surface-line) !important; }

/* ---------- modal SweetAlert ---------- */
html[data-amz-mode="dark"] .swal2-popup { background: var(--surface-2) !important; }
html[data-amz-mode="dark"] .swal2-title,
html[data-amz-mode="dark"] .swal2-html-container { color: var(--ink) !important; }

/* ---------- tombol mode di header mobile ---------- */
html[data-amz-mode="dark"] .mh-btn .mh-icon { color: #fff; }

/* ---------- Header kartu: tombol tidak menumpuk di layar kecil ---------- */
@media (max-width: 640px) {
  .rp-table-head { flex-direction: column; align-items: stretch; gap: .55rem; }
  .rp-table-head-title { min-width: 0; }
  .rp-table-head .d-flex { width: 100%; }
  .rp-table-head .btn,
  .rp-table-head label.btn { flex: 1 1 45%; margin-bottom: 0; }
  .v22-toolbar .btn { flex: 1 1 auto; }
}

/* =========================================================
   MODE GELAP v72 — token POS & halaman Kasir/Pesanan/Dashboard
   ========================================================= */
html[data-amz-mode="dark"] {
  --white: #1e293b !important;
  --bg: #0f172a !important;
  --bg-2: #2b3a4e !important;
  --text: #e8eef5 !important;
  --text-muted: #93a4b8 !important;
  --text-soft: #7d8ea3 !important;
  --border: #3b4a5f !important;
  --border-soft: #334155 !important;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35) !important;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35) !important;
  --shadow: 0 8px 24px rgba(0, 0, 0, .4) !important;
}

/* ---------- Kasir: filter bar rapi ---------- */
.filter-bar {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .92);
  gap: 10px;
}
#page-pos .filter-select { min-height: 40px; border-radius: 999px; }
#menuList { align-items: stretch; }
#menuList > [class*="col-"] { padding: 7px; }
.menu-card { border-radius: var(--radius-sm, 14px); }
.menu-title { line-height: 1.35; }

/* ---------- Kasir & modul lain di mode gelap ---------- */
html[data-amz-mode="dark"] .filter-bar {
  background: rgba(30, 41, 59, .92) !important;
  border-color: var(--surface-line) !important;
  backdrop-filter: blur(14px);
}
html[data-amz-mode="dark"] .filter-bar .btn,
html[data-amz-mode="dark"] .filter-bar .filter-btn {
  background: var(--surface-2) !important;
  border-color: var(--surface-line) !important;
  color: var(--ink-2) !important;
}
html[data-amz-mode="dark"] .filter-bar .btn:hover,
html[data-amz-mode="dark"] .filter-bar .filter-btn:hover { color: var(--ink) !important; border-color: var(--ink-faint) !important; }
html[data-amz-mode="dark"] .filter-bar .filter-btn.active {
  background-image: var(--grad-primary, linear-gradient(135deg, #16a34a, #22c55e)) !important;
  color: var(--on-primary, #fff) !important;
  border-color: transparent !important;
}
html[data-amz-mode="dark"] .filter-bar .float-end,
html[data-amz-mode="dark"] .mode-switch {
  background: #263448 !important;
  box-shadow: inset 0 0 0 1px var(--surface-line) !important;
}
html[data-amz-mode="dark"] .mode-btn,
html[data-amz-mode="dark"] .mode-switch .btn.mode-btn { color: var(--ink-muted) !important; }
html[data-amz-mode="dark"] .mode-btn.active,
html[data-amz-mode="dark"] .mode-switch .btn.mode-btn.active {
  background: #1e293b !important;
  color: var(--primary-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4) !important;
}
html[data-amz-mode="dark"] .menu-card {
  background: var(--surface-2) !important;
  border-color: var(--surface-line) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3) !important;
}
html[data-amz-mode="dark"] .menu-card:hover { border-color: var(--ink-faint) !important; }
html[data-amz-mode="dark"] .menu-img { background: var(--surface-3) !important; }
html[data-amz-mode="dark"] .menu-title,
html[data-amz-mode="dark"] .menu-footer,
html[data-amz-mode="dark"] .menu-footer .price,
html[data-amz-mode="dark"] .menu-footer b { color: var(--ink) !important; }
html[data-amz-mode="dark"] .menu-footer .badge { border-color: var(--surface-line) !important; }
html[data-amz-mode="dark"] .cart { background: transparent; }
html[data-amz-mode="dark"] .cart-header,
html[data-amz-mode="dark"] .cart-footer h5 { color: var(--ink) !important; }
html[data-amz-mode="dark"] #cartList .list-group-item,
html[data-amz-mode="dark"] .list-group-item {
  background: var(--surface-2) !important;
  border-color: var(--surface-line) !important;
  color: var(--ink-2) !important;
}

/* ---------- Dashboard & modul lain: elemen yang masih putih ---------- */
html[data-amz-mode="dark"] .dash-panel,
html[data-amz-mode="dark"] .list-group-item,
html[data-amz-mode="dark"] .stat-card,
html[data-amz-mode="dark"] .recent-card,
html[data-amz-mode="dark"] .rp-stat,
html[data-amz-mode="dark"] .rp-stat-detail,
html[data-amz-mode="dark"] .order-panel,
html[data-amz-mode="dark"] .v14-log,
html[data-amz-mode="dark"] .v15-log-table,
html[data-amz-mode="dark"] .tm-item {
  background: var(--surface-2) !important;
  border-color: var(--surface-line) !important;
  color: var(--ink-2) !important;
}
html[data-amz-mode="dark"] .rp-stat-label,
html[data-amz-mode="dark"] .rp-stat-sub { color: var(--ink-muted) !important; }
html[data-amz-mode="dark"] .rp-stat-val,
html[data-amz-mode="dark"] .rp-detail-item b { color: var(--ink) !important; }
html[data-amz-mode="dark"] .stat-1, html[data-amz-mode="dark"] .stat-2,
html[data-amz-mode="dark"] .stat-3, html[data-amz-mode="dark"] .stat-4 {
  background: var(--surface-2) !important;
  border-color: var(--surface-line) !important;
  color: var(--ink-2) !important;
}
html[data-amz-mode="dark"] .stat-1 .stat-val, html[data-amz-mode="dark"] .stat-2 .stat-val,
html[data-amz-mode="dark"] .stat-3 .stat-val, html[data-amz-mode="dark"] .stat-4 .stat-val { color: var(--ink) !important; }
html[data-amz-mode="dark"] .recent-list li,
html[data-amz-mode="dark"] .top-list li,
html[data-amz-mode="dark"] .queue-list li,
html[data-amz-mode="dark"] .akt-list li {
  background: var(--surface-2) !important;
  border-color: var(--surface-line) !important;
  color: var(--ink-2) !important;
}
html[data-amz-mode="dark"] .panel-default,
html[data-amz-mode="dark"] .panel-body,
html[data-amz-mode="dark"] .panel-heading { background: var(--surface-2) !important; border-color: var(--surface-line) !important; }
html[data-amz-mode="dark"] .breadcrumb,
html[data-amz-mode="dark"] .page-header { color: var(--ink) !important; }

/* ---------- mode terang: pastikan filter-bar tetap segar ---------- */
.filter-bar .filter-btn { min-height: 38px; }
.filter-bar .float-end { padding: 3px; }