/* ============================================================
   style.css - Smart Pos Kasir (POS)
   Author: Drans | Dransweb
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  --primary:       #d04f00;
  --primary-dark:  #a83d00;
  --primary-light: #ff7a35;
  --accent:        #ffb347;
  --bg:            #f7f4f0;
  --bg-card:       #ffffff;
  --bg-section:    #fdf8f4;
  --bg-input:      #fdf8f4;
  --border:        #e8ddd5;
  --text:          #2d1f0e;
  --text-muted:    #8b6f5e;
  --text-light:    #c4a882;
  --success:       #2f855a;
  --warning:       #c05621;
  --danger:        #c53030;
  --info:          #2b6cb0;
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.14);
  --radius:        10px;
  --radius-lg:     16px;
  --font:          'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition:    0.2s ease;
  --primary-soft:  color-mix(in srgb, var(--primary) 12%, #ffffff);
}

/* Dark Mode Variables */
body.dark-mode {
  color-scheme: dark;
  --bg:          #1a1208;
  --bg-card:     #241a0e;
  --bg-section:  #1f1508;
  --bg-input:    #33251a;
  --border:      #3d2b18;
  --text:        #f5e6d0;
  --text-muted:  #b89070;
  --text-light:  #a07d5c;
  --success:     #6fcf97;
  --warning:     #f6ad55;
  --danger:      #f28b82;
  --info:        #64b5f6;
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
  --primary-soft: color-mix(in srgb, var(--primary) 22%, #1a1208);
}

/* ── Reset dan Base ────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--text);
  font-size:   15px;
  line-height: 1.6;
  transition:  background var(--transition), color var(--transition);
  min-height:  100vh;
}

/* ── Layout Wrapper ────────────────────────────────────── */
.wrapper { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ── Header ────────────────────────────────────────────── */
.header {
  background:  linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:       #fff;
  padding:     0 16px;
  position:    sticky;
  top:         0;
  z-index:     100;
  box-shadow:  var(--shadow-md);
}

.header-inner {
  max-width:   1200px;
  margin:      0 auto;
  display:     flex;
  align-items: center;
  height:      52px;
}

.header-logo {
  font-size:      20px;
  font-weight:    900;
  letter-spacing: 1px;
  white-space:    nowrap;
  flex:           1;
}
.header-logo span {
  font-size:     11px;
  font-weight:   400;
  opacity:       0.8;
  display:       block;
  letter-spacing: 0;
}

.header-right {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

/* ── Action Bar ─────────────────────────────────────────── */
.action-bar {
  background:    var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding:       0 16px;
  position:      sticky;
  top:           52px;
  z-index:       99;
  box-shadow:    var(--shadow-sm);
}

.action-bar-inner {
  max-width:       1200px;
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          44px;
  gap:             8px;
}

.action-bar-left  { display: flex; align-items: center; gap: 4px; }
.action-bar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.action-divider {
  width:      1px;
  height:     22px;
  background: var(--border);
  margin:     0 4px;
}

.btn-action {
  display:       flex;
  align-items:   center;
  gap:           5px;
  padding:       6px 12px;
  border-radius: 7px;
  border:        1.5px solid var(--border);
  background:    var(--bg-section);
  color:         var(--text);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    all var(--transition);
}
.btn-action:hover   { border-color: var(--primary); color: var(--primary); background: var(--bg-card); }
.btn-action:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
  pointer-events: none;
}
.btn-action.btn-action-danger { color: var(--danger); border-color: var(--border); }
.btn-action.btn-action-danger:hover { border-color: var(--danger); background: #fff5f5; }

.act-icon  { font-size: 14px; line-height: 1; }
.act-label { font-size: 12px; font-weight: 700; }

@media (max-width: 400px) {
  .act-label { display: none; }
  .btn-action { padding: 6px 10px; }
}

/* Export Dropdown */
.export-wrap { position: relative; }

.export-menu {
  position:      absolute;
  top:           calc(100% + 6px);
  right:         0;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-lg);
  min-width:     170px;
  overflow:      hidden;
  display:       none;
  z-index:       9999;
}
.export-menu.open { display: block; animation: fadeDown 0.18s ease; }

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

.export-item {
  display:    block;
  width:      100%;
  padding:    10px 16px;
  text-align: left;
  background: none;
  border:     none;
  color:      var(--text);
  font-size:  13px;
  cursor:     pointer;
  transition: background var(--transition);
}
.export-item:hover { background: var(--bg-section); }
.export-item + .export-item { border-top: 1px solid var(--border); }

/* ── Section Tanggal dan Jam ───────────────────────────── */
.datetime-bar {
  background:    var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding:       10px 16px;
}

.datetime-inner {
  max-width:  1200px;
  margin:     0 auto;
  display:    flex;
  justify-content: space-between;
  align-items: center;
  gap:        12px;
}

.datetime-right {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-shrink: 0;
}

#live-date {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text);
}

#live-time {
  font-size:   20px;
  font-weight: 900;
  color:       var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

/* ── Main Content ──────────────────────────────────────── */
.main { padding: 16px; }

.content-grid {
  max-width: 1200px;
  margin:    0 auto;
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       16px;
}

@media (max-width: 800px) {
  .content-grid { grid-template-columns: 1fr; gap: 12px; }
  .main         { padding: 12px; }
}

/* ── Card ──────────────────────────────────────────────── */
.card {
  background:    var(--bg-card);
  border-radius: var(--radius-lg);
  border:        1px solid var(--border);
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
}

.card-header {
  padding:     12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size:   14px;
  color:       var(--primary);
  display:     flex;
  align-items: center;
  gap:         8px;
  background:  var(--bg-section);
}

.card-body { padding: 16px; }

/* ── Tab ───────────────────────────────────────────────── */
.tab-nav {
  display:       flex;
  border-bottom: 1px solid var(--border);
  background:    var(--bg-section);
}

.tab-btn {
  flex:        1;
  padding:     10px;
  border:      none;
  background:  none;
  font-size:   13px;
  font-weight: 600;
  color:       var(--text-muted);
  cursor:      pointer;
  transition:  all var(--transition);
  border-bottom: 2px solid transparent;
}
.tab-btn.active {
  color:        var(--primary);
  border-color: var(--primary);
  background:   var(--bg-card);
}
.tab-btn:hover:not(.active) { color: var(--text); background: var(--border); }

.tab-content { display: none; padding: 16px; }
.tab-content.active { display: block; }

/* ── Label Katalog ─────────────────────────────────────── */
.catalog-labels {
  display:    flex;
  gap:        6px;
  flex-wrap:  wrap;
  margin-bottom: 14px;
}

.label-btn {
  padding:       5px 12px;
  border-radius: 20px;
  border:        1.5px solid var(--border);
  background:    var(--bg-section);
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.label-btn:hover { border-color: var(--primary-light); color: var(--primary); }
.label-btn.active {
  background:  var(--primary);
  border-color: var(--primary);
  color:       #fff;
}

/* ── Catalog Grid ──────────────────────────────────────── */
.catalog-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  align-content:         start;
  gap:                   10px;
  max-height:            calc(100vh - 280px);
  min-height:            120px;
  overflow-y:            auto;
}

.catalog-card {
  background:    var(--bg-section);
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  cursor:        pointer;
  transition:    all var(--transition);
  overflow:      hidden;
  text-align:    center;
  user-select:   none;
}
.catalog-card:hover {
  border-color: var(--primary);
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md);
}
.catalog-card:active { transform: scale(0.97); }

.catalog-img-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.catalog-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

.catalog-info { padding: 6px 6px 8px; }
.catalog-name  { display: block; font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.3; }
.catalog-price { display: block; font-size: 11px; color: var(--primary); font-weight: 600; margin-top: 2px; }

.empty-catalog { color: var(--text-muted); text-align: center; padding: 24px; font-size: 13px; }

/* ── Input Manual ──────────────────────────────────────── */
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }

.input-field {
  width:         100%;
  padding:       10px 12px;
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  background:    var(--bg-input);
  color:         var(--text);
  font-size:     14px;
  font-family:   var(--font);
  transition:    border-color var(--transition), box-shadow var(--transition);
  outline:       none;
}
.input-field::placeholder { color: var(--text-light); }
.input-field:focus {
  border-color: var(--primary);
  background:    var(--bg-input);
  box-shadow:    0 0 0 3px var(--primary-soft);
}

/* Select & opsi dropdown ikut gelap di dark mode */
body.dark-mode select,
body.dark-mode .input-field {
  background: var(--bg-input);
  color:      var(--text);
  border-color: var(--border);
}
body.dark-mode select option {
  background: var(--bg-card);
  color:      var(--text);
}

/* ── Custom Select (dropdown label katalog, aman dark mode) ── */
.custom-select { position: relative; }
.cs-trigger {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  padding:         10px 12px;
  border:          1.5px solid var(--border);
  border-radius:   var(--radius);
  background:      var(--bg-input);
  color:           var(--text);
  font-size:       14px;
  cursor:          pointer;
  user-select:     none;
  transition:      border-color var(--transition), box-shadow var(--transition);
}
.cs-trigger:hover { border-color: var(--primary-light); }
.cs-trigger.open  { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cs-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-caret  {
  color:      var(--text-muted);
  width:      18px;
  height:     18px;
  flex-shrink: 0;
  display:    block;
}

.cs-menu {
  position:         fixed;
  z-index:          200;
  background:       var(--bg-card);
  border:           1px solid var(--border);
  border-radius:    var(--radius);
  box-shadow:       var(--shadow-md);
  max-height:       220px;
  overflow-y:       auto;
  display:          none;
  padding:          4px;
}
.cs-menu.open { display: block; }
.cs-option {
  padding:       9px 12px;
  border-radius: 6px;
  cursor:        pointer;
  color:         var(--text);
  font-size:     13px;
}
.cs-option:hover    { background: var(--primary-soft); }
.cs-option.selected { color: var(--primary); font-weight: 700; }

/* Qty Control Input Manual */
.qty-wrap { display: flex; align-items: center; gap: 6px; }
.qty-manual-input {
  width:         70px;
  text-align:    center;
  padding:       9px 6px;
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  background:    var(--bg-section);
  color:         var(--text);
  font-size:     14px;
  font-weight:   700;
  outline:       none;
}
.qty-manual-input:focus { border-color: var(--primary); }

.qty-stepper {
  width:         32px;
  height:        36px;
  border:        1.5px solid var(--border);
  border-radius: 7px;
  background:    var(--bg-section);
  color:         var(--text);
  font-size:     18px;
  font-weight:   700;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all var(--transition);
  line-height:   1;
}
.qty-stepper:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.btn-tambah {
  width:         100%;
  padding:       10px;
  border:        none;
  border-radius: var(--radius);
  background:    var(--primary);
  color:         #fff;
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  transition:    background var(--transition);
  margin-top:    4px;
}
.btn-tambah:hover { background: var(--primary-dark); }

/* ── Tabel Pesanan ─────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
}

thead th {
  background:  var(--bg-section);
  color:       var(--text-muted);
  font-weight: 700;
  font-size:   11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding:     8px 10px;
  text-align:  left;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding:     8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-section); }

.empty-row td {
  text-align:  center;
  color:       var(--text-muted);
  padding:     24px;
  font-style:  italic;
}

/* Qty Control Tabel */
.qty-control { display: flex; align-items: center; gap: 4px; }
.qty-btn {
  width:         24px;
  height:        24px;
  border:        1.5px solid var(--border);
  border-radius: 5px;
  background:    var(--bg-section);
  color:         var(--text);
  font-size:     14px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all var(--transition);
  font-weight:   700;
}
.qty-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.qty-val { min-width: 24px; text-align: center; font-weight: 700; font-size: 13px; }

.btn-del-item, .btn-del-hist {
  background:    none;
  border:        none;
  cursor:        pointer;
  font-size:     15px;
  padding:       4px 6px;
  border-radius: 6px;
  transition:    background var(--transition);
  opacity:       0.7;
}
.btn-del-item:hover, .btn-del-hist:hover { background: #fee2e2; opacity: 1; }

/* ── Input Lanjutan ────────────────────────────────────── */
.input-lanjutan { display: flex; flex-direction: column; gap: 10px; }

.input-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.input-row label {
  flex:        0 0 160px;
  font-size:   13px;
  font-weight: 600;
  color:       var(--text-muted);
}
.input-row .input-field { flex: 1; }

/* ── Ringkasan Perhitungan ─────────────────────────────── */
.summary-box {
  background:    var(--bg-section);
  border-radius: var(--radius);
  border:        1px solid var(--border);
  padding:       14px;
}

.summary-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         5px 0;
  font-size:       13px;
  color:           var(--text-muted);
}

.summary-row.total-row {
  border-top:  2px solid var(--border);
  margin-top:  6px;
  padding-top: 10px;
  font-size:   16px;
  font-weight: 900;
  color:       var(--primary);
}

.summary-row.change-row {
  font-size:   15px;
  font-weight: 800;
  color:       var(--success);
}

.summary-row .label { color: var(--text); font-weight: 600; }
.summary-row .val   { font-weight: 700; }
#summary-change.negative { color: var(--danger); }

.pay-warning {
  background:    #fff5f5;
  border:        1px solid #fc8181;
  border-radius: 7px;
  padding:       8px 12px;
  font-size:     12px;
  color:         var(--danger);
  font-weight:   600;
  margin-top:    6px;
  display:       none;
}
body.dark-mode .pay-warning { background: #3c1212; border-color: #c53030; }

.btn-print {
  width:         100%;
  padding:       13px;
  border:        none;
  border-radius: var(--radius);
  background:    linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:         #fff;
  font-size:     15px;
  font-weight:   800;
  cursor:        pointer;
  transition:    all var(--transition);
  margin-top:    12px;
  letter-spacing: 0.5px;
  box-shadow:    0 4px 12px rgba(208,79,0,0.3);
}
.btn-print:hover {
  transform:  translateY(-1px);
  box-shadow: 0 6px 18px rgba(208,79,0,0.4);
}
.btn-print:active { transform: translateY(0); }

/* ── Histori Pesanan ───────────────────────────────────── */
.history-section {
  max-width: 1200px;
  margin:    16px auto;
}

.history-controls {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
  margin-bottom: 12px;
}

.history-controls .left { display: flex; gap: 6px; align-items: center; flex: 1; flex-wrap: wrap; }
.history-meta { font-size: 12px; color: var(--text-muted); }

.sort-btn {
  padding:       5px 12px;
  border-radius: 6px;
  border:        1.5px solid var(--border);
  background:    var(--bg-card);
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition);
}
.sort-btn:hover { border-color: var(--primary); color: var(--primary); }
.sort-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.btn-reset-hist {
  padding:       6px 14px;
  border-radius: 7px;
  border:        1.5px solid var(--danger);
  background:    none;
  color:         var(--danger);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-reset-hist:hover { background: var(--danger); color: #fff; }

/* Histori Tabel */
.history-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border:     1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.hist-tag {
  display:       inline-block;
  background:    var(--bg-section);
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       3px 6px;
  font-size:     11px;
  margin:        2px 2px 2px 0;
  white-space:   normal;
  vertical-align: top;
  max-width:     100%;
  box-sizing:    border-box;
}

.hist-item-name { display: block; font-weight: 700; word-break: break-word; }
.hist-item-var  {
  display:    block;
  color:      var(--primary);
  font-size:  10px;
  font-weight: 600;
  margin-top: 1px;
  word-break: break-word;
}
.hist-item-add {
  display:    block;
  color:      var(--text-muted);
  font-size:  10px;
  font-weight: 600;
  margin-top: 1px;
  word-break: break-word;
}

.hist-tag-disc {
  background:  #fee2e2;
  border-color: #fca5a5;
  color:       #dc2626;
}
.hist-tag-disc b { font-weight: 800; }

.hist-item-disc-total {
  font-size:   10px;
  font-weight: 700;
  color:       var(--danger);
  margin-top:  4px;
}

.td-dt .dt-date { font-size: 12px; font-weight: 700; }
.td-dt .dt-time { font-size: 11px; color: var(--text-muted); }
.td-num         { text-align: right; white-space: nowrap; font-size: 12px; }
.td-items       { max-width: 200px; }
.total-col      { color: var(--primary); }
.muted          { color: var(--text-light); }

/* Drive Link */
#drive-link-container { margin-top: 10px; display: none; }
.drive-link {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 14px;
  background:    #e8f5e9;
  border:        1px solid #81c784;
  border-radius: 8px;
  color:         #2e7d32;
  font-size:     13px;
  font-weight:   700;
  text-decoration: none;
  transition:    all var(--transition);
}
.drive-link:hover { background: #c8e6c9; }
body.dark-mode .drive-link { background: #1b3a1f; border-color: #388e3c; color: #81c784; }

/* ── Footer ────────────────────────────────────────────── */
.footer {
  background:  var(--bg-card);
  border-top:  1px solid var(--border);
  padding:     16px;
  text-align:  center;
  color:       var(--text-muted);
  font-size:   12px;
  margin-top:  24px;
}
.footer a { color: var(--primary); text-decoration: none; font-weight: 700; }

/* ── Toast ─────────────────────────────────────────────── */
#toast-container {
  position:   fixed;
  bottom:     20px;
  right:      20px;
  z-index:    9999;
  display:    flex;
  flex-direction: column;
  gap:        8px;
}

.toast {
  padding:       10px 16px;
  border-radius: 9px;
  font-size:     13px;
  font-weight:   600;
  color:         #fff;
  box-shadow:    var(--shadow-md);
  opacity:       0;
  transform:     translateX(20px);
  transition:    all 0.3s ease;
  max-width:     280px;
  background:    #333;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { background: #276749; }
.toast-warning { background: #c05621; }
.toast-info    { background: #2b6cb0; }

/* ── Modal Konfirmasi ──────────────────────────────────── */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.5);
  z-index:         99999;
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
.modal-overlay.active { display: flex; animation: fadeIn 0.15s ease; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background:    var(--bg-card);
  border-radius: var(--radius-lg);
  padding:       24px;
  max-width:     360px;
  width:         100%;
  box-shadow:    var(--shadow-lg);
}

.modal-box h3 { font-size: 16px; margin-bottom: 10px; color: var(--text); }
.modal-box p  { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.btn-modal {
  padding:       8px 18px;
  border-radius: 8px;
  border:        none;
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-modal-cancel { background: var(--border); color: var(--text); }
.btn-modal-cancel:hover { background: var(--text-light); color: #fff; }
.btn-modal-ok     { background: var(--danger); color: #fff; }
.btn-modal-ok:hover { background: #9b2c2c; }

/* ── Full Width Card (span 2 kolom) ────────────────────── */
.full-width { grid-column: 1 / -1; }

/* ── Scrollbar Custom ──────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-section); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 600px) {
  .header-logo      { font-size: 17px; }
  .btn-header       { font-size: 13px; padding: 7px 12px; }
  #live-date        { font-size: 14px; }
  #live-time        { font-size: 18px; }
  .tab-btn          { font-size: 14px; padding: 12px; }
  .label-btn        { font-size: 13px; padding: 7px 14px; }
  .catalog-name     { font-size: 13px; }
  .catalog-price    { font-size: 13px; }
  .input-field      { font-size: 15px; padding: 11px 14px; }
  .qty-manual-input { font-size: 16px; }
  .qty-stepper      { width: 38px; height: 42px; font-size: 20px; }
  .btn-tambah       { font-size: 15px; padding: 13px; }
  thead th          { font-size: 12px; padding: 10px 8px; }
  tbody td          { font-size: 13px; padding: 10px 8px; }
  .summary-row      { font-size: 14px; }
  .summary-row.total-row { font-size: 17px; }
  .summary-row.change-row { font-size: 16px; }
  .btn-print        { font-size: 16px; padding: 15px; }
  .sort-btn         { font-size: 13px; padding: 7px 14px; }
  .btn-reset-hist   { font-size: 13px; padding: 8px 16px; }
  .history-meta     { font-size: 13px; }
  .hist-tag         { font-size: 12px; }
  .td-num           { font-size: 13px; }
  .input-row        { flex-direction: column; align-items: flex-start; }
  .input-row label  { flex: none; font-size: 14px; }
  .card-header      { font-size: 15px; }
  .footer           { font-size: 13px; }
}

/* ── Printer Status ────────────────────────────────────── */
.printer-status {
  font-size:     10px;
  font-weight:   600;
  padding:       3px 8px;
  border-radius: 20px;
  white-space:   nowrap;
  max-width:     130px;
  overflow:      hidden;
  text-overflow: ellipsis;
  flex-shrink:   1;
}
.printer-status.connected {
  background: #e8f5e9;
  color:       #276749;
  border:      1px solid #81c784;
}
.printer-status.disconnected {
  background: var(--bg-section);
  color:       var(--text-muted);
  border:      1px solid var(--border);
}
body.dark-mode .printer-status.connected {
  background: #1b3a1f;
  color:       #81c784;
  border-color: #388e3c;
}

/* ── Printer Modal ─────────────────────────────────────── */
.printer-actions {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin:         14px 0 0;
}

.btn-printer-opt {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       12px 16px;
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  background:    var(--bg-section);
  cursor:        pointer;
  transition:    all var(--transition);
  text-align:    left;
  width:         100%;
}
.btn-printer-opt:hover {
  border-color: var(--primary);
  background:   var(--primary-soft, #fff0e8);
}

.opt-icon {
  width:         40px;
  height:        40px;
  border-radius: 8px;
  background:    var(--primary);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     11px;
  font-weight:   900;
  flex-shrink:   0;
}

.opt-label {
  font-size:   14px;
  font-weight: 700;
  color:       var(--text);
  display:     block;
}
.opt-desc {
  font-size:  11px;
  color:      var(--text-muted);
  display:    block;
  margin-top: 2px;
}

.printer-info-box {
  background:    var(--bg-section);
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  padding:       10px 14px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--success);
  margin-top:    8px;
}

.printer-disconnect-wrap {
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 600px) {
  .printer-status { display: none; }
}

/* ── Fix datetime-bar top mengikuti tinggi header ──────── */
/* Gunakan JS untuk set top datetime-bar secara dinamis    */
/* CSS fallback: sticky dengan top:60px                    */
/* datetime-bar tidak perlu sticky */

/* ── Modal Printer Redesign ────────────────────────────── */
.modal-printer { max-width: 400px; padding: 0; overflow: hidden; }

.modal-printer-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         16px 20px;
  border-bottom:   1px solid var(--border);
  background:      var(--bg-section);
}
.modal-printer-header h3 { font-size: 15px; color: var(--text); }

.modal-close-btn {
  background:    rgba(0,0,0,0.06);
  border:        1px solid rgba(0,0,0,0.12);
  font-size:     16px;
  color:         var(--text-muted);
  cursor:        pointer;
  padding:       4px 8px;
  border-radius: 6px;
  transition:    all var(--transition);
}
.modal-close-btn:hover { background: rgba(0,0,0,0.12); color: var(--text); }

/* Tombol tutup panel (slide-in) — beri background agar terlihat */
body.dark-mode .modal-close-btn { background: #2a1f12; border-color: #3d2b18; }

#printer-modal-body { padding: 16px; }

/* ── Printer Connected Box ─────────────────────────────── */
.printer-connected-box {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       14px;
  background:    var(--bg-section);
  border:        1.5px solid #81c784;
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.pcon-icon {
  width:           42px;
  height:          42px;
  border-radius:   10px;
  background:      var(--success);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  font-weight:     900;
  flex-shrink:     0;
}
.pcon-name  { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.pcon-mode  { display: block; font-size: 11px; color: var(--success); margin-top: 2px; }

.btn-printer-disconnect {
  width:         100%;
  padding:       10px;
  border:        1.5px solid var(--danger);
  border-radius: var(--radius);
  background:    none;
  color:         var(--danger);
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-printer-disconnect:hover { background: var(--danger); color: #fff; }

/* ── Section Label ─────────────────────────────────────── */
.printer-section-label {
  font-size:     11px;
  font-weight:   700;
  color:         var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  margin-top:    4px;
}

/* ── Riwayat Printer ───────────────────────────────────── */
.printer-history-list {
  display:       flex;
  flex-direction: column;
  gap:           8px;
  margin-bottom: 16px;
  max-height:    220px;
  overflow-y:    auto;
}

.printer-history-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 12px;
  background:    var(--bg-section);
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  transition:    border-color var(--transition);
}
.printer-history-item:hover { border-color: var(--primary); }

.phi-icon {
  width:           36px;
  height:          36px;
  border-radius:   8px;
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       10px;
  font-weight:     900;
  flex-shrink:     0;
}
.phi-icon.bluetooth { background: var(--info, #2b6cb0); }
.phi-icon.usb       { background: var(--primary); }

.phi-info   { flex: 1; min-width: 0; }
.phi-name   { display: block; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phi-date   { display: block; font-size: 10px; color: var(--text-muted); margin-top: 1px; }

.phi-actions { display: flex; gap: 6px; flex-shrink: 0; }

.btn-phi-connect {
  padding:       5px 10px;
  border-radius: 6px;
  border:        1.5px solid var(--primary);
  background:    none;
  color:         var(--primary);
  font-size:     11px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.btn-phi-connect:hover { background: var(--primary); color: #fff; }

.btn-phi-delete {
  padding:       5px 8px;
  border-radius: 6px;
  border:        1.5px solid var(--border);
  background:    none;
  color:         var(--text-muted);
  font-size:     11px;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-phi-delete:hover { border-color: var(--danger); color: var(--danger); }

/* ── Tombol Printer Baru ───────────────────────────────── */
.printer-new-actions {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  4px;
}

.btn-printer-opt {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       11px 14px;
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  background:    var(--bg-section);
  cursor:        pointer;
  transition:    all var(--transition);
  text-align:    left;
  width:         100%;
}
.btn-printer-opt:hover { border-color: var(--primary); background: var(--bg-card); }

.opt-icon {
  width:           38px;
  height:          38px;
  border-radius:   8px;
  background:      var(--primary);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       11px;
  font-weight:     900;
  flex-shrink:     0;
}
.opt-text   { display: flex; flex-direction: column; }
.opt-label  { font-size: 13px; font-weight: 700; color: var(--text); }
.opt-desc   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ── Tombol DLG ────────────────────────────────────────── */
.btn-printer-dlg {
  width:         100%;
  padding:       9px 14px;
  border:        1.5px dashed var(--border);
  border-radius: var(--radius);
  background:    none;
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition);
  text-align:    left;
}
.btn-printer-dlg:hover { border-color: var(--primary); color: var(--primary); }

/* ── Printer Bar Section ───────────────────────────────── */
.printer-bar {
  background:    var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding:       8px 16px;
  position:      relative;
  z-index:       1;
}

.printer-bar-inner {
  max-width:       1200px;
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
}

.printer-bar-left {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex:        1;
  min-width:   0;
}

.pb-label {
  font-size:   11px;
  font-weight: 700;
  color:       var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Override printer-status di section ini */
.printer-bar .printer-status {
  font-size:     12px;
  padding:       4px 10px;
  max-width:     none;
  flex:          1;
  min-width:     0;
}
.printer-bar .printer-status.disconnected {
  background: transparent;
  border:     none;
  color:      var(--text-muted);
  padding:    0;
}
.printer-bar .printer-status.connected {
  background: var(--bg-section);
  border:     1px solid #81c784;
  color:      var(--success);
}

.printer-bar-right { flex-shrink: 0; }

.pb-btn {
  padding:       6px 16px;
  border-radius: var(--radius);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}

.pb-btn-connect {
  background: var(--primary);
  color:      #fff;
  border:     none;
}
.pb-btn-connect:hover { background: var(--primary-dark); }

.pb-btn-disconnect {
  background: none;
  color:      var(--danger);
  border:     1.5px solid var(--danger);
}
.pb-btn-disconnect:hover { background: var(--danger); color: #fff; }

@media (max-width: 600px) {
  .printer-bar { padding: 8px 12px; }
  .pb-label    { font-size: 10px; }
  .pb-btn      { font-size: 12px; padding: 6px 12px; }
}

/* ── Edit Mode Banner (compact, di atas tombol print) ──── */
.edit-mode-banner {
  background:    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:         #fff;
  padding:       8px 12px;
  display:       flex;
  align-items:   center;
  gap:           8px;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: 0;
  animation:     fadeDown 0.2s ease;
}

.emb-tag {
  background:    rgba(255,255,255,0.25);
  padding:       2px 8px;
  border-radius: 20px;
  font-size:     10px;
  font-weight:   800;
  letter-spacing: 0.5px;
  white-space:   nowrap;
  flex-shrink:   0;
}

.emb-info {
  font-size:   11px;
  font-weight: 600;
  opacity:     0.9;
  flex:        1;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.emb-btn-cancel {
  padding:       3px 10px;
  border-radius: 6px;
  border:        1.5px solid rgba(255,255,255,0.5);
  background:    transparent;
  color:         #fff;
  font-size:     11px;
  font-weight:   700;
  cursor:        pointer;
  flex-shrink:   0;
  transition:    all var(--transition);
}
.emb-btn-cancel:hover { background: rgba(255,255,255,0.2); }

/* Tombol print saat mode edit — warna hijau */
.btn-print.btn-print-edit {
  background:    linear-gradient(135deg, #276749, #1e4d37);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow:    0 4px 12px rgba(39,103,73,0.35);
}
.btn-print.btn-print-edit:hover {
  background: linear-gradient(135deg, #1e4d37, #163827);
  box-shadow: 0 6px 18px rgba(39,103,73,0.45);
}

/* Banner + tombol edit menyatu tanpa gap */
#edit-mode-banner + #btn-print,
#edit-mode-banner + .btn-print {
  border-radius: 0 0 var(--radius) var(--radius);
  margin-top:    0;
}

/* ── Tombol di tabel histori ───────────────────────────── */
.btn-reprint {
  padding:       4px 10px;
  border-radius: 6px;
  border:        1.5px solid var(--primary);
  background:    none;
  color:         var(--primary);
  font-size:     11px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.btn-reprint:hover { background: var(--primary); color: #fff; }

.btn-del-hist {
  padding:       4px 10px;
  border-radius: 6px;
  border:        1.5px solid var(--border);
  background:    none;
  color:         var(--text-muted);
  font-size:     11px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.btn-del-hist:hover { border-color: var(--danger); color: var(--danger); }

.td-action {
  display:    flex;
  gap:        6px;
  align-items: center;
  flex-wrap:  nowrap;
}

/* ── Modal Reprint ─────────────────────────────────────── */
.modal-reprint { max-width: 380px; }

.reprint-info {
  background:    var(--bg-section);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       12px 14px;
  margin:        12px 0 8px;
}

.rp-info-row {
  display:         flex;
  justify-content: space-between;
  font-size:       12px;
  padding:         3px 0;
  color:           var(--text-muted);
}
.rp-info-row span:last-child {
  font-weight: 700;
  color:       var(--text);
}

.reprint-hint {
  font-size:  12px;
  color:      var(--text-muted);
  margin-bottom: 10px;
}

.reprint-actions {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.btn-reprint-print,
.btn-reprint-edit {
  display:       flex;
  flex-direction: column;
  align-items:   flex-start;
  gap:           2px;
  padding:       12px 16px;
  border-radius: var(--radius);
  cursor:        pointer;
  transition:    all var(--transition);
  text-align:    left;
  width:         100%;
}

.btn-reprint-print {
  background: var(--primary);
  border:     none;
  color:      #fff;
}
.btn-reprint-print:hover { background: var(--primary-dark); }

.btn-reprint-edit {
  background: none;
  border:     1.5px solid var(--primary);
  color:      var(--primary);
}
.btn-reprint-edit:hover { background: var(--primary); color: #fff; }

.ra-title {
  font-size:   13px;
  font-weight: 800;
  display:     block;
}
.ra-desc {
  font-size:  11px;
  opacity:    0.8;
  display:    block;
}

@media (max-width: 600px) {
  .edit-mode-banner { flex-direction: column; align-items: flex-start; }
  .emb-right        { width: 100%; }
  .emb-btn-save, .emb-btn-cancel { flex: 1; text-align: center; }
  .td-action        { flex-direction: column; gap: 4px; }
  .btn-reprint, .btn-del-hist { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════
   PANEL MANAJEMEN KATALOG
   ══════════════════════════════════════════════════════════ */

/* Overlay fullscreen */
.catalog-panel-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.55);
  z-index:    99998;
  display:    none;
  align-items: flex-end;
  justify-content: center;
  padding:    0;
}
.catalog-panel-overlay.active {
  display:   flex;
  animation: fadeIn 0.15s ease;
}

/* Panel box — slide dari bawah, max height 90vh */
.catalog-panel-box {
  background:    var(--bg-card);
  width:         100%;
  max-width:     800px;
  max-height:    92vh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow-y:    auto;
  box-shadow:    var(--shadow-lg);
  animation:     slideUp 0.25s ease;
}

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

/* ── Header panel ── */
.cp-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--border);
  background:      var(--bg-section);
  position:        sticky;
  top:             0;
  z-index:         10;
}
.cp-header h2 {
  font-size:   16px;
  font-weight: 800;
  color:       var(--primary);
}
.cp-close-btn {
  display:        inline-flex;
  align-items:     center;
  justify-content: center;
  width:          34px;
  height:         34px;
  background:      rgba(0,0,0,0.06);
  border:         1px solid rgba(0,0,0,0.12);
  font-size:      18px;
  color:          var(--text-muted);
  cursor:         pointer;
  padding:        0;
  border-radius:  8px;
  transition:      all var(--transition);
}
.cp-close-btn:hover { background: rgba(0,0,0,0.12); color: var(--text); }
body.dark-mode .cp-close-btn { background: #2a1f12; border-color: #3d2b18; }

/* ── Toolbar ── */
.cp-toolbar {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap:   wrap;
}
.cp-search    { flex: 1; min-width: 160px; }
.cp-toolbar-right { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-cp-action {
  padding:       6px 14px;
  border-radius: 7px;
  border:        1.5px solid var(--border);
  background:    var(--bg-section);
  color:         var(--text);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.btn-cp-action:hover { border-color: var(--primary); color: var(--primary); }

.btn-cp-danger {
  padding:       6px 14px;
  border-radius: 7px;
  border:        1.5px solid var(--border);
  background:    none;
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-cp-danger:hover { border-color: var(--danger); color: var(--danger); }

/* ── Tab Label ── */
.cp-label-tabs {
  display:   flex;
  gap:       6px;
  padding:   10px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background:    var(--bg-section);
}
.cpl-tab {
  padding:       4px 14px;
  border-radius: 20px;
  border:        1.5px solid var(--border);
  background:    var(--bg-card);
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.cpl-tab:hover  { border-color: var(--primary-light); color: var(--primary); }
.cpl-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Daftar Item ── */
.cp-item-list {
  padding:        12px 16px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  min-height:     80px;
}

.catalog-manage-item {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 12px;
  background:    var(--bg-section);
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  transition:    border-color var(--transition);
}
.catalog-manage-item:hover { border-color: var(--primary); }

.cmi-img-wrap {
  width:      72px;
  height:     54px;
  border-radius: 8px;
  overflow:   hidden;
  flex-shrink: 0;
  background: var(--border);
}
.cmi-img-wrap img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
}

.cmi-info     { flex: 1; min-width: 0; }
.cmi-name     { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.cmi-price    { display: block; font-size: 12px; color: var(--primary); font-weight: 600; margin-top: 2px; }
.cmi-label    {
  display:       inline-block;
  font-size:     10px;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       1px 6px;
  color:         var(--text-muted);
  margin-top:    4px;
}

.cmi-actions  { display: flex; gap: 6px; flex-shrink: 0; }

.btn-cmi-edit {
  padding:       5px 12px;
  border-radius: 6px;
  border:        1.5px solid var(--primary);
  background:    none;
  color:         var(--primary);
  font-size:     11px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-cmi-edit:hover { background: var(--primary); color: #fff; }

.btn-cmi-del {
  padding:       5px 10px;
  border-radius: 6px;
  border:        1.5px solid var(--border);
  background:    none;
  color:         var(--text-muted);
  font-size:     11px;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-cmi-del:hover { border-color: var(--danger); color: var(--danger); }

.catalog-empty {
  text-align:  center;
  color:       var(--text-muted);
  font-size:   13px;
  padding:     24px;
  font-style:  italic;
}

/* ── Form Tambah/Edit ── */
.cp-form-section {
  margin:        12px 16px 16px;
  padding:       16px;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-sm);
}
.cp-form-section h3 {
  font-size:     15px;
  font-weight:   800;
  color:         var(--text);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.cp-form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}
.cp-form-full { grid-column: 1 / -1; }

/* Image type tabs */
.img-type-tabs {
  display:       flex;
  gap:           6px;
  margin-bottom: 10px;
}
.img-tab-btn {
  padding:       5px 16px;
  border-radius: 6px;
  border:        1.5px solid var(--border);
  background:    var(--bg-card);
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.img-tab-btn.active {
  background:   var(--primary);
  border-color: var(--primary);
  color:        #fff;
}

.btn-upload-img {
  display:       block;
  padding:       10px 16px;
  border:        2px dashed var(--border);
  border-radius: var(--radius);
  text-align:    center;
  color:         var(--text-muted);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition);
  background:    var(--bg-card);
}
.btn-upload-img:hover { border-color: var(--primary); color: var(--primary); }

.btn-clear-img {
  display:       block;
  margin-top:    6px;
  padding:       4px 10px;
  border-radius: 6px;
  border:        1px solid var(--border);
  background:    none;
  color:         var(--text-muted);
  font-size:     11px;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-clear-img:hover { border-color: var(--danger); color: var(--danger); }

.cp-form-actions {
  display:    flex;
  gap:        10px;
  margin-top: 14px;
  flex-wrap:  wrap;
}

.btn-cp-submit {
  padding:       10px 24px;
  border-radius: var(--radius);
  border:        none;
  background:    var(--primary);
  color:         #fff;
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-cp-submit:hover { background: var(--primary-dark); }

.btn-cp-cancel {
  padding:       10px 20px;
  border-radius: var(--radius);
  border:        1.5px solid var(--border);
  background:    none;
  color:         var(--text-muted);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-cp-cancel:hover { border-color: var(--text); color: var(--text); }

/* ── Manager Label ── */
.cp-label-manager {
  padding:    16px;
  border-top: 2px solid var(--border);
}
.cp-label-manager h3 {
  font-size:     14px;
  font-weight:   800;
  color:         var(--primary);
  margin-bottom: 12px;
}
.label-add-row {
  display: flex;
  gap:     10px;
  margin-bottom: 12px;
}
.label-add-row .input-field { flex: 1; }
.label-list {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.label-manage-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         8px 12px;
  background:      var(--bg-section);
  border:          1px solid var(--border);
  border-radius:   var(--radius);
}
.lmi-name {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
  text-transform: capitalize;
}
.btn-lmi-del {
  padding:       4px 10px;
  border-radius: 6px;
  border:        1px solid var(--border);
  background:    none;
  color:         var(--text-muted);
  font-size:     11px;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-lmi-del:hover { border-color: var(--danger); color: var(--danger); }

/* ── Responsive ── */
@media (max-width: 600px) {
  .cp-form-grid { grid-template-columns: 1fr; }
  .cp-toolbar   { flex-direction: column; align-items: stretch; }
  .cp-search    { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   HAMBURGER MENU DAN NAV MOBILE
   ══════════════════════════════════════════════════════════ */

/* Desktop: tampilkan tombol normal, sembunyikan hamburger */
.desktop-actions { display: flex; align-items: center; gap: 5px; }
.mobile-actions  { display: none; align-items: center; gap: 8px; }

/* HP/Tablet: sembunyikan desktop, tampilkan hamburger */
@media (max-width: 768px) {
  .desktop-actions { display: none; }
  .mobile-actions  { display: flex; }
}

/* Hamburger button */
.btn-hamburger {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            5px;
  width:          36px;
  height:         36px;
  padding:        6px;
  background:     rgba(255,255,255,0.12);
  border:         1.5px solid rgba(255,255,255,0.35);
  border-radius:  8px;
  cursor:         pointer;
  transition:     all var(--transition);
}
.btn-hamburger span {
  display:      block;
  width:        100%;
  height:       2px;
  background:   #fff;
  border-radius: 2px;
  transition:   all 0.25s ease;
  transform-origin: center;
}
/* Animasi X saat open */
.btn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.btn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav Menu Dropdown */
.nav-menu {
  display:    none;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  position:   relative;
  z-index:    98;
}
.nav-menu.open {
  display:   block;
  animation: fadeDown 0.18s ease;
}
.nav-menu-inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   8px 12px 12px;
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
.nav-item {
  padding:       8px 16px;
  border-radius: var(--radius);
  border:        1.5px solid var(--border);
  background:    var(--bg-section);
  color:         var(--text);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.nav-item:hover { border-color: var(--primary); color: var(--primary); }
.nav-divider {
  width:      100%;
  height:     1px;
  background: var(--border);
  margin:     4px 0;
}
.nav-label {
  width:       100%;
  font-size:   10px;
  font-weight: 700;
  color:       var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding:     0 2px;
}

/* ══════════════════════════════════════════════════════════
   PANEL LAPORAN
   ══════════════════════════════════════════════════════════ */

/* Filter periode */
.report-filter {
  display:       flex;
  gap:           6px;
  padding:       12px 16px;
  border-bottom: 1px solid var(--border);
  background:    var(--bg-section);
  flex-wrap:     wrap;
}
.rf-btn {
  padding:       6px 16px;
  border-radius: 20px;
  border:        1.5px solid var(--border);
  background:    var(--bg-card);
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.rf-btn:hover  { border-color: var(--primary); color: var(--primary); }
.rf-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Kartu ringkasan */
.report-cards {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   10px;
  padding:               14px 16px;
}
@media (min-width: 600px) {
  .report-cards { grid-template-columns: repeat(4, 1fr); }
}

.report-card {
  background:    var(--bg-section);
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  padding:       12px 14px;
  text-align:    center;
}
.report-card.primary {
  background:    var(--primary);
  border-color:  var(--primary-dark);
  grid-column:   1 / -1;
}
.report-card.primary .rc-label { color: rgba(255,255,255,0.8); }
.report-card.primary .rc-value { color: #fff; font-size: 20px; }

.rc-label {
  font-size:   11px;
  color:       var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.rc-value {
  font-size:   16px;
  font-weight: 900;
  color:       var(--primary);
  word-break:  break-word;
}

/* Section laporan */
.report-section {
  padding:    14px 16px;
  border-top: 1px solid var(--border);
}
.report-section-title {
  font-size:     13px;
  font-weight:   800;
  color:         var(--primary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Bar chart — desain standar industri: flat bars + tooltip on-tap */
.report-chart-peak {
  font-size:     11px;
  font-weight:   700;
  color:         var(--text-muted);
  margin-bottom: 10px;
}
.report-chart-wrap { width: 100%; overflow-x: auto; padding-top: 34px; }

.bar-chart {
  position:   relative;
  min-width:  200px;
}
.bar-chart-bars {
  display:       flex;
  align-items:   flex-end;
  gap:           3px;
  height:        130px;
  padding:       0 4px;
  border-bottom: 2px solid var(--border);
}
.bar-col {
  flex:        1;
  display:     flex;
  flex-direction: column;
  align-items: center;
  min-width:   20px;
  position:    relative;
  height:      100%;
  justify-content: flex-end;
  cursor:      pointer;
}

/* Tooltip melayang — tidak ikut alur layout, tidak dorong elemen lain */
.bar-tip {
  position:      absolute;
  bottom:        calc(100% + 6px);
  left:          50%;
  transform:     translateX(-50%) translateY(4px);
  background:    var(--text);
  color:         var(--bg-card);
  font-size:     10px;
  font-weight:   700;
  padding:       5px 9px;
  border-radius: 6px;
  white-space:   nowrap;
  z-index:       20;
  opacity:       0;
  pointer-events: none;
  transition:    opacity 0.15s ease, transform 0.15s ease;
}
.bar-tip::after {
  content:    '';
  position:   absolute;
  top:        100%;
  left:       50%;
  transform:  translateX(-50%);
  border:     4px solid transparent;
  border-top-color: var(--text);
}
.bar-col.tip-active .bar-tip {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}
.bar-col.tip-active .bar-wrap { outline: 2px solid var(--primary); outline-offset: 1px; }

.bar-wrap {
  width:      100%;
  height:     100%;
  display:    flex;
  align-items: flex-end;
  background: var(--bg-section);
}
.bar-fill {
  width:      100%;
  background: var(--primary);
  transition: height 0.3s ease;
  min-height: 3px;
}
.bar-fill.empty {
  background: var(--border);
  min-height: 3px;
}
.bar-label {
  font-size:     9px;
  color:         var(--text-muted);
  text-align:    center;
  white-space:   nowrap;
  margin-top:    6px;
  min-height:    12px;
}
.report-chart-total {
  text-align:  center;
  font-size:   11px;
  font-weight: 700;
  color:       var(--text-muted);
  margin-top:  12px;
  padding-top: 8px;
  border-top:  1px dashed var(--border);
}
.chart-empty {
  text-align: center;
  color:      var(--text-muted);
  font-size:  13px;
  padding:    24px;
  font-style: italic;
}

/* Tabel laporan */
.report-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table thead th {
  background:  var(--bg-section);
  color:       var(--text-muted);
  font-size:   11px;
  font-weight: 700;
  padding:     8px 10px;
  text-align:  left;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  text-transform: uppercase;
}
.report-table tbody td {
  padding:      8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.report-table tbody tr:last-child td { border-bottom: none; }
.report-table tbody tr:hover td { background: var(--bg-section); }

/* Ringkasan detail */
.summary-detail-box {
  background:    var(--bg-section);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
}
.summary-detail-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         10px 14px;
  font-size:       13px;
  border-bottom:   1px solid var(--border);
  color:           var(--text-muted);
}
.summary-detail-row:last-child { border-bottom: none; }
.summary-detail-row span:last-child { font-weight: 700; color: var(--text); }
.summary-detail-row.highlight span:last-child { color: var(--primary); font-size: 14px; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE FIX — LAYAR KECIL (max 480px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Main padding lebih kecil */
  .main { padding: 8px; }

  /* Content grid single column */
  .content-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Card padding lebih kecil */
  .card-body  { padding: 10px; }
  .card-header { padding: 10px 12px; font-size: 13px; }

  /* ── Tabel item pesanan ── */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table       { font-size: 12px; min-width: 0; }
  thead th    { padding: 6px 6px; font-size: 10px; }
  tbody td    { padding: 6px 6px; }

  /* Sembunyikan kolom harga di tabel pesanan — hemat ruang */
  .td-price     { display: none; }
  th:nth-child(3) { display: none; } /* header Harga */

  /* Qty control lebih compact */
  .qty-control { gap: 2px; }
  .qty-btn     { width: 22px; height: 22px; font-size: 13px; }
  .qty-val     { min-width: 20px; font-size: 12px; }

  /* Tombol hapus item */
  .btn-del-item { font-size: 13px; padding: 2px 4px; }

  /* ── Input lanjutan ── */
  .input-row {
    flex-direction: column;
    align-items:    stretch;
    gap:            4px;
  }
  .input-row label {
    flex:      none;
    font-size: 12px;
  }
  .input-row .input-field { width: 100%; }

  /* ── Ringkasan perhitungan ── */
  .summary-row        { font-size: 12px; padding: 4px 0; }
  .summary-row.total-row  { font-size: 15px; }
  .summary-row.change-row { font-size: 14px; }
  .summary-box        { padding: 10px; }

  /* Tombol print */
  .btn-print { font-size: 14px; padding: 12px; }

  /* ── Tab ── */
  .tab-btn { font-size: 12px; padding: 9px 8px; }

  /* ── Label katalog ── */
  .label-btn { font-size: 11px; padding: 5px 10px; }

  /* Catalog grid lebih kecil */
  .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
  }
  .catalog-name  { font-size: 10px; }
  .catalog-price { font-size: 10px; }

  /* ── Input manual qty ── */
  .qty-wrap          { gap: 4px; }
  .qty-stepper       { width: 36px; height: 38px; font-size: 18px; }
  .qty-manual-input  { width: 60px; font-size: 14px; }

  /* ── Histori tabel ── */
  .history-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hist-tag   { font-size: 10px; padding: 1px 4px; }
  .td-num     { font-size: 11px; }
  .dt-date    { font-size: 11px; }
  .dt-time    { font-size: 10px; }

  /* Sembunyikan kolom kurang penting di histori */
  .history-table-wrap table th:nth-child(4),
  .history-table-wrap table td:nth-child(4),
  .history-table-wrap table th:nth-child(5),
  .history-table-wrap table td:nth-child(5),
  .history-table-wrap table th:nth-child(6),
  .history-table-wrap table td:nth-child(6),
  .history-table-wrap table th:nth-child(8),
  .history-table-wrap table td:nth-child(8) { display: none; }

  /* ── Action bar ── */
  .action-bar { padding: 0 10px; }
  .btn-action { padding: 5px 9px; font-size: 11px; }
  .act-icon   { font-size: 13px; }

  /* ── Datetime ── */
  #live-date { font-size: 12px; }
  #live-time { font-size: 16px; }

  /* ── Printer bar ── */
  .printer-bar         { padding: 7px 10px; }
  .pb-btn              { font-size: 11px; padding: 5px 10px; }
  .pb-label            { font-size: 10px; }
  .printer-bar .printer-status { font-size: 11px; }

  /* ── Sort histori ── */
  .sort-btn   { font-size: 11px; padding: 5px 10px; }
  .history-controls { gap: 6px; }

  /* ── Summary edit banner ── */
  .edit-mode-banner { padding: 6px 10px; }
  .emb-tag          { font-size: 9px; }
  .emb-info         { font-size: 10px; }
  .emb-btn-cancel   { font-size: 10px; padding: 2px 8px; }
}

/* Extra kecil (max 360px) */
@media (max-width: 360px) {
  .act-label   { display: none; }
  .btn-action  { padding: 5px 8px; }
  .header-logo { font-size: 16px; }
  .header-logo span { display: none; }
}

/* ══════════════════════════════════════════════════════════
   METODE PEMBAYARAN
   ══════════════════════════════════════════════════════════ */

.payment-method-wrap  { margin-bottom: 12px; }
.payment-method-label {
  display:     block;
  font-size:   12px;
  font-weight: 600;
  color:       var(--text-muted);
  margin-bottom: 8px;
}

.payment-methods {
  display: flex;
  gap:     8px;
}

.btn-payment {
  flex:          1;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           4px;
  padding:       10px 8px;
  border-radius: var(--radius);
  border:        2px solid var(--border);
  background:    var(--bg-section);
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-payment:hover {
  border-color: var(--primary-light);
  background:   var(--bg-card);
}
.btn-payment.active {
  border-color: var(--primary);
  background:   var(--primary);
}
.btn-payment.active .pm-label { color: #fff; }

.pm-icon  { font-size: 20px; line-height: 1; color: var(--text); }
.pm-label {
  font-size:   11px;
  font-weight: 700;
  color:       var(--text-muted);
  transition:  color var(--transition);
}

/* Badge metode di histori */
.pm-badge {
  display:       inline-block;
  padding:       1px 7px;
  border-radius: 4px;
  font-size:     10px;
  font-weight:   700;
  margin-right:  4px;
  margin-bottom: 3px;
  vertical-align: middle;
}
.pm-tunai    { background: #e8f5e9; color: #276749; border: 1px solid #81c784; }
.pm-qris     { background: #e3f2fd; color: #1565c0; border: 1px solid #64b5f6; }
.pm-transfer { background: #fff3e0; color: #e65100; border: 1px solid #ffb74d; }

@media (max-width: 480px) {
  .pm-icon  { font-size: 18px; }
  .pm-label { font-size: 10px; }
  .btn-payment { padding: 8px 6px; }
}

/* ══════════════════════════════════════════════════════════
   IMPORT CSV
   ══════════════════════════════════════════════════════════ */

/* Dropdown import CSV */
.import-csv-wrap { position: relative; }

.import-csv-menu {
  display:       none;
  position:      fixed;
  background:    var(--bg-card);
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-lg);
  min-width:     190px;
  max-width:     calc(100vw - 24px);
  overflow:      hidden;
  z-index:       99999;
  animation:     fadeDown 0.15s ease;
}
.import-csv-menu.open { display: block; }

.import-csv-item {
  display:    block;
  width:      100%;
  padding:    10px 14px;
  font-size:  13px;
  font-weight: 600;
  color:      var(--text);
  background: none;
  border:     none;
  cursor:     pointer;
  text-align: left;
  transition: background var(--transition);
  border-bottom: 1px solid var(--border);
}
.import-csv-item:last-child { border-bottom: none; }
.import-csv-item:hover { background: var(--bg-section); }
.import-csv-item.import-csv-danger { color: var(--danger); }
.import-csv-item.import-csv-danger:hover { background: #fff5f5; }

/* Modal import preview */
.modal-import-preview { max-width: 440px; }
.modal-import-preview h3 { margin-bottom: 12px; }

/* Summary */
.ip-summary {
  display:    flex;
  gap:        8px;
  flex-wrap:  wrap;
  margin-bottom: 10px;
}
.ip-valid {
  padding:       3px 10px;
  border-radius: 20px;
  background:    var(--bg-section);
  border:        1px solid #81c784;
  color:         var(--success);
  font-size:     12px;
  font-weight:   700;
}
.ip-invalid {
  padding:       3px 10px;
  border-radius: 20px;
  background:    #fff5f5;
  border:        1px solid #fc8181;
  color:         var(--danger);
  font-size:     12px;
  font-weight:   700;
}
.ip-mode {
  padding:       3px 10px;
  border-radius: 20px;
  background:    var(--bg-section);
  border:        1px solid var(--border);
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   600;
}

/* Daftar preview item */
.ip-list {
  max-height:    240px;
  overflow-y:    auto;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.ip-item {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 12px;
  border-bottom: 1px solid var(--border);
  font-size:     12px;
}
.ip-item:last-child { border-bottom: none; }
.ip-item:nth-child(even) { background: var(--bg-section); }

.ip-check  { color: var(--success); font-size: 13px; flex-shrink: 0; }
.ip-name   { flex: 1; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-price  { color: var(--primary); font-weight: 700; font-size: 11px; flex-shrink: 0; }
.ip-label  { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.ip-more   { padding: 8px 12px; font-size: 11px; color: var(--text-muted); font-style: italic; text-align: center; }

/* Item tidak valid */
.ip-invalid-list  { margin-top: 8px; }
.ip-invalid-title { font-size: 11px; font-weight: 700; color: var(--danger); margin-bottom: 4px; }
.ip-invalid-item  { font-size: 11px; color: var(--text-muted); padding: 2px 0; }

/* Tombol konfirmasi import */
.btn-modal-confirm {
  background:  var(--primary);
  color:       #fff;
  border:      none;
  padding:     8px 20px;
  border-radius: 8px;
  font-size:   13px;
  font-weight: 700;
  cursor:      pointer;
  transition:  all var(--transition);
}
.btn-modal-confirm:hover { background: var(--primary-dark); }

/* ══════════════════════════════════════════════════════════
   NOTA PENDING
   ══════════════════════════════════════════════════════════ */

/* Tombol nota di action bar */
.btn-action-note { position: relative; }

.note-badge {
  position:      absolute;
  top:           -6px;
  right:         -6px;
  background:    var(--danger);
  color:         #fff;
  font-size:     10px;
  font-weight:   900;
  width:         18px;
  height:        18px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        2px solid var(--bg-card);
  line-height:   1;
  pointer-events: none;
}

/* Panel toolbar */
.note-panel-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 16px;
  border-bottom:   1px solid var(--border);
  background:      var(--bg-section);
  gap:             10px;
}
.note-panel-info {
  font-size:  12px;
  color:      var(--text-muted);
  font-style: italic;
}

/* Daftar nota */
.note-list {
  padding:        12px 16px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  min-height:     80px;
}
.note-empty {
  text-align:  center;
  color:       var(--text-muted);
  font-size:   13px;
  padding:     32px;
  font-style:  italic;
}

/* Item nota */
.note-item {
  display:       flex;
  align-items:   stretch;
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  transition:    all var(--transition);
  background:    var(--bg-section);
}
.note-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }

.note-item-main {
  flex:       1;
  padding:    12px 14px;
  cursor:     pointer;
  min-width:  0;
}
.note-item-main:hover { background: var(--bg-card); }

.note-label {
  font-size:   14px;
  font-weight: 800;
  color:       var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.note-meta {
  display:   flex;
  gap:       10px;
  margin-bottom: 4px;
}
.note-time {
  font-size: 11px;
  color:     var(--text-muted);
}
.note-count {
  font-size:   11px;
  color:       var(--primary);
  font-weight: 700;
}
.note-items-preview {
  font-size:     11px;
  color:         var(--text-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.note-total {
  font-size:   13px;
  font-weight: 800;
  color:       var(--primary);
}

.btn-note-del {
  padding:         0 14px;
  background:      none;
  border:          none;
  border-left:     1px solid var(--border);
  color:           var(--text-muted);
  font-size:       20px;
  cursor:          pointer;
  transition:      all var(--transition);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.btn-note-del:hover {
  background: #fff5f5;
  color:      var(--danger);
}

@media (max-width: 480px) {
  .note-label  { font-size: 13px; }
  .note-total  { font-size: 12px; }
  .btn-note-del { padding: 0 12px; font-size: 18px; }
}

/* ── Tombol Simpan Nota di area perhitungan ─────────────── */
.btn-save-nota {
  width:         100%;
  padding:       10px;
  border:        1.5px dashed var(--primary);
  border-radius: var(--radius);
  background:    transparent;
  color:         var(--primary);
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
  margin-bottom: 8px;
}
.btn-save-nota:hover {
  background: var(--primary);
  color:      #fff;
}

/* ══════════════════════════════════════════════════════════
   PANEL BACKUP & RESTORE
   ══════════════════════════════════════════════════════════ */

/* Stats section */
.backup-stats-section {
  padding:       14px 16px;
  border-bottom: 1px solid var(--border);
  background:    var(--bg-section);
}
.backup-stat-title {
  font-size:     12px;
  font-weight:   700;
  color:         var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}
.backup-stats-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   8px;
  margin-bottom:         10px;
}
@media (min-width: 480px) {
  .backup-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.backup-stat-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       10px 12px;
  text-align:    center;
}
.bsc-label {
  display:     block;
  font-size:   10px;
  color:       var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.bsc-value {
  display:     block;
  font-size:   14px;
  font-weight: 900;
  color:       var(--primary);
}

.backup-last-info {
  font-size:  12px;
  padding:    6px 10px;
  border-radius: 6px;
  text-align: center;
}
.backup-last-info.has-backup {
  background: var(--bg-section);
  color:      var(--success);
  border:     1px solid #81c784;
}
.backup-last-info.no-backup {
  background: #fff5f5;
  color:      var(--text-muted);
  border:     1px solid var(--border);
}
body.dark-mode .backup-last-info.no-backup {
  background: var(--bg-section);
}

/* Backup/Restore sections */
.backup-section {
  padding:       16px;
  border-bottom: 1px solid var(--border);
}
.backup-section-title {
  font-size:     14px;
  font-weight:   800;
  color:         var(--primary);
  margin-bottom: 6px;
}
.backup-section-desc {
  font-size:     12px;
  color:         var(--text-muted);
  line-height:   1.6;
  margin-bottom: 12px;
}

/* Tombol backup */
.btn-backup-action {
  display:       block;
  width:         100%;
  padding:       11px 16px;
  border-radius: var(--radius);
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  text-align:    center;
  transition:    all var(--transition);
}
.btn-backup-primary {
  background: var(--primary);
  color:      #fff;
  border:     none;
  margin-bottom: 10px;
}
.btn-backup-primary:hover { background: var(--primary-dark); }

.btn-backup-secondary {
  background: none;
  color:      var(--primary);
  border:     1.5px dashed var(--primary);
  margin-bottom: 12px;
}
.btn-backup-secondary:hover {
  background: var(--primary);
  color:      #fff;
}

/* Restore file info */
.restore-info-box {
  background:    var(--bg-section);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       10px 14px;
  margin-bottom: 12px;
}
.restore-info-row {
  display:         flex;
  justify-content: space-between;
  font-size:       12px;
  padding:         3px 0;
  border-bottom:   1px solid var(--border);
  color:           var(--text-muted);
}
.restore-info-row:last-child { border-bottom: none; }
.restore-info-row span:last-child {
  font-weight: 700;
  color:       var(--text);
}

/* Opsi restore */
.restore-options-title {
  font-size:     12px;
  font-weight:   700;
  color:         var(--text-muted);
  margin-bottom: 8px;
}
.restore-options {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  14px;
}
.restore-opt {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     9px 12px;
  background:  var(--bg-section);
  border:      1px solid var(--border);
  border-radius: var(--radius);
  cursor:      pointer;
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
  transition:  border-color var(--transition);
}
.restore-opt:hover { border-color: var(--primary); }
.restore-opt input[type="checkbox"] {
  width:     16px;
  height:    16px;
  cursor:    pointer;
  accent-color: var(--primary);
}

/* Warning */
.backup-warning {
  margin:        12px 16px 16px;
  padding:       10px 14px;
  background:    #fffde7;
  border:        1px solid #ffd54f;
  border-radius: var(--radius);
  font-size:     11px;
  color:         #795548;
  line-height:   1.6;
}
body.dark-mode .backup-warning {
  background: #2d2600;
  border-color: #5d4e00;
  color:       #ffd54f;
}

/* ══════════════════════════════════════════════════════════
   MANAJEMEN STOK
   ══════════════════════════════════════════════════════════ */

/* ── Toggle fitur stok di panel katalog ── */
.stok-feature-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px;
  background:      var(--bg-section);
  border-bottom:   1px solid var(--border);
  gap:             12px;
}
.sfb-left    { display: flex; flex-direction: column; gap: 2px; }
.sfb-label   { font-size: 13px; font-weight: 800; color: var(--text); }
.sfb-desc    { font-size: 11px; color: var(--text-muted); }

.stok-toggle-btn {
  padding:       6px 20px;
  border-radius: 20px;
  border:        none;
  font-size:     13px;
  font-weight:   800;
  cursor:        pointer;
  transition:    all var(--transition);
  min-width:     60px;
  text-align:    center;
}
.stok-toggle-btn.off {
  background: var(--border);
  color:      var(--text-muted);
}
.stok-toggle-btn.on {
  background: var(--primary);
  color:      #fff;
  box-shadow: 0 2px 8px rgba(208,79,0,0.3);
}

/* ── Info stok rendah di panel katalog ── */
.stok-info-section {
  padding:       10px 16px;
  background:    #fff8f0;
  border-bottom: 1px solid #ffd5b0;
}
.stok-info-ok {
  font-size: 12px;
  color:     var(--success);
  font-weight: 600;
}
.stok-info-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         4px 0;
  font-size:       12px;
  border-bottom:   1px solid #ffd5b0;
}
.stok-info-row:last-child { border-bottom: none; }
.stok-info-name  { color: var(--text); font-weight: 600; }
.stok-info-badge {
  padding:       2px 8px;
  border-radius: 4px;
  font-size:     10px;
  font-weight:   800;
}
.stok-info-badge.habis { background: #fee2e2; color: #dc2626; }
.stok-info-badge.low   { background: #fef3c7; color: #d97706; }

/* ── Kontrol stok di item list panel katalog ── */
.cmi-stok-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  6px;
  flex-wrap:   wrap;
}
.cmi-stok-track {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   11px;
  color:       var(--text-muted);
  cursor:      pointer;
  white-space: nowrap;
}
.cmi-stok-track input { cursor: pointer; accent-color: var(--primary); }

.cmi-stok-ctrl {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.btn-stok-adj {
  width:         24px;
  height:        24px;
  border-radius: 50%;
  border:        1.5px solid var(--border);
  background:    var(--bg-card);
  color:         var(--text);
  font-size:     14px;
  font-weight:   700;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all var(--transition);
  line-height:   1;
}
.btn-stok-adj:hover { border-color: var(--primary); color: var(--primary); }

.stok-val {
  min-width:   28px;
  text-align:  center;
  font-size:   13px;
  font-weight: 800;
  color:       var(--text);
}
.stok-val.habis { color: #dc2626; }
.stok-val.low   { color: #d97706; }

.stok-input {
  width:         54px;
  padding:       3px 6px;
  border:        1.5px solid var(--border);
  border-radius: 6px;
  font-size:     12px;
  text-align:    center;
  background:    var(--bg-card);
  color:         var(--text);
}
.stok-input:focus { border-color: var(--primary); outline: none; }

/* ── Kartu katalog saat stok habis ── */
.catalog-card.card-habis {
  opacity:        0.55;
  pointer-events: none;  /* tidak bisa diklik */
  filter:         grayscale(60%);
}
.catalog-img-wrap {
  position: relative;
  overflow: hidden;
}

/* Badge stok di kartu katalog */
.badge-stok {
  position:      absolute;
  top:           4px;
  right:         4px;
  padding:       2px 6px;
  border-radius: 4px;
  font-size:     10px;
  font-weight:   800;
  line-height:   1.4;
}
.badge-stok.habis { background: #dc2626; color: #fff; }
.badge-stok.low   { background: #d97706; color: #fff; }
.badge-stok.ok    { background: rgba(0,0,0,0.45); color: #fff; }

/* Item di daftar panel katalog saat stok habis */
.catalog-manage-item.item-habis {
  border-color: #fca5a5;
  background:   #fff9f9;
}
.catalog-manage-item.item-habis .cmi-name {
  color: #aaa;
}

/* ── Alert stok di panel laporan ── */
.stok-alert-group { margin-bottom: 10px; }
.stok-alert-label {
  font-size:   11px;
  font-weight: 700;
  padding:     3px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  display:     inline-block;
}
.stok-alert-label.habis { background: #fee2e2; color: #dc2626; }
.stok-alert-label.low   { background: #fef3c7; color: #d97706; }

.stok-alert-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         6px 10px;
  background:      var(--bg-section);
  border:          1px solid var(--border);
  border-radius:   6px;
  margin-bottom:   4px;
  font-size:       12px;
}
.stok-badge-habis {
  background: #dc2626; color: #fff;
  padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 800;
}
.stok-badge-low {
  background: #d97706; color: #fff;
  padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 800;
}

/* ══════════════════════════════════════════════════════════
   PANEL TEMA WARNA
   ══════════════════════════════════════════════════════════ */

.theme-section {
  padding:       16px;
  border-bottom: 1px solid var(--border);
}
.theme-section:last-child { border-bottom: none; }

.theme-section-title {
  font-size:     12px;
  font-weight:   700;
  color:         var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
}

/* Grid preset warna */
.theme-preset-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   10px;
}

@media (max-width: 400px) {
  .theme-preset-grid { grid-template-columns: repeat(3, 1fr); }
}

.theme-preset-btn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  padding:        12px 8px;
  border-radius:  var(--radius);
  border:         2px solid var(--border);
  background:     var(--bg-section);
  cursor:         pointer;
  transition:     all var(--transition);
  position:       relative;
}
.theme-preset-btn:hover {
  border-color: var(--btn-color, var(--primary));
  transform:    translateY(-1px);
  box-shadow:   var(--shadow-sm);
}
.theme-preset-btn.active {
  border-color: var(--btn-color, var(--primary));
  background:   var(--bg-card);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--btn-color, var(--primary)) 20%, transparent);
}

.tp-swatch {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  display:       block;
  box-shadow:    0 2px 6px rgba(0,0,0,0.15);
  flex-shrink:   0;
}
.tp-name {
  font-size:   11px;
  font-weight: 600;
  color:       var(--text);
  text-align:  center;
}
.tp-check {
  position:    absolute;
  top:         4px;
  right:       5px;
  font-size:   11px;
  font-weight: 900;
  color:       var(--bg-card);
  background:  var(--btn-color, var(--primary));
  border-radius: 50%;
  padding:     2px;
  line-height: 1;
}

/* Custom color picker */
.theme-custom-row {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         16px;
  padding:     12px 14px;
  background:  var(--bg-section);
  border:      1.5px solid var(--border);
  border-radius: var(--radius);
}
.theme-custom-info  { flex: 1; }
.theme-custom-label {
  display:     block;
  font-size:   13px;
  font-weight: 700;
  color:       var(--text);
  margin-bottom: 2px;
}
.theme-custom-desc {
  display:   block;
  font-size: 11px;
  color:     var(--text-muted);
}

.custom-color-input {
  width:         52px;
  height:        52px;
  border:        none;
  border-radius: var(--radius);
  cursor:        pointer;
  padding:       0;
  background:    none;
  flex-shrink:   0;
}
.custom-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.custom-color-input::-webkit-color-swatch {
  border:        2px solid var(--border);
  border-radius: var(--radius);
}

/* ══════════════════════════════════════════════════════════
   HEADER LOGO LAYOUT — STYLE INDUSTRI
   ══════════════════════════════════════════════════════════ */

.header-logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex:        1;
  min-width:   0;
}

.header-logo-img-wrap {
  display:     flex;
  align-items: center;
  justify-content: center;
  height:      40px;
  flex-shrink: 0;
}

#store-logo-img {
  max-height:    44px;
  max-width:     120px;
  width:         auto;
  height:        auto;
  object-fit:    contain;
  object-position: left center;
  display:       none;
  border-radius: 4px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

#store-logo-emoji {
  font-size:   28px;
  line-height: 1;
}

.header-logo-text {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  min-width:      0;
}

#store-name {
  font-size:      18px;
  font-weight:    900;
  color:          #fff;
  letter-spacing: 0.5px;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  line-height:    1.2;
}

#store-tagline {
  font-size:   10px;
  font-weight: 400;
  color:       rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

@media (max-width: 360px) {
  #store-name    { font-size: 14px; }
  #store-logo-emoji { font-size: 22px; }
  #store-logo-img { max-height: 32px; }
}

/* ══════════════════════════════════════════════════════════
   PANEL PENGATURAN TOKO
   ══════════════════════════════════════════════════════════ */

/* Preview bar mirip header */
.store-preview-wrap {
  padding:       14px 16px;
  background:    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-bottom: 1px solid var(--border);
}

.store-preview-bar {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.prev-logo-wrap {
  display:     flex;
  align-items: center;
  height:      40px;
  flex-shrink: 0;
}

#prev-logo-img {
  max-height:    44px;
  max-width:     120px;
  width:         auto;
  height:        auto;
  object-fit:    contain;
  display:       none;
  border-radius: 4px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

#prev-logo-emoji {
  font-size:   28px;
  line-height: 1;
}

.prev-text {
  display:        flex;
  flex-direction: column;
  gap:            1px;
}

#prev-nama {
  font-size:   17px;
  font-weight: 900;
  color:       #fff;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

#prev-tagline {
  font-size: 10px;
  color:     rgba(255,255,255,0.75);
}

/* Form section */
.store-form-section {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.store-form-actions {
  display:    flex;
  gap:        10px;
  margin-top: 4px;
}

/* Logo type tabs */
.logo-type-tabs {
  display:       flex;
  gap:           6px;
  margin-bottom: 10px;
}

.logo-tab-btn {
  padding:       6px 16px;
  border-radius: 6px;
  border:        1.5px solid var(--border);
  background:    var(--bg-card);
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.logo-tab-btn.active {
  background:   var(--primary);
  border-color: var(--primary);
  color:        #fff;
}

/* Preset emoji grid */
.store-logo-grid {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   8px;
  margin-bottom:         10px;
}

.logo-preset-btn {
  font-size:     22px;
  padding:       8px;
  border-radius: var(--radius);
  border:        2px solid var(--border);
  background:    var(--bg-section);
  cursor:        pointer;
  transition:    all var(--transition);
  text-align:    center;
  line-height:   1;
}
.logo-preset-btn:hover  { border-color: var(--primary); transform: scale(1.05); }
.logo-preset-btn.active { border-color: var(--primary); background: var(--primary-soft); }

.store-custom-logo-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.store-custom-logo-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.store-logo-input        { width: 70px; text-align: center; font-size: 18px; }

/* Logo upload preview */
.logo-upload-preview-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  10px;
}

/* Divider section di form pengaturan toko */
.store-section-divider {
  font-size:     11px;
  font-weight:   800;
  color:         var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-top:   10px;
  border-top:    1px dashed var(--border);
  margin-top:    4px;
}

/* ══════════════════════════════════════════════════════════
   KALKULATOR KEMBALIAN CEPAT
   ══════════════════════════════════════════════════════════ */

.quick-cash-wrap {
  margin-top:    -4px;
  margin-bottom: 4px;
}

.quick-cash-label {
  font-size:   11px;
  font-weight: 600;
  color:       var(--text-muted);
  margin-bottom: 6px;
}

.quick-cash-btns {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   6px;
}

.btn-quick-cash {
  padding:       9px 4px;
  border-radius: 8px;
  border:        1.5px solid var(--border);
  background:    var(--bg-section);
  color:         var(--text);
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-quick-cash:hover {
  border-color: var(--primary);
  color:        var(--primary);
  background:   var(--bg-card);
}
.btn-quick-cash:active { transform: scale(0.96); }

.btn-quick-cash.btn-quick-exact {
  background:   var(--primary);
  border-color: var(--primary);
  color:        #fff;
}
.btn-quick-cash.btn-quick-exact:hover {
  background: var(--primary-dark);
  color:      #fff;
}

.quick-cash-accum {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      8px;
  padding:         7px 10px;
  background:      var(--primary-soft, #FFE5D6);
  border-radius:   8px;
  font-size:       12px;
  font-weight:     700;
  color:           var(--primary-dark);
}

.btn-quick-reset {
  padding:       3px 10px;
  border-radius: 6px;
  border:        1px solid var(--primary-dark);
  background:    none;
  color:         var(--primary-dark);
  font-size:     11px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-quick-reset:hover {
  background: var(--primary-dark);
  color:      #fff;
}

@media (max-width: 480px) {
  .btn-quick-cash    { font-size: 12px; padding: 8px 2px; }
  .quick-cash-accum  { font-size: 11px; }
}

/* Hint scroll grafik saat data lebih dari 14 hari */
.chart-scroll-hint {
  text-align: center;
  font-size:  10px;
  color:      var(--text-muted);
  margin-top: 6px;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════
   DISKON PER ITEM
   ══════════════════════════════════════════════════════════ */

/* Tombol diskon di baris tabel item */
.td-item-disc { text-align: center; }

.btn-item-disc {
  padding:       4px 10px;
  border-radius: 6px;
  border:        1.5px dashed var(--border);
  background:    none;
  color:         var(--text-muted);
  font-size:     11px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.btn-item-disc:hover {
  border-color: var(--primary);
  color:        var(--primary);
}
.btn-item-disc.active {
  border-style: solid;
  border-color: var(--danger);
  background:   #fff5f5;
  color:        var(--danger);
}

/* Subtotal dengan diskon — tampil coret + final */
.td-subtotal-raw {
  display:        block;
  font-size:      10px;
  color:          var(--text-muted);
  text-decoration: line-through;
}
.td-subtotal-final {
  display:     block;
  font-weight: 700;
}

/* Modal diskon per item */
.modal-item-discount { max-width: 380px; }

.idm-item-name-wrap {
  font-size:     13px;
  color:         var(--text-muted);
  margin-bottom: 14px;
}
.idm-item-name-wrap strong { color: var(--text); }

.idm-type-tabs {
  display:       flex;
  gap:           6px;
  margin-bottom: 14px;
}
.idm-type-btn {
  flex:          1;
  padding:       8px 10px;
  border-radius: 8px;
  border:        1.5px solid var(--border);
  background:    var(--bg-section);
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.idm-type-btn.active {
  background:   var(--primary);
  border-color: var(--primary);
  color:        #fff;
}

.idm-preview-box {
  background:    var(--bg-section);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       10px 14px;
}
.idm-preview-row {
  display:         flex;
  justify-content: space-between;
  font-size:       12px;
  padding:         4px 0;
  color:           var(--text-muted);
}
.idm-preview-row span:last-child { font-weight: 700; color: var(--text); }
.idm-preview-row.idm-preview-disc span:last-child { color: var(--danger); }
.idm-preview-row.idm-preview-final {
  border-top:  1px solid var(--border);
  margin-top:  4px;
  padding-top: 8px;
}
.idm-preview-row.idm-preview-final span:last-child {
  color:     var(--primary);
  font-size: 14px;
}

@media (max-width: 480px) {
  .btn-item-disc { font-size: 10px; padding: 3px 6px; }
}

/* ══════════════════════════════════════════════════════════
   SHIFT KASIR — BUKA/TUTUP KASIR
   ══════════════════════════════════════════════════════════ */

/* Badge status di header */
.shift-status-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 10px;
  border-radius: 20px;
  background:    rgba(255,255,255,0.18);
  border:        1px solid rgba(255,255,255,0.35);
  color:         #fff;
  font-size:     10px;
  font-weight:   700;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background var(--transition);
}
.shift-status-badge:hover { background: rgba(255,255,255,0.3); }
.shift-status-badge::before {
  content:       '';
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #4ade80;
  display:       inline-block;
  animation:     pulseDot 1.6s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

@media (max-width: 480px) {
  .shift-status-badge { font-size: 0; padding: 6px; }
  .shift-status-badge::before { margin: 0; }
}

/* Section buka shift */
.shift-open-section { padding: 18px 16px; }
.shift-open-desc {
  font-size:     13px;
  color:         var(--text-muted);
  line-height:   1.6;
  margin-bottom: 14px;
}

/* Section shift aktif */
.shift-active-section { padding: 16px; }

.shift-active-banner {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    #dcfce7;
  color:         #15803d;
  padding:       10px 14px;
  border-radius: var(--radius);
  font-size:     13px;
  font-weight:   800;
  margin-bottom: 14px;
}
.sab-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #22c55e;
  display:       inline-block;
  animation:     pulseDot 1.6s infinite;
}

.shift-info-box {
  background:    var(--bg-section);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       10px 14px;
  margin-bottom: 10px;
}
.shift-info-box.shift-kas-box {
  background: var(--primary-soft, #FFE5D6);
  border-color: var(--primary);
}

.shi-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         6px 0;
  font-size:       13px;
  border-bottom:   1px solid var(--border);
  color:           var(--text-muted);
}
.shi-row:last-child { border-bottom: none; }
.shi-row span:last-child { font-weight: 700; color: var(--text); }
.shi-row.shi-highlight {
  padding-top: 8px;
  margin-top:  2px;
  border-top:  1px dashed var(--border);
}
.shi-row.shi-highlight span:last-child {
  color:     var(--primary);
  font-size: 15px;
}

/* Riwayat shift */
.shift-history-section {
  padding:    16px;
  border-top: 2px solid var(--border);
}
.shift-history-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   12px;
}
.btn-shi-clearall {
  padding:       5px 12px;
  border-radius: 6px;
  border:        1px solid var(--border);
  background:    none;
  color:         var(--text-muted);
  font-size:     11px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-shi-clearall:hover { border-color: var(--danger); color: var(--danger); }

.shift-history-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}
.shift-empty {
  text-align: center;
  color:      var(--text-muted);
  font-size:  13px;
  padding:    24px;
  font-style: italic;
}

.shift-hist-item {
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
}
.shi-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         8px 12px;
  background:      var(--bg-section);
  font-size:       12px;
}
.shi-date  { font-weight: 800; color: var(--text); }
.shi-time  { color: var(--text-muted); }

.shi-body { padding: 8px 12px; }
.shi-body .shi-row { font-size: 12px; padding: 4px 0; }

.shi-actions {
  display:       flex;
  gap:           8px;
  padding:       8px 12px;
  border-top:    1px solid var(--border);
}
.btn-shi-export, .btn-shi-del {
  flex:          1;
  padding:       6px 10px;
  border-radius: 6px;
  font-size:     11px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-shi-export {
  background: none;
  border:     1.5px solid var(--primary);
  color:      var(--primary);
}
.btn-shi-export:hover { background: var(--primary); color: #fff; }
.btn-shi-del {
  background: none;
  border:     1.5px solid var(--border);
  color:      var(--text-muted);
}
.btn-shi-del:hover { border-color: var(--danger); color: var(--danger); }

/* Badge nama kasir di riwayat shift */
.shi-kasir-badge {
  display:       inline-block;
  background:    var(--primary-soft, #FFE5D6);
  color:         var(--primary-dark);
  font-size:     10px;
  font-weight:   700;
  padding:       1px 7px;
  border-radius: 10px;
  margin-left:   6px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   SPLIT PAYMENT — PEMBAYARAN CAMPURAN
   ══════════════════════════════════════════════════════════ */

.split-payment-wrap {
  background:    var(--bg-section);
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  padding:       12px 14px;
  margin-bottom: 12px;
}

.split-payment-title {
  font-size:     12px;
  font-weight:   700;
  color:         var(--text-muted);
  margin-bottom: 10px;
}

.split-input-row {
  display:      flex;
  align-items:  center;
  gap:          8px;
  margin-bottom: 8px;
}
.split-input-row:last-of-type { margin-bottom: 0; }

.split-icon {
  font-size:   16px;
  width:       24px;
  text-align:  center;
  flex-shrink: 0;
}

.split-input { flex: 1; }

.split-total-hint {
  margin-top:  8px;
  font-size:   12px;
  font-weight: 700;
  text-align:  center;
  padding:     6px;
  border-radius: 6px;
}
.split-total-hint.warning {
  background: #fff5f5;
  color:      var(--danger);
}
.split-total-hint.ok {
  background: #f0fdf4;
  color:      var(--success);
}

/* Badge metode Campuran di histori */
.pm-split {
  background: #ede9fe;
  color:      #6d28d9;
  border:     1px solid #c4b5fd;
}

/* ============================================================
   FITUR VARIAN ITEM
   ============================================================ */

/* ── Baris varian di tabel pesanan ── */
.td-name-variant {
  font-size:   11px;
  color:       var(--text-muted);
  font-weight: 600;
  margin-top:  2px;
  line-height: 1.4;
}

/* ── Badge & tombol varian di panel katalog ── */
.cmi-var-badge {
  display:       inline-block;
  margin-left:   6px;
  font-size:     9px;
  font-weight:   800;
  background:    var(--primary-soft, #FFE5D6);
  color:         var(--primary);
  border:        1px solid var(--primary-light, #FF7A30);
  border-radius: 4px;
  padding:       1px 6px;
  vertical-align: middle;
}
.btn-cmi-varian {
  padding:       5px 12px;
  border-radius: 6px;
  border:        1.5px solid var(--primary-light, #FF7A30);
  background:    var(--primary-soft, #FFE5D6);
  color:         var(--primary);
  font-size:     11px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-cmi-varian:hover { background: var(--primary); color: #fff; }

/* ── Histori: keterangan varian (multi-baris: nama, varian radio, add-on) ── */

/* ── Modal Pilih Varian (kasir) ── */
.modal-variant-picker,
.modal-variant-editor {
  max-width: 460px;
  max-height: 88vh;
  display:    flex;
  flex-direction: column;
  padding:    20px;
  overflow:   hidden;
}
.vp-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  border-bottom:   1px solid var(--border);
  padding-bottom:  12px;
  margin-bottom:   10px;
}
.vp-header h3 {
  font-size:   15px;
  font-weight: 800;
  color:       var(--text);
  margin:      0;
  flex:        1;
  word-break:  break-word;
}
.vp-base-price {
  font-size:   12px;
  font-weight: 700;
  color:       var(--primary);
  margin-bottom: 10px;
}

.vp-body {
  flex:        1;
  overflow-y:  auto;
  padding-right: 4px;
}
.vp-body.vp-dimmed { opacity: 0.45; }

.vp-group {
  margin-bottom: 14px;
}
.vp-group-title {
  display:      flex;
  align-items:  center;
  gap:          8px;
  margin-bottom: 6px;
  flex-wrap:    wrap;
}
.vp-group-name {
  font-size:   13px;
  font-weight: 800;
  color:       var(--text);
}
.vp-req-badge {
  font-size:     10px;
  font-weight:   800;
  background:    var(--primary-soft, #FFE5D6);
  color:         var(--primary);
  border:        1px solid var(--primary-light, #FF7A30);
  border-radius: 4px;
  padding:       1px 8px;
}
.vp-multi-hint {
  font-size:   10px;
  color:       var(--text-muted);
  font-weight: 600;
}
.vp-options {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.vp-option {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         8px 12px;
  background:      var(--bg-section);
  border:          1.5px solid var(--border);
  border-radius:   8px;
  cursor:          pointer;
  transition:      all var(--transition);
}
.vp-option:hover { border-color: var(--primary-light); }
.vp-option.active {
  border-color: var(--primary);
  background:   var(--primary-soft, #FFE5D6);
}
.vp-option.opt-disabled {
  opacity: 0.5;
  cursor:  not-allowed;
  pointer-events: none;
}
.vp-option input { accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.vp-opt-label {
  flex:       1;
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
}
.vp-opt-add {
  font-size:   11px;
  font-weight: 700;
  color:       var(--primary);
}
.vp-empty {
  font-size:   12px;
  color:       var(--text-muted);
  font-style:  italic;
  padding:     8px 0;
}

.vp-footer {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top:  12px;
}
.vp-total {
  font-size:   15px;
  font-weight: 800;
  color:       var(--text);
  text-align:  right;
  margin-bottom: 8px;
}
.vp-disable-toggle {
  display:         flex;
  align-items:     center;
  gap:             8px;
  font-size:       12px;
  font-weight:    600;
  color:           var(--text-muted);
  cursor:          pointer;
  padding:         8px 12px;
  background:      var(--bg-section);
  border:          1.5px solid var(--border);
  border-radius:   8px;
  margin-bottom:   12px;
}
.vp-disable-toggle input { accent-color: var(--primary); cursor: pointer; }
.vp-disable-toggle:has(input:checked) {
  border-color: var(--primary);
  color:        var(--primary);
}

/* ── Modal Editor Varian & Topping ── */
.ve-body {
  flex:        1;
  overflow-y:  auto;
  padding-right: 4px;
}
.ve-section {
  margin-bottom: 16px;
}
.ve-section-title {
  font-size:   13px;
  font-weight: 800;
  color:       var(--primary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ve-hint {
  font-size:     10px;
  font-weight:   600;
  color:         var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left:   4px;
}
.ve-group {
  background:    var(--bg-section);
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  padding:       12px;
  margin-bottom: 10px;
}
.ve-group-head {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  10px;
}
.ve-group-name { font-size: 13px; font-weight: 700; }
.ve-group-flags {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}
.ve-check {
  display:      flex;
  align-items:  center;
  gap:          5px;
  font-size:    11px;
  font-weight:  600;
  color:        var(--text-muted);
  cursor:       pointer;
}
.ve-check input { accent-color: var(--primary); cursor: pointer; }
.ve-options {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.ve-option-row {
  display:    flex;
  align-items: center;
  gap:        6px;
}
.ve-opt-label { flex: 1; font-size: 12px; }
.ve-opt-price { width: 90px; font-size: 12px; text-align: right; }
.btn-ve-del {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  border:        1.5px solid var(--border);
  background:    var(--bg-card);
  color:         var(--text-muted);
  font-size:     15px;
  line-height:   1;
  cursor:        pointer;
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all var(--transition);
}
.btn-ve-del:hover { border-color: var(--danger); color: var(--danger); }
.btn-ve-del-grp {
  width: auto;
  height: auto;
  border-radius: 6px;
  font-size: 11px;
  padding: 4px 10px;
  color: var(--danger);
  border-color: #fca5a5;
  gap: 0;
}
.btn-ve-add-opt {
  margin-top:    8px;
  padding:       6px 14px;
  border-radius: 6px;
  border:        1.5px dashed var(--border);
  background:    none;
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-ve-add-opt:hover { border-color: var(--primary); color: var(--primary); }
.btn-ve-add-group {
  width:         100%;
  padding:       9px;
  border-radius: 8px;
  border:        1.5px dashed var(--primary-light, #FF7A30);
  background:    var(--primary-soft, #FFE5D6);
  color:         var(--primary);
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--transition);
}
.btn-ve-add-group:hover { background: var(--primary); color: #fff; }
.ve-empty {
  font-size:   12px;
  color:       var(--text-muted);
  font-style:  italic;
  padding:     4px 0 8px;
}
.ve-note {
  font-size:   11px;
  color:       var(--text-muted);
  font-style:  italic;
  background:  var(--bg-section);
  border:      1px solid var(--border);
  border-radius: 8px;
  padding:     10px 12px;
  margin-top:  4px;
}

/* Tombol ok pada modal varian — gunakan warna primary (bukan danger) */
.modal-variant-picker .btn-modal-ok,
.modal-variant-editor .btn-modal-ok {
  background: var(--primary);
}
.modal-variant-picker .btn-modal-ok:hover,
.modal-variant-editor .btn-modal-ok:hover {
  background: var(--primary-dark);
}
.modal-variant-picker .btn-modal-ok:disabled {
  background: var(--border);
  color:      var(--text-muted);
  cursor:     not-allowed;
}

/* ============================================================
   SISTEM IKON SVG (tanpa emoji)
   ============================================================ */
.icon {
  display:        inline-block;
  vertical-align: middle;
  flex-shrink:    0;
  pointer-events: none;
}

/* Logo header & preview (ikon SVG atau fallback teks lama) */
#store-logo-emoji,
#prev-logo-emoji {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
}
.logo-emoji-text {
  font-size:   28px;
  line-height: 1;
}
#prev-logo-emoji .logo-emoji-text { font-size: 26px; }

/* Ikon di action bar & tombol lainnya agar rata tengah */
.act-icon, .pm-icon, .split-icon {
  display:    inline-flex;
  align-items: center;
  justify-content: center;
}

/* Saat tombol payment aktif (bg primary) → ikon putih */
.btn-payment.active .pm-icon { color: #fff; }

/* Preset logo toko: SVG rata tengah di dalam tombol */
.logo-preset-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text);
}
.logo-preset-btn .icon { color: inherit; }

/* Teks dengan ikon check */
.stok-info-ok, .ip-check {
  display: inline-flex;
  align-items: center;
  gap:     5px;
}
.ip-check { align-self: flex-start; }

/* Link Google Sheets dengan ikon */
.drive-link {
  display: inline-flex;
  align-items: center;
  gap:     6px;
}

/* Hint chart dengan panah */
.chart-scroll-hint .icon { margin: 0 3px; }

/* ════════════════════════════════════════════════════════
   DARK MODE — adaptasi warna ikon & status:
   teks/ikon status memakai var terang (--success/danger
   di-override di blok body.dark-mode), sedangkan elemen
   solid/badge tetap memakai background gelap agar teks
   putih dan ikon tetap kontras.
   ════════════════════════════════════════════════════════ */

/* Hover merah muda terang → gelap */
body.dark-mode .btn-action.btn-action-danger:hover { background: #3a1d1d; }
body.dark-mode .btn-del-item:hover,
body.dark-mode .btn-del-hist:hover                 { background: #3a1a1a; }

/* Badge & tombol solid merah/hijau tetap gelap */
body.dark-mode .note-badge                       { background: #7f1d1d; }
body.dark-mode .pcon-icon                        { background: #1f513c; }
body.dark-mode .btn-modal-ok                     { background: #7f1d1d; }
body.dark-mode .btn-modal-ok:hover               { background: #991b1b; }
body.dark-mode .btn-reset-hist:hover             { background: #7f1d1d; }
body.dark-mode .btn-printer-disconnect:hover     { background: #7f1d1d; }
body.dark-mode .pb-btn-disconnect:hover          { background: #7f1d1d; }
body.dark-mode .phi-icon.bluetooth               { background: #1a365d; }

/* Badge metode pembayaran di histori */
body.dark-mode .pm-tunai    { background: #1b3a1f; color: #81c784; border-color: #388e3c; }
body.dark-mode .pm-qris     { background: #1a365d; color: #90cdf4; border-color: #3182ce; }
body.dark-mode .pm-transfer { background: #3b2f1a; color: #f6ad55; border-color: #b7791f; }


/* ============================================================
   AUTH GATE — Layar login (auth.js)
   ============================================================ */
#auth-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(160deg, var(--primary-dark, #a83d00), var(--primary, #d04f00));
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 18px;
  padding: 32px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-logo {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--primary, #d04f00);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.auth-title { font-size: 22px; font-weight: 800; color: #1a1210; margin: 0 0 4px; }
.auth-sub   { font-size: 13px; color: #8a7a70; margin: 0 0 20px; }
.auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 14px;
  border: 1.5px solid #e5dcd4;
  border-radius: 10px;
  margin-bottom: 10px;
  outline: none;
  background: #faf7f4;
}
.auth-input:focus { border-color: var(--primary, #d04f00); background: #fff; }
.auth-error {
  display: none;
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  color: #e53e3e;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.auth-btn {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--primary, #d04f00);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.auth-btn:disabled { opacity: .6; cursor: wait; }
.auth-info { margin-top: 12px; font-size: 11px; color: #a09388; min-height: 14px; }

body.dark-mode .auth-card { background: #241a10; }
body.dark-mode .auth-title { color: #f3ede8; }
body.dark-mode .auth-sub, body.dark-mode .auth-info { color: #9c8b7d; }
body.dark-mode .auth-input { background: #1a120b; border-color: #3d2b18; color: #f3ede8; }