/* ===== POS (kasir) — layar penuh, menu aplikasi disembunyikan ===== */
body.pos-mode .appbar, body.pos-mode .sidebar, body.pos-mode .scrim, body.pos-mode .head{ display:none !important; }
body.pos-mode .main{ margin:0 !important; padding:0 !important; height:100vh; overflow:hidden; }
body.pos-mode .container{ padding:0; max-width:none; height:100vh; display:flex; flex-direction:column; }
body.pos-mode #messages{ position:fixed; top:66px; left:50%; transform:translateX(-50%); z-index:70; width:min(560px, calc(100vw - 32px)); }

.pos{ --pos-accent:#7a1f1f; --pos-accent-2:#9b2c2c; --pos-card:#f6f3ef; --pos-line:#ece7e2; --pos-dark:#231514;
  flex:1; min-height:0; display:flex; flex-direction:column; background:#fff; font-size:13px; }
.pos button{ font:inherit; }

/* bar atas */
.pos-top{ display:flex; align-items:center; gap:14px; height:60px; padding:0 16px 0 20px; border-bottom:1px solid var(--pos-line); flex:none; }
.pos-brand{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; color:var(--pos-accent); }
.pos-brand .brand-mark{ width:32px; height:32px; margin:0; font-size:15px; border-radius:9px; box-shadow:none; background:#fbe9d5; }
.pos-spacer{ flex:1; }
.pos-loc{ width:240px; }
.pos-loc .lk-btn{ height:38px; border-radius:999px; padding-left:30px; font-weight:600; }
.pos-loc .lk{ position:relative; }
.pos-loc .lk::before{ content:""; position:absolute; left:14px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--pos-accent); z-index:1; }
.pos-tabs{ display:flex; gap:2px; }
.pos-tabs button{ border:0; background:none; padding:8px 12px; border-radius:8px; font-weight:600; color:#4b3f3f; }
.pos-tabs button:hover{ background:#f8f1ea; }
.pos-tabs button.on{ color:var(--pos-accent); }
.pos-user{ display:flex; align-items:center; gap:10px; text-align:right; line-height:1.25; }
.pos-user b{ display:block; font-size:12px; }
.pos-user small{ color:var(--muted); font-size:11px; }
.pos-user .avatar{ background:#fbe9d5; color:var(--pos-accent); width:34px; height:34px; border-radius:10px; }
.pos-ic{ width:34px; height:34px; border:1px solid var(--pos-line); border-radius:9px; background:#fff; color:#4b3f3f; display:inline-flex; align-items:center; justify-content:center; }
.pos-ic:hover{ background:#f8f1ea; }

.pos-body{ flex:1; min-height:0; display:flex; }
.pos-pane{ flex:1; min-height:0; display:flex; }
.pos-pane[hidden]{ display:none !important; }

/* menu */
.pos-menu{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pos-menu-bar{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--pos-line); flex:none; }
.pos-chips{ display:flex; gap:2px; padding:3px; border-radius:12px; background:#f3efea; overflow-x:auto; scrollbar-width:none; }
.pos-chips button{ border:0; background:none; padding:6px 14px; border-radius:9px; font-weight:700; font-size:12px; color:#6b5d5d; white-space:nowrap; }
.pos-chips button.on{ background:#fff; color:var(--pos-accent); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.pos-search{ position:relative; margin-left:auto; width:min(340px, 40%); color:#9ca3af; }
.pos-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); }
.pos-search input{ width:100%; height:36px; padding:0 12px 0 34px; border:1px solid var(--pos-line); border-radius:999px; font:inherit; color:var(--text); }
.pos-search input:focus{ outline:none; border-color:#e0b98f; box-shadow:var(--focus); }
.pos-grid{ flex:1; min-height:0; overflow-y:auto; padding:14px 16px; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; align-content:start; }
.pos-item{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid transparent; border-radius:14px; background:var(--pos-card); text-align:left; cursor:pointer; min-height:88px; transition:transform .08s, border-color .15s; }
.pos-item:hover{ border-color:#e7d3bd; }
.pos-item:active{ transform:scale(.98); }
.pos-item .ph{ flex:none; width:58px; height:58px; border-radius:11px; background:#ebe5df; color:#8a7b7b; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; }
.pos-item .nm{ font-weight:700; font-size:13.5px; line-height:1.25; color:#1f1414; }
.pos-item .pr{ margin-top:4px; font-weight:600; color:#6b5d5d; }
.pos-item .in-cart{ margin-top:4px; display:inline-block; font-size:11px; font-weight:700; color:var(--pos-accent); background:#fbe9d5; padding:1px 8px; border-radius:999px; }
.pos-empty{ grid-column:1 / -1; padding:40px 12px; text-align:center; color:var(--muted); }

/* keranjang */
.pos-cart{ width:380px; flex:none; display:flex; flex-direction:column; border-left:1px solid var(--pos-line); min-height:0; }
.pos-cart-head{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 14px; border-bottom:1px solid var(--pos-line); }
.pos-cart-head .lk-btn, .pos-cart-head input{ height:38px; border-radius:999px; }
.pos-cart-head input{ width:100%; padding:0 14px; border:1px solid var(--border); font:inherit; }
.pos-bill{ display:flex; align-items:center; gap:8px; margin:10px 14px 0; padding:8px 10px; border-radius:10px; background:#fbf3ea; color:#6b4a2b; font-size:12px; }
.pos-bill b{ color:var(--pos-accent); }
.pos-bill button{ margin-left:auto; border:0; background:none; color:#2563eb; font-size:12px; }
.pos-lines{ flex:1; min-height:0; overflow-y:auto; padding:6px 14px; }
.pos-lines .none{ padding:60px 10px; text-align:center; color:var(--muted); line-height:1.6; }
.pos-line{ padding:10px 0; border-bottom:1px solid #f3efea; }
.pos-line .r1{ display:flex; align-items:flex-start; gap:8px; }
.pos-line .nm{ flex:1; font-weight:600; line-height:1.3; }
.pos-line .lt{ font-weight:700; white-space:nowrap; }
.pos-line .r2{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.pos-line .each{ color:var(--muted); font-size:12px; flex:1; }
.pos-qty{ display:inline-flex; align-items:center; border:1px solid var(--pos-line); border-radius:999px; overflow:hidden; }
.pos-qty button{ width:30px; height:28px; border:0; background:#fff; font-size:16px; color:#4b3f3f; }
.pos-qty button:hover{ background:#f8f1ea; }
.pos-qty span{ min-width:28px; text-align:center; font-weight:700; }
.pos-note-btn{ border:0; background:none; color:#2563eb; font-size:12px; padding:0; }
.pos-line input.note{ width:100%; margin-top:6px; height:30px; padding:0 10px; border:1px solid var(--pos-line); border-radius:8px; font:inherit; font-size:12px; }
.pos-sum{ flex:none; padding:12px 14px 14px; border-top:1px solid var(--pos-line); }
.pos-sum .row{ display:flex; justify-content:space-between; padding:3px 0; color:#4b3f3f; }
.pos-sum .row b{ color:#1f1414; }
.pos-sum .disc{ margin:4px 0; }
.pos-sum .disc .lk-btn{ height:36px; border-radius:999px; }
.pos-total{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding:14px 18px; border-radius:14px; background:var(--pos-dark); color:#fff; }
.pos-total b{ font-size:22px; }
.pos-hint{ margin:6px 2px 0; font-size:12px; color:var(--muted); min-height:16px; }
.pos-actions{ display:grid; grid-template-columns:1fr 1.6fr; gap:8px; margin-top:8px; }
.pos-btn{ height:46px; border-radius:999px; border:1px solid var(--pos-line); background:#f6f3ef; font-weight:700; font-size:14px; color:#4b3f3f; }
.pos-btn.pay{ background:var(--pos-accent); border-color:var(--pos-accent); color:#fff; }
.pos-btn.pay:hover:not(:disabled){ background:#8f2626; }
.pos-btn:disabled{ opacity:.45; }

/* pop-up pembayaran / selesai / detail */
.pos-pop{ background:#fff; border-radius:16px; width:min(460px, 100%); max-height:92vh; overflow:auto; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.pos-pop.wide{ width:min(640px, 100%); }
.pos-pop-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--pos-line); }
.pos-pop-head b{ font-size:15px; }
.pos-pop-body{ padding:16px 18px; }
.pos-due{ text-align:center; padding:8px 0 14px; }
.pos-due small{ color:var(--muted); }
.pos-due div{ font-size:28px; font-weight:800; color:var(--pos-dark); }
.pos-methods{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.pos-methods button{ height:44px; border:1px solid var(--pos-line); border-radius:12px; background:#fff; font-weight:600; }
.pos-methods button.on{ border-color:var(--pos-accent); background:#fbf3ea; color:var(--pos-accent); }
.pos-cash{ margin-top:14px; }
.pos-cash label{ font-size:12px; color:var(--muted); }
.pos-cash input{ width:100%; height:46px; margin-top:4px; padding:0 14px; border:1px solid var(--border); border-radius:12px; font:inherit; font-size:20px; font-weight:700; text-align:right; }
.pos-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pos-quick button{ border:1px solid var(--pos-line); background:#f6f3ef; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; }
.pos-change{ display:flex; justify-content:space-between; margin-top:12px; padding:10px 12px; border-radius:10px; background:#f6f3ef; font-weight:700; }
.pos-change.bad{ background:#fee2e2; color:#991b1b; }
.pos-pop-foot{ display:flex; gap:8px; padding:0 18px 18px; }
.pos-pop-foot .pos-btn{ flex:1; }
.pos-done{ text-align:center; padding:8px 0 4px; }
.pos-done .ok{ width:56px; height:56px; margin:0 auto 10px; border-radius:50%; background:#dcfce7; color:#166534; display:flex; align-items:center; justify-content:center; font-size:28px; }
.pos-done b{ display:block; font-size:16px; }
.pos-done .chg{ margin-top:10px; font-size:22px; font-weight:800; }
.pos-pop textarea{ width:100%; min-height:80px; padding:10px; border:1px solid var(--border); border-radius:10px; font:inherit; }

/* Sales Orders & Dashboard */
.pos-page{ flex:1; min-width:0; overflow-y:auto; padding:16px 20px 24px; background:#faf8f6; }
.pos-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.pos-seg{ display:flex; gap:2px; padding:3px; border-radius:10px; background:#f0ebe6; }
.pos-seg button{ border:0; background:none; padding:6px 12px; border-radius:8px; font-weight:600; font-size:12px; color:#6b5d5d; }
.pos-seg button.on{ background:#fff; color:var(--pos-accent); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.pos-filters .it-filter{ width:170px; }
.pos-filters .lk-btn{ height:34px; }
.pos-filters .pos-search{ margin-left:auto; }
.pos-card{ background:#fff; border:1px solid #ece7e2; border-radius:14px; }
.pos-card table.list td, .pos-card table.list th{ white-space:nowrap; }
.pos-foot{ display:flex; justify-content:space-between; padding:10px 14px; font-size:12px; color:var(--muted); border-top:1px solid #f1f2f4; }

.kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.kpi{ padding:14px 16px; }
.kpi .lbl{ font-size:12px; color:var(--muted); }
.kpi .val{ margin-top:4px; font-size:22px; font-weight:700; color:#1f1414; letter-spacing:-.01em; }
.kpi .sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.dash-grid{ display:grid; grid-template-columns:2fr 1fr; gap:12px; }
.dash-card{ padding:14px 16px; min-width:0; }
.dash-card h3{ margin:0 0 2px; font-size:13px; font-weight:600; }
.dash-card .sub{ font-size:11px; color:var(--muted); margin-bottom:10px; }
.chart{ position:relative; }
.chart svg{ display:block; width:100%; height:220px; overflow:visible; }
.chart .tip{ position:absolute; pointer-events:none; background:#231514; color:#fff; font-size:11px; padding:5px 8px; border-radius:6px; white-space:nowrap; transform:translate(-50%, -110%); }
.hbars{ display:flex; flex-direction:column; gap:8px; }
.hbar .t{ display:flex; justify-content:space-between; gap:8px; font-size:12px; }
.hbar .t span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar .t b{ white-space:nowrap; font-weight:600; }
.hbar .track{ height:8px; margin-top:4px; border-radius:4px; background:#f3efea; }
.hbar .fill{ height:100%; border-radius:4px; background:#9b2c2c; min-width:2px; }
.dash-empty{ padding:30px 10px; text-align:center; color:var(--muted); }

/* struk (print 80mm) */
#pos-receipt{ display:none; }
@media print{
  body.printing-receipt > *:not(#pos-receipt){ display:none !important; }
  body.printing-receipt #pos-receipt{ display:block; width:72mm; margin:0 auto; font:11px/1.4 ui-monospace, Menlo, monospace; color:#000; }
  body.printing-receipt #pos-receipt table{ width:100%; border-collapse:collapse; }
  body.printing-receipt #pos-receipt td{ padding:1px 0; vertical-align:top; }
  body.printing-receipt #pos-receipt .r{ text-align:right; }
  body.printing-receipt #pos-receipt .c{ text-align:center; }
  body.printing-receipt #pos-receipt hr{ border:0; border-top:1px dashed #000; margin:6px 0; }
}

/* layar sempit */
@media (max-width:1100px){
  .pos-cart{ width:330px; }
  .pos-user-txt{ display:none; }
  .dash-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .pos-top{ flex-wrap:wrap; height:auto; padding:8px 10px; gap:8px; }
  .pos-loc{ order:5; width:100%; }
  .pos-tabs{ order:4; width:100%; }
  .pos-pane#pos-cashier{ flex-direction:column; overflow-y:auto; }
  .pos-cart{ width:auto; border-left:0; border-top:1px solid var(--pos-line); }
  .pos-grid{ grid-template-columns:1fr 1fr; }
  .pos-search{ width:100%; margin:0; }
  .pos-menu-bar{ flex-wrap:wrap; }
  .kpis{ grid-template-columns:1fr 1fr; }
}

/* ===== Akun di header (login PIN) ===== */
.who{ border:0; color:#fff; font:inherit; }
.who-txt{ display:flex; flex-direction:column; text-align:left; line-height:1.15; }
.who-txt b{ font-size:12.5px; font-weight:600; }
.who-txt small{ font-size:10.5px; opacity:.7; }
.who svg{ margin-right:6px; opacity:.8; }
.appbar .menu{ top:calc(100% + 8px); }
@media (max-width:760px){ .who-txt small{ display:none; } }

/* ===== Setup POS (generik) ===== */
.setup-note{ margin:12px 14px 0; padding:8px 12px; border-radius:8px; background:#fbf3ea; color:#6b4a2b; font-size:12px; }
.setup-form .setup-note{ margin:-4px 0 18px; }
.setup-form{ max-width:860px; }
.setup-form .field + .field{ margin-top:14px; }
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; padding-top:6px; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch .sw{ position:relative; width:36px; height:20px; border-radius:999px; background:#d9d3cd; transition:background .15s; flex:none; }
.switch .sw::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.switch input:checked + .sw{ background:#7a1f1f; }
.switch input:checked + .sw::after{ transform:translateX(16px); }
.switch input:focus-visible + .sw{ box-shadow:var(--focus); }
.switch span:last-child{ font-size:12.5px; color:#4b3f3f; }
.items-pick{ border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.ip-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px; border-bottom:1px solid #f1eeea; background:#fbfaf8; }
.ip-tools input{ flex:1 1 180px; height:32px; padding:0 10px; border:1px solid var(--border); border-radius:8px; font:inherit; }
.ip-list{ max-height:260px; overflow-y:auto; }
.ip-row{ display:flex; align-items:center; gap:10px; padding:7px 12px; border-bottom:1px solid #f6f3ef; cursor:pointer; }
.ip-row:hover{ background:#fbf6f0; }
.ip-row span:nth-child(2){ flex:1; }

/* ===== POS: Optional / Expresso ===== */
.pos-item .mod-tag{ display:inline-block; margin-top:4px; margin-right:4px; font-size:11px; color:#7a3e12; border:1px solid #ecd6bd; background:#fff; padding:0 7px; border-radius:999px; }
.pos-line .mods{ display:block; font-weight:500; font-size:11.5px; color:#7a3e12; margin-top:2px; }
.pm-group + .pm-group{ margin-top:16px; }
.pm-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.pm-opts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
.pm-opts button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:52px; border:1px solid var(--pos-line, #ece7e2); border-radius:12px; background:#fff; font-weight:700; font-size:14px; }
.pm-opts button small{ font-weight:500; font-size:11px; color:var(--muted); }
.pm-opts button.on{ border-color:#7a1f1f; background:#fbf3ea; color:#7a1f1f; }
.pos-print-opts{ display:flex; flex-direction:column; gap:8px; padding:0 18px 10px; }
.pos-print-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pos-print-opts .pos-btn{ width:100%; }

/* struk & tiket bartender: satu print, tiap dokumen di halaman sendiri */
@media print{
  body.printing-receipt #pos-receipt .pb{ break-after:page; page-break-after:always; height:0; }
  body.printing-receipt #pos-receipt .big{ font-size:15px; font-weight:700; margin-top:4px; }
  body.printing-receipt #pos-receipt td.q{ width:9mm; font-weight:700; font-size:13px; }
}
.field .ip-row input[type="checkbox"], .ip-row input[type="checkbox"]{ width:16px; height:16px; min-height:0; padding:0; margin:0; flex:none; accent-color:#7a1f1f; }
.ip-row{ font-size:12.5px; }
.ip-row .muted{ white-space:nowrap; }

/* tombol kasir di bar atas POS (Switch cashier / Sign out) */
button.pos-user{ border:0; background:none; padding:4px 6px 4px 10px; border-radius:12px; cursor:pointer; color:inherit; font:inherit; }
button.pos-user:hover{ background:#f8f1ea; }
.pos-user-txt{ display:flex; flex-direction:column; text-align:right; }
.pos-user svg{ color:#8a7b7b; }
.pos-top .menu{ top:calc(100% + 6px); }
@media (max-width:1100px){ .pos-user-txt{ display:none; } }

/* ===== Halaman depan: Login ===== */
.login-page{ flex:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(1200px 600px at 10% 0%, #f6e5d1 0%, transparent 60%), linear-gradient(160deg, #3d0606 0%, #5a1010 45%, #2b0b0b 100%); }
.lp-card{ display:grid; grid-template-columns:1fr 1.05fr; width:min(880px, 100%); min-height:520px; border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.lp-brand{ display:flex; flex-direction:column; justify-content:center; gap:10px; padding:40px; color:#3b1f12;
  background:linear-gradient(180deg, #f6e5d1 0%, #fbf4ec 70%, #fff 100%); }
.lp-brand .brand-mark{ width:64px; height:64px; margin:0 0 6px; font-size:28px; border-radius:16px; }
.lp-brand h2{ margin:0; font-size:26px; letter-spacing:-.01em; }
.lp-brand p{ margin:0; color:#7a5a43; }
.lp-form{ display:flex; flex-direction:column; padding:40px 44px; }
.lp-form h1{ margin:0; font-size:22px; }
.lp-form > .muted{ margin:4px 0 18px; font-size:13px; }
.lp-lbl{ font-size:12px; font-weight:600; color:#6b5d5d; margin:10px 0 6px; }
.lp-form .lk-btn{ height:44px; border-radius:12px; font-size:15px; }
#lp-pin{ height:48px; padding:0 14px; border:1px solid var(--border); border-radius:12px; font:inherit; font-size:22px; letter-spacing:.35em; text-align:center; }
#lp-pin:focus{ outline:none; border-color:#e0b98f; box-shadow:var(--focus); }
.lp-pad{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:12px; }
.lp-pad button{ height:48px; border:1px solid #ece7e2; border-radius:12px; background:#f8f5f1; font-size:18px; font-weight:700; color:#3b2a2a; }
.lp-pad button:hover{ background:#f1e8de; }
.lp-pad button:active{ transform:scale(.97); }
.lp-pad button[data-k]{ font-size:13px; font-weight:600; color:#7a5a43; }
.lp-form .msg{ margin:12px 0 0; }
.lp-go{ margin-top:14px; height:50px; border:0; border-radius:12px; background:#7a1f1f; color:#fff; font-size:16px; font-weight:700; }
.lp-go:hover{ background:#8f2626; }
.lp-go:disabled{ opacity:.6; }
@media (max-width:760px){
  .lp-card{ grid-template-columns:1fr; min-height:0; }
  .lp-brand{ padding:24px; flex-direction:row; align-items:center; }
  .lp-brand .brand-mark{ margin:0; width:48px; height:48px; font-size:20px; }
  .lp-brand p{ display:none; }
  .lp-form{ padding:24px; }
}

/* ===== Home ===== */
.home-hello h2{ margin:4px 0 2px; font-size:20px; font-weight:600; }
.home-hello{ margin-bottom:16px; }
.home-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.home-tile{ display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid #ebe8e5; border-radius:14px; background:#fff; color:inherit; text-decoration:none; transition:border-color .15s, transform .08s; }
.home-tile:hover{ border-color:#e7d3bd; }
.home-tile:active{ transform:scale(.99); }
.home-tile .hi{ width:38px; height:38px; border-radius:10px; background:#fbe9d5; color:#7a3e12; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.home-tile b{ font-size:14px; }
.home-tile .muted{ font-size:12px; }
.home-tile.featured{ grid-column:span 2; background:linear-gradient(135deg, #7a1f1f, #4a0f0f); color:#fff; border-color:transparent; }
.home-tile.featured .muted{ color:#f3dcc0; }
.home-tile.featured .hi{ background:rgba(255,255,255,.14); color:#fff; }
@media (max-width:760px){ .home-tile.featured{ grid-column:auto; } }
.lp-code{ height:48px; padding:0 14px; border:1px solid var(--border); border-radius:12px; font:inherit; font-size:22px; font-weight:700; letter-spacing:.5em; text-align:center; }
.lp-code:focus{ outline:none; border-color:#e0b98f; box-shadow:var(--focus); }
.lp-note{ font-size:11px; color:var(--muted); margin-top:4px; }

.lp-who{ margin-top:6px; padding:6px 10px; border-radius:8px; font-size:13px; font-weight:600; background:#f6f3ef; color:#6b5d5d; }
.lp-who.ok{ background:#dcfce7; color:#166534; }
.lp-who.bad{ background:#fee2e2; color:#991b1b; }

/* ===== Tombol toolbar: Sync & Add New sejajar dan seringan tombol 🔍 / ⋯ ===== */
.list-tools .btn-sync, .list-tools .btn-add{ height:32px; padding:0 12px; gap:6px; border-radius:8px; font-size:12.5px; font-weight:500; letter-spacing:0; line-height:1; box-shadow:none; transition:background .15s, border-color .15s; }
.list-tools .btn-sync svg, .list-tools .btn-add svg{ width:14px; height:14px; flex:none; }
.list-tools .btn-sync{ background:#fff; color:#7a1f1f; border:1px solid #e2dfdc; }
.list-tools .btn-sync:hover{ background:#fbf3ea; border-color:#e7d3bd; }
.list-tools .btn-sync.busy{ color:#9b2c2c; background:#fbf3ea; }
.list-tools .btn-add{ background:#f6e7d4; color:#5a3311; border:1px solid #efd9bd; }
.list-tools .btn-add:hover{ background:#f1dcc2; }
@media (max-width:760px){ .list-tools .btn-sync, .list-tools .btn-add{ height:36px; } }

/* ===== POS: tombol & pilihan selalu terlihat jelas (bukan pudar seperti kosong) ===== */
.pos-btn:disabled{ opacity:1; cursor:not-allowed; background:#f1eeea; border-color:#e4ded8; color:#9a8f8a; }
.pos-btn.pay:disabled{ background:#c9a5a5; border-color:#c9a5a5; color:#fff; }
.pos .lk-btn{ border-color:#ddd6cf; }
.pos .lk-btn.ph .lk-val{ color:#5b4f4f; }
.pos .lk-btn::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b5d5d' stroke-width='1.6'/%3E%3C/svg%3E"); }
.pos-hint{ color:#9a5b12; font-weight:500; }
.pos-qty{ border-color:#ddd6cf; }
.pos-note-btn{ font-weight:500; }

/* ===== Roles: daftar akses menu ===== */
.perm-box{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.perm-group{ border:1px solid #ece7e2; border-radius:10px; padding:10px 12px; background:#fff; }
.perm-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.perm-head b{ flex:1; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#3b2a2a; }
.perm-head .link-btn{ font-size:11.5px; text-decoration:none; }
.perm-row{ display:flex; padding:4px 0 !important; }
.perm-full{ padding:10px 12px; border-radius:10px; background:#fbf3ea; color:#6b4a2b; font-weight:500; }
.perm-head .link-btn{ border:0; background:none; padding:2px 4px; color:#9b2c2c; font-size:11.5px; font-weight:600; cursor:pointer; }
.perm-head .link-btn:hover{ text-decoration:underline; }

/* ===== Shift di header kasir ===== */
@media (min-width:761px){ .pos-loc.pos-shift{ width:200px; } }