/* ==========================================================================
   E-Receipt — Design System (shared)
   VIRCANSASTUDIO · Notion clean-white × Japanese minimalist
   Satu sumber kebenaran untuk semua halaman: index.php & admin.php.
   Jangan menulis ulang style per-halaman — ubah di sini agar tetap konsisten.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* — Surface (pure white, Notion) — */
  --canvas:        #ffffff;
  --surface:       #ffffff;
  --surface-sunken:#fafafa;
  --surface-hover: #f7f7f8;

  /* — Ink / teks (cool neutral) — */
  --ink:           #1a1a1a;
  --ink-hover:     #2e2e30;
  --text-primary:  #18181b;
  --text-secondary:#52525b;
  --text-tertiary: #a1a1aa;

  /* — Garis hairline — */
  --line:          #ebebed;
  --line-strong:   #e0e0e3;

  /* — Radius & shadow (lembut, tertahan) — */
  --radius-sm:     6px;
  --radius:        8px;
  --radius-lg:     8px;
  --shadow-sm:     0 1px 2px rgba(24,24,27,.04), 0 1px 3px rgba(24,24,27,.03);
  --shadow-md:     0 4px 16px rgba(24,24,27,.06);

  --ease: cubic-bezier(.2,.6,.2,1);
}

*{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body{
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--canvas);
  color: var(--text-primary);
  letter-spacing: 0;
}

/* Scrollbar hairline minimalist */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:#e4e4e7; border:3px solid transparent; background-clip:padding-box; border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:#d4d4d8; background-clip:padding-box; }

/* ── Brand lockup: dipakai identik di tiap header ───────────────────────── */
.er-wordmark{ display:flex; align-items:baseline; gap:.5rem; line-height:1; }
.er-wordmark b{ font-weight:600; font-size:15px; letter-spacing:0; color:var(--text-primary); }
.er-wordmark .sep{ color:#d4d4d8; font-weight:400; }
.er-wordmark .brand{ font-size:10px; letter-spacing:0; text-transform:uppercase; color:var(--text-tertiary); font-weight:500; }

/* ── Label kecil uppercase (tracking minimalist) ────────────────────────── */
.er-label{ font-size:11px; letter-spacing:0; text-transform:uppercase; color:var(--text-tertiary); font-weight:600; }
.er-eyebrow{ font-size:10px; letter-spacing:0; text-transform:uppercase; color:var(--text-tertiary); font-weight:600; }

/* ── Kartu ──────────────────────────────────────────────────────────────── */
.er-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }

/* ── Tombol ─────────────────────────────────────────────────────────────── */
.er-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:13px; font-weight:500; border-radius:var(--radius-sm); padding:.62rem 1rem;
  cursor:pointer; transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  border:1px solid transparent; }
.er-btn-primary{ background:var(--ink); color:#fff; }
.er-btn-primary:hover{ background:var(--ink-hover); }
.er-btn-ghost{ background:var(--surface); color:var(--text-primary); border-color:var(--line-strong); }
.er-btn-ghost:hover{ background:var(--surface-hover); }

/* ── POS workspace shell ───────────────────────────────────────────────── */
.pos-topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.pos-topbar-inner{
  max-width:1440px; margin:0 auto; min-height:56px; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.pos-shell{
  max-width:1440px; margin:0 auto; padding:14px;
  display:grid; grid-template-columns:1fr; gap:14px;
}
.pos-rail,
.pos-card,
.pos-preview-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.pos-rail{
  padding:14px;
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
}
.pos-rail-note{
  display:none;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.pos-card-head{
  min-height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:var(--surface-sunken);
}
.pos-profile-switcher{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
}
.pos-mode-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;
}
.pos-icon-btn{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-tertiary);
  border-radius:var(--radius-sm);
  transition:background .15s var(--ease), color .15s var(--ease);
  cursor:pointer;
}
.pos-icon-btn:hover{ background:var(--surface-hover); color:var(--text-primary); }
.pos-field{
  min-height:72px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  background:var(--surface);
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.pos-field:focus-within{ border-color:#b7b7bd; background:#fff; }
.pos-field label{
  display:block; margin-bottom:5px;
  font-size:11px; line-height:1.2; font-weight:600;
  color:var(--text-secondary);
}
.pos-field input,
.pos-field select{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:14px;
  line-height:1.35;
  color:var(--text-primary);
}
.pos-field input::placeholder,
.pos-textarea::placeholder{ color:#a1a1aa; }
.pos-textarea{
  width:100%;
  min-height:108px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px;
  outline:0;
  resize:vertical;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.5;
  transition:border-color .15s var(--ease);
}
.pos-textarea:focus{ border-color:#b7b7bd; }
.pos-checkout{ min-width:0; }
.pos-preview-panel{
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.pos-preview-tabs{
  display:flex; gap:4px;
  padding:4px;
  background:var(--surface-sunken);
  border-bottom:1px solid var(--line);
}
.pos-preview-tab{
  flex:1;
  min-height:36px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  font-size:12px; font-weight:600;
  cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.pos-preview-bar{
  min-height:40px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 14px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.pos-preview-area{
  min-height:420px;
  overflow-y:auto;
  padding:16px;
}
.pos-action-bar{
  padding:12px;
  border-top:1px solid var(--line);
  background:#fff;
}
.pos-action-primary,
.pos-action-secondary{
  min-height:44px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:13px; font-weight:600;
  cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.pos-action-primary{ background:var(--ink); color:#fff; border:1px solid var(--ink); }
.pos-action-primary:hover{ background:var(--ink-hover); }
.pos-action-secondary{ background:#fff; color:var(--text-primary); border:1px solid var(--line-strong); }
.pos-action-secondary:hover{ background:var(--surface-hover); }

@media (min-width: 768px){
  .pos-shell{ padding:20px; gap:16px; }
  .pos-preview-area{ min-height:500px; }
}

@media (min-width: 1280px){
  .pos-shell{
    grid-template-columns:220px minmax(0,1fr) 430px;
    align-items:start;
  }
  .pos-rail,
  .pos-checkout{
    position:sticky;
    top:76px;
  }
  .pos-checkout{
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    padding-bottom:2px;
  }
  .pos-rail{ min-height:calc(100vh - 96px); }
  .pos-rail-note{ display:block; }
  .pos-profile-switcher,
  .pos-mode-grid{ grid-template-columns:1fr; }
  .pos-preview-area{
    min-height:0;
    height:calc(100vh - 414px);
  }
}

/* ── Number input: tanpa spinner ────────────────────────────────────────── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }

/* ── Focus ring lembut (aksesibilitas) ──────────────────────────────────── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid rgba(24,24,27,.14); outline-offset:2px; border-radius:4px;
}

/* ── Toast minimalist ───────────────────────────────────────────────────── */
.toast{ transition:opacity .3s var(--ease), transform .3s var(--ease); }