/* ==========================================================================
   Sunkist Laundry POS — Design tokens & utilities
   Diturunkan dari DESIGN.md (palet, tipografi, radius, spacing) dan dari
   markup 10 layar mockup. Ditulis manual agar aplikasi kasir tetap jalan
   tanpa CDN Tailwind (kiosk/POS sering offline).
   Skala spacing: 1 unit = 4px (sama seperti Tailwind).
   ========================================================================== */

:root {
  /* Surface */
  --surface: #f7f9fb;
  --surface-dim: #d8dadc;
  --surface-bright: #f7f9fb;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f4f6;
  --surface-container: #eceef0;
  --surface-container-high: #e6e8ea;
  --surface-container-highest: #e0e3e5;
  --on-surface: #191c1e;
  --on-surface-variant: #3f4850;
  --inverse-surface: #2d3133;
  --inverse-on-surface: #eff1f3;
  --outline: #707881;
  --outline-variant: #bfc7d2;
  --surface-tint: #006398;
  --surface-variant: #e0e3e5;

  /* Primary */
  --primary: #006194;
  --on-primary: #ffffff;
  --primary-container: #007bb9;
  --on-primary-container: #fdfcff;
  --primary-fixed: #cce5ff;
  --primary-fixed-dim: #93ccff;
  --on-primary-fixed: #001d31;
  --on-primary-fixed-variant: #004b73;

  /* Secondary */
  --secondary: #006c49;
  --on-secondary: #ffffff;
  --secondary-container: #6cf8bb;
  --on-secondary-container: #00714d;
  --secondary-fixed: #6ffbbe;
  --secondary-fixed-dim: #4edea3;
  --on-secondary-fixed: #002113;
  --on-secondary-fixed-variant: #005236;

  /* Tertiary */
  --tertiary: #894d00;
  --on-tertiary: #ffffff;
  --tertiary-container: #ac6200;
  --on-tertiary-container: #fffbff;
  --tertiary-fixed: #ffdcc0;
  --tertiary-fixed-dim: #ffb875;
  --on-tertiary-fixed: #2d1600;
  --on-tertiary-fixed-variant: #6b3b00;

  /* Error */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* Layout */
  --margin-screen: 16px;
  --gutter-sm: 8px;
  --gutter-md: 16px;
  --header-h: 64px;
  --nav-h: 80px;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Elevation (DESIGN.md) */
  --shadow-sm: 0 1px 3px rgba(30, 41, 59, 0.06);
  --shadow-md: 0 4px 12px rgba(30, 41, 59, 0.06);
  --shadow-lg: 0 8px 24px rgba(30, 41, 59, 0.08);
  --shadow-xl: 0 12px 32px rgba(30, 41, 59, 0.12);

  --font-headline: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* ---------------------------------------------------------------- Reset -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headline);
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Sembunyikan spinner input number — keypad POS dipakai untuk entri. */
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;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ------------------------------------------------------------- Layout --- */

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(247, 249, 251, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
  padding-top: env(safe-area-inset-top, 0px);
}

.app-header__inner,
.app-nav__inner {
  max-width: 680px;
  margin: 0 auto;
}

.app-header__inner {
  height: var(--header-h);
  padding: 0 var(--margin-screen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(247, 249, 251, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.04);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--gutter-md);
}

.app-main {
  max-width: 680px;
  margin: 0 auto;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px)) var(--margin-screen)
    calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
  min-height: 100vh;
}

.app-main--wide {
  max-width: 960px;
}

/* Konten yang punya CTA sticky di atas nav */
.app-main--cta {
  padding-bottom: calc(var(--nav-h) + 96px + env(safe-area-inset-bottom, 0px));
}

/* CTA sticky yang bisa melebar 2 baris (detail pesanan: baris "Notifikasi
   Selesai" muncul saat status SELESAI). Padding bawah ditambah agar tombol
   terakhir di konten — mis. "Cetak Ulang Nota" — tidak tertutup CTA. */
.app-main--cta-tall {
  padding-bottom: calc(var(--nav-h) + 168px + env(safe-area-inset-bottom, 0px));
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

.sticky-cta {
  position: fixed;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(247, 249, 251, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  padding: 16px var(--margin-screen);
}

.sticky-cta__inner {
  max-width: 680px;
  margin: 0 auto;
}

.fab {
  position: fixed;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
  right: 20px;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------ Gaya dasar tipografi -- */

.h-xl {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.h-lg {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.h-md {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.b-lg {
  font-size: 16px;
  line-height: 24px;
}
.b-md {
  font-size: 14px;
  line-height: 20px;
}
.b-sm {
  font-size: 12px;
  line-height: 16px;
}
.l-lg {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.l-md {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.l-sm {
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
}

.font-headline {
  font-family: var(--font-headline);
}

/* ------------------------------------------------- Warna (bg / text) ---- */

.bg-surface {
  background: var(--surface);
}
.bg-surface-dim {
  background: var(--surface-dim);
}
.bg-surface-bright {
  background: var(--surface-bright);
}
.bg-surface-container-lowest {
  background: var(--surface-container-lowest);
}
.bg-surface-container-low {
  background: var(--surface-container-low);
}
.bg-surface-container {
  background: var(--surface-container);
}
.bg-surface-container-high {
  background: var(--surface-container-high);
}
.bg-surface-container-highest {
  background: var(--surface-container-highest);
}
.bg-inverse-surface {
  background: var(--inverse-surface);
}
.bg-primary {
  background: var(--primary);
}
.bg-primary-container {
  background: var(--primary-container);
}
.bg-primary-fixed {
  background: var(--primary-fixed);
}
.bg-primary-fixed-dim {
  background: var(--primary-fixed-dim);
}
.bg-secondary {
  background: var(--secondary);
}
.bg-secondary-container {
  background: var(--secondary-container);
}
.bg-secondary-fixed {
  background: var(--secondary-fixed);
}
.bg-secondary-fixed-dim {
  background: var(--secondary-fixed-dim);
}
.bg-tertiary {
  background: var(--tertiary);
}
.bg-tertiary-container {
  background: var(--tertiary-container);
}
.bg-tertiary-fixed {
  background: var(--tertiary-fixed);
}
.bg-tertiary-fixed-dim {
  background: var(--tertiary-fixed-dim);
}
.bg-error {
  background: var(--error);
}
.bg-error-container {
  background: var(--error-container);
}
.bg-surface-tint {
  background: var(--surface-tint);
}
.bg-white {
  background: #fff;
}
.bg-black\/60 {
  background: rgba(0, 0, 0, 0.6);
}
.bg-on-surface\/80 {
  background: rgba(25, 28, 30, 0.8);
}
.bg-primary\/10 {
  background: rgba(0, 97, 148, 0.1);
}
.bg-primary\/20 {
  background: rgba(0, 97, 148, 0.2);
}
.bg-on-primary {
  background: var(--on-primary);
}
.bg-on-primary\/15 {
  background: rgba(255, 255, 255, 0.15);
}
.bg-on-primary\/20 {
  background: rgba(255, 255, 255, 0.2);
}
.bg-primary-fixed\/20 {
  background: rgba(204, 229, 255, 0.4);
}
.bg-primary-fixed\/30 {
  background: rgba(204, 229, 255, 0.3);
}
.bg-primary-fixed\/40 {
  background: rgba(204, 229, 255, 0.4);
}
.bg-primary-container\/10 {
  background: rgba(0, 123, 185, 0.1);
}
.bg-primary-container\/30 {
  background: rgba(0, 123, 185, 0.3);
}
.bg-white\/10 {
  background: rgba(255, 255, 255, 0.1);
}
.bg-surface\/10 {
  background: rgba(247, 249, 251, 0.1);
}
.bg-surface\/20 {
  background: rgba(247, 249, 251, 0.2);
}

.gradient-primary {
  background-image: linear-gradient(135deg, var(--primary), var(--primary-container));
}
.gradient-tier {
  background-image: linear-gradient(90deg, var(--primary), var(--secondary));
}

.text-on-surface {
  color: var(--on-surface);
}
.text-on-surface-variant {
  color: var(--on-surface-variant);
}
.text-inverse-on-surface {
  color: var(--inverse-on-surface);
}
.text-outline {
  color: var(--outline);
}
.text-outline-variant {
  color: var(--outline-variant);
}
.text-primary {
  color: var(--primary);
}
.text-on-primary {
  color: var(--on-primary);
}
.text-on-primary-container {
  color: var(--on-primary-container);
}
.text-primary-fixed {
  color: var(--primary-fixed);
}
.text-on-primary-fixed {
  color: var(--on-primary-fixed);
}
.text-on-primary-fixed-variant {
  color: var(--on-primary-fixed-variant);
}
.text-secondary {
  color: var(--secondary);
}
.text-on-secondary {
  color: var(--on-secondary);
}
.text-on-secondary-container {
  color: var(--on-secondary-container);
}
.text-on-secondary-fixed {
  color: var(--on-secondary-fixed);
}
.text-tertiary {
  color: var(--tertiary);
}
.text-on-tertiary {
  color: var(--on-tertiary);
}
.text-on-tertiary-container {
  color: var(--on-tertiary-container);
}
.text-on-tertiary-fixed {
  color: var(--on-tertiary-fixed);
}
.text-error {
  color: var(--error);
}
.text-on-error {
  color: var(--on-error);
}
.text-on-error-container {
  color: var(--on-error-container);
}
.text-white {
  color: #fff;
}

.border-outline-variant {
  border-color: var(--outline-variant);
}
.border-primary {
  border-color: var(--primary);
}
.border-error {
  border-color: var(--error);
}
.border-surface-container-highest {
  border-color: var(--surface-container-highest);
}
.border-primary\/20 {
  border-color: rgba(0, 97, 148, 0.2);
}
.border-white\/15 {
  border-color: rgba(255, 255, 255, 0.15);
}
.border-primary\/30 {
  border-color: rgba(0, 97, 148, 0.3);
}

/* -------------------------------------------------------- Flex & Grid --- */

.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.block {
  display: block;
}
.hidden {
  display: none !important;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-end {
  justify-content: flex-end;
}
.self-center {
  align-self: center;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}

/* ----------------------------------------------------------- Spacing ---- */

.gap-0 { gap: 0; }
.gap-0\.5 { gap: 2px; }
.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2 { gap: 8px; }
.gap-2\.5 { gap: 10px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-spacing-xs { gap: 4px; }
.gap-spacing-sm { gap: 8px; }
.gap-spacing-md { gap: 16px; }
.gap-spacing-lg { gap: 24px; }

.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-1\.5 { padding: 6px; }
.p-2 { padding: 8px; }
.p-2\.5 { padding: 10px; }
.p-3 { padding: 12px; }
.p-3\.5 { padding: 14px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }

.px-1\.5 { padding-left: 6px; padding-right: 6px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-2\.5 { padding-left: 10px; padding-right: 10px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-margin-screen { padding-left: 16px; padding-right: 16px; }
.px-gutter-md { padding-left: 16px; padding-right: 16px; }

.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }

.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-4 { padding-top: 16px; }
.pt-6 { padding-top: 24px; }
.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-4 { padding-bottom: 16px; }
.pb-6 { padding-bottom: 24px; }
.pb-10 { padding-bottom: 40px; }
.pb-12 { padding-bottom: 48px; }
.pb-16 { padding-bottom: 64px; }
.pb-24 { padding-bottom: 96px; }
.pl-4 { padding-left: 16px; }
.pl-10 { padding-left: 40px; }
.pl-12 { padding-left: 48px; }
.pr-4 { padding-right: 16px; }

.m-0 { margin: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-24 { margin-bottom: 96px; }
.mt-0\.5 { margin-top: 2px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mr-2 { margin-right: 8px; }
.ml-2 { margin-left: 8px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------- Sizing --------- */

.w-full { width: 100%; }
.h-full { height: 100%; }
.w-2 { width: 8px; }
.w-3 { width: 12px; }
.w-4 { width: 16px; }
.w-8 { width: 32px; }
.w-9 { width: 36px; }
.w-10 { width: 40px; }
.w-11 { width: 44px; }
.w-12 { width: 48px; }
.w-14 { width: 56px; }
.w-16 { width: 64px; }
.w-20 { width: 80px; }
.w-32 { width: 128px; }
.h-2 { height: 8px; }
.h-2\.5 { height: 10px; }
.h-3 { height: 12px; }
.h-4 { height: 16px; }
.h-8 { height: 32px; }
.h-9 { height: 36px; }
.h-10 { height: 40px; }
.h-11 { height: 44px; }
.h-12 { height: 48px; }
.h-14 { height: 56px; }
.h-16 { height: 64px; }
.h-20 { height: 80px; }
.h-24 { height: 96px; }
.h-28 { height: 112px; }
.h-32 { height: 128px; }
.h-48 { height: 192px; }
.h-56 { height: 224px; }
.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 384px; }
.max-w-lg { max-width: 512px; }
.min-w-\[200px\] { min-width: 200px; }
.max-w-\[32px\] { max-width: 32px; }
.max-w-\[200px\] { max-width: 200px; }

/* ------------------------------------------------------ Radius --------- */

.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-md { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius); }
.rounded-xl { border-radius: var(--radius-md); }
.rounded-2xl { border-radius: var(--radius-lg); }
.rounded-3xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-t-lg { border-radius: var(--radius) var(--radius) 0 0; }
.rounded-t-2xl { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* ----------------------------------------------------- Elevation ------- */

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-inner { box-shadow: inset 0 2px 4px rgba(30, 41, 59, 0.06); }
.shadow-none { box-shadow: none; }

/* --------------------------------------------------- Borders ----------- */

.border { border: 1px solid var(--outline-variant); }
.border-2 { border: 2px solid transparent; }
.border-t { border-top: 1px solid var(--outline-variant); }
.border-b { border-bottom: 1px solid var(--outline-variant); }
.border-dashed { border-style: dashed; }
.border-0 { border: none; }

/* --------------------------------------------------- Position ---------- */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.top-0 { top: 0; }
.top-2 { top: 8px; }
.top-4 { top: 16px; }
.right-0 { right: 0; }
.right-2 { right: 8px; }
.right-4 { right: 16px; }
.right-5 { right: 20px; }
.bottom-0 { bottom: 0; }
.bottom-20 { bottom: 80px; }
.bottom-24 { bottom: 96px; }
.left-0 { left: 0; }
.left-3 { left: 12px; }
.left-3\.5 { left: 14px; }
.left-1\/2 { left: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.-bottom-6 { bottom: -24px; }
.-right-6 { right: -24px; }
.-mx-margin-screen { margin-left: -16px; margin-right: -16px; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.pointer-events-none { pointer-events: none; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.cursor-pointer { cursor: pointer; }
.blur-2xl { filter: blur(40px); }
.blur-xl { filter: blur(24px); }
.opacity-0 { opacity: 0; }
.opacity-80 { opacity: 0.8; }

/* --------------------------------------------------- Teks & misc ------- */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.02em; }
.tracking-wider { letter-spacing: 0.06em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.whitespace-nowrap { white-space: nowrap; }
.resize-none { resize: none; }
.outline-none { outline: none; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-\[10px\] { font-size: 10px; }
.text-\[14px\] { font-size: 14px; }
.text-\[16px\] { font-size: 16px; }
.text-\[18px\] { font-size: 18px; }
.text-\[20px\] { font-size: 20px; }
.text-\[22px\] { font-size: 22px; }
.text-\[24px\] { font-size: 24px; }
.text-\[28px\] { font-size: 28px; }
.text-\[40px\] { font-size: 40px; }
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }
.transition-transform { transition: transform 0.2s ease; }
.transform { transform: translateZ(0); }
.scale-100 { transform: scale(1); }
.scale-110 { transform: scale(1.1); }
.active\:scale-95:active { transform: scale(0.95); }
.active\:scale-\[0\.99\]:active { transform: scale(0.99); }
.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:opacity-95:hover { opacity: 0.95; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:scale-105:hover { transform: scale(1.05); }
.no-scrollbar::-webkit-scrollbar { display: none; }

.animate-pulse {
  animation: sunkist-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes sunkist-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.animate-spin {
  animation: sunkist-spin 0.9s linear infinite;
}
@keyframes sunkist-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Komponen
   ========================================================================== */

/* Ikon Material Symbols */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.icon-fill {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Kartu */
.card {
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.card--raised {
  background: var(--surface-container-lowest);
  box-shadow: var(--shadow-md);
}

.section-title {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Tombol — target sentuh min. 48px (DESIGN.md) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.2s ease, transform 0.1s ease, background-color 0.2s ease;
  white-space: nowrap;
}
.btn:active {
  transform: scale(0.98);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}
.btn-secondary {
  background: var(--secondary);
  color: var(--on-secondary);
  box-shadow: var(--shadow-md);
}
.btn-danger {
  background: var(--error);
  color: var(--on-error);
  box-shadow: var(--shadow-md);
}
.btn-neutral {
  background: var(--surface-container-high);
  color: var(--on-surface);
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
}
.btn-sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: var(--radius);
}
.btn-block {
  width: 100%;
}
.btn-lg {
  min-height: 56px;
  font-size: 16px;
  padding: 0 24px;
  border-radius: var(--radius-md);
}
.btn-icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--radius);
  color: var(--on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tombol kategori (kas keluar / POS kategori) */
.btn-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  min-height: 56px;
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}
.btn-cat--active {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}

/* Chip / filter pill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-container);
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.chip--active {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}
.chip--pill {
  border-radius: var(--radius-full);
  padding: 6px 12px;
}
.chip--pill.chip--active {
  background: var(--on-surface);
  color: var(--surface);
}

/* Segmented control besar: dua pilihan sejajar selebar layar (pilih mode
   kiloan/satuan, atau pilihan bayar). Tombolnya besar dan pilihan aktif
   ditandai warna primer — ditambah ikon centang pada pilihan bayar. */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.chip--lg {
  justify-content: center;
  padding: 14px 16px;
  font-size: 15px;
  border-radius: var(--radius);
}
.pay-toggle .chip--active::before {
  content: "check_circle";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
}

/* Chip paket estimasi yang bisa dihapus.
   Gaya chip dipindah ke pembungkus <span>, bukan tombolnya, karena chip-nya
   berisi DUA tombol (pilih + hapus) dan tombol tidak boleh bersarang. Padding
   kanan dikurangi karena tombol × sudah menyumbang ruangnya sendiri. */
.preset-chip {
  padding-right: 4px;
}
.preset-chip__pick {
  padding: 0;
  color: inherit;
  font: inherit;
  background: none;
}
/* Tombol × sengaja tidak mewarisi warna chip: pada chip yang sedang aktif
   (latar primary) warna warisan membuatnya nyaris tak terlihat. */
.preset-chip__del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  color: var(--on-surface-variant);
  opacity: 0.65;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.preset-chip__del .material-symbols-outlined {
  font-size: 14px;
}
.preset-chip__del:hover {
  opacity: 1;
  background: rgb(0 0 0 / 0.12);
  color: var(--error);
}
.preset-chip__del:focus-visible {
  opacity: 1;
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Badge status */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.badge--antre {
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
}
.badge--proses {
  background: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed);
}
.badge--selesai {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.badge--diambil {
  background: var(--surface-container-highest);
  color: var(--on-surface-variant);
}
.badge--unpaid {
  background: var(--error-container);
  color: var(--on-error-container);
}
.badge--paid {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
/* Nota dibatalkan (void) */
.badge--batal {
  background: var(--error-container);
  color: var(--on-error-container);
}

/* Kartu cabang di dashboard super-admin: <details> yang bisa dibuka untuk
   melihat kontak, alamat, dan daftar karyawan cabang tersebut. */
.cabang {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  overflow: hidden;
}
.cabang summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.cabang summary::-webkit-details-marker {
  display: none;
}
.cabang summary::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  color: var(--on-surface-variant);
  transition: transform 0.2s ease;
}
.cabang[open] summary::after {
  transform: rotate(180deg);
}
.cabang > .flex {
  padding: 0 14px 12px;
  gap: 8px;
}

/* Input */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--surface-container-lowest);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--on-surface);
  font-size: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--outline-variant);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 97, 148, 0.15);
}
.textarea {
  min-height: 72px;
  resize: none;
}
.input--search {
  padding-left: 40px;
}
/* Kolom password dengan tombol mata di kanan: beri ruang agar teks tidak
   tertutup tombol (kanan 8px + lebar tombol 36px + jarak aman). */
.input--password {
  padding-right: 48px;
}
/* Input dengan awalan tetap (mis. "Rp") */
.input--prefix {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}
.input__prefix {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-surface-variant);
  flex-shrink: 0;
}
/* Akhiran tetap di kanan kolom (mis. "%" pada input persen) */
.input__suffix {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-surface-variant);
  flex-shrink: 0;
}
.input__control {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--on-surface);
  font-size: 16px;
  font-weight: 600;
}
.input__control:focus {
  outline: none;
}
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-wrap > .material-symbols-outlined {
  position: absolute;
  left: 12px;
  color: var(--on-surface-variant);
  font-size: 20px;
  pointer-events: none;
}

/* Baris list */
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

#satuan-list .list-row > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

#satuan-list .list-row > :last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

#satuan-list .list-row h4 {
  display: -webkit-box;
  height: 40px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#satuan-list .list-row .product-name--compact {
  font-size: 15px;
  line-height: 19px;
}

#satuan-list .list-row .product-name--tiny {
  font-size: 13px;
  line-height: 18px;
}

#satuan-list .list-row {
  min-height: 68px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar--square {
  border-radius: var(--radius);
}

/* Switch */
.switch {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--surface-container-highest);
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}
.switch[aria-checked="true"] {
  background: var(--primary);
}
.switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

/* Navigasi bawah */
.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  color: var(--on-surface-variant);
  transition: all 0.2s ease;
}
.nav-link--active {
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 700;
}
.nav-link .material-symbols-outlined {
  font-size: 24px;
}

/* Modal / bottom sheet */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal__panel {
  width: 100%;
  max-width: 512px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-xl);
}
@media (min-width: 600px) {
  .modal {
    align-items: center;
    padding: 16px;
  }
  .modal__panel {
    border-radius: var(--radius-lg);
  }
}

/* Toast */
.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + 24px);
  left: 50%;
  transform: translate(-50%, 40px);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  max-width: calc(100vw - 32px);
}
.toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast .material-symbols-outlined {
  font-size: 20px;
  color: var(--secondary-fixed);
}
.toast--error .material-symbols-outlined {
  color: var(--error-container);
}

/* State kosong & skeleton */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--on-surface-variant);
}
.empty-state .material-symbols-outlined {
  font-size: 40px;
  color: var(--outline-variant);
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-container) 25%, var(--surface-container-high) 37%, var(--surface-container) 63%);
  background-size: 400% 100%;
  animation: sunkist-shimmer 1.4s ease infinite;
  border-radius: var(--radius);
}
@keyframes sunkist-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Keypad numerik */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 320px;
}
.keypad__key {
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}
.keypad__key:hover {
  background: var(--primary-fixed);
}
.keypad__key:active {
  transform: scale(0.95);
}
.keypad__key--muted {
  background: var(--surface-container-highest);
  color: var(--on-surface-variant);
}

/* Grafik batang (laporan omzet) */
.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 192px;
  padding: 8px 4px 0;
}
.bar-chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
  cursor: pointer;
}
.bar-chart__bar {
  width: 100%;
  max-width: 32px;
  background: var(--primary-fixed);
  border-radius: var(--radius) var(--radius) 0 0;
  transition: background-color 0.2s ease;
  min-height: 4px;
}
.bar-chart__col:hover .bar-chart__bar {
  background: var(--primary);
}
.bar-chart__bar--active {
  background: var(--primary);
  box-shadow: var(--shadow-sm);
}
.bar-chart__value {
  font-size: 10px;
  font-weight: 600;
  color: var(--on-surface-variant);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.bar-chart__col:hover .bar-chart__value,
.bar-chart__value--visible {
  opacity: 1;
}

/* Progress bar */
.progress {
  width: 100%;
  height: 10px;
  background: var(--surface-container-highest);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--primary);
}

/* Kisi aksi cepat */
.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: background-color 0.2s ease;
}
.quick-action:hover {
  background: rgba(204, 229, 255, 0.4);
}
.quick-action__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}

/* Kartu pilih layanan (POS) */
.service-card {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-container);
  text-align: center;
  color: var(--on-surface);
  transition: all 0.2s ease;
  border: 2px solid transparent;
}
.service-card:hover {
  background: var(--surface-container-high);
}
.service-card--active {
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.service-card--outline {
  background: var(--surface);
  border-color: var(--primary);
}

/* Tabel rapi untuk manajemen produk */
.data-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------- Responsive mobile -- */

/* Child flex/grid yang boleh mengecil perlu min-width: 0; tanpa ini label
   panjang dan kontrol toolbar membuat seluruh halaman melebar di Android. */
.app-main > *,
.app-header__inner > *,
.app-nav__inner > *,
.card > *,
.data-row > * {
  min-width: 0;
}

body {
  overflow-x: hidden;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.overflow-x-auto > table {
  min-width: 640px;
}

@media (max-width: 600px) {
  :root {
    --margin-screen: 12px;
    --gutter-md: 12px;
    --header-h: 58px;
    --nav-h: 68px;
  }

  .app-main {
    padding-left: var(--margin-screen);
    padding-right: var(--margin-screen);
  }

  .app-header__inner {
    padding-left: var(--margin-screen);
    padding-right: var(--margin-screen);
    gap: 8px;
  }

  .app-nav__inner {
    padding-left: 4px;
    padding-right: 4px;
  }

  .nav-link {
    width: 56px;
    height: 56px;
    gap: 2px;
  }

  .nav-link .material-symbols-outlined {
    font-size: 22px;
  }

  .h-xl {
    font-size: 24px;
    line-height: 30px;
  }

  .h-lg {
    font-size: 20px;
    line-height: 26px;
  }

  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .col-span-3 {
    grid-column: span 2 / span 2;
  }

  .btn {
    min-height: 44px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
  }

  .btn-lg {
    min-height: 52px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .btn-sm {
    min-height: 40px;
  }

  .flex-wrap > .btn,
  .flex-wrap > .input,
  .flex-wrap > select {
    max-width: 100%;
  }

  .data-row {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 12px;
  }

  #satuan-list .list-row {
    gap: 8px;
    padding: 10px 12px;
    min-height: 64px;
  }

  #satuan-list .list-row > :last-child {
    gap: 6px;
  }

  #satuan-list .list-row .avatar {
    width: 36px;
    height: 36px;
  }

  .modal__panel {
    max-height: 92vh;
    padding: 16px;
    gap: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .sticky-cta {
    padding: 12px var(--margin-screen);
  }

  .toast {
    bottom: calc(var(--nav-h) + 16px);
  }
}

@media (max-width: 380px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .col-span-2,
  .col-span-3 {
    grid-column: auto;
  }

  .nav-link {
    width: 48px;
  }

  .nav-link .l-sm {
    font-size: 9px;
  }
}

/* ==========================================================================
   Cetak laporan
   Layar laporan punya banyak kontrol (filter, mode, tombol) yang hanya relevan
   di layar. Saat dicetak, kontrol itu disembunyikan lewat .no-print, chrome
   aplikasi (header/nav) dihilangkan, dan kartu metrik dirapikan jadi 4 kolom
   supaya laporan muat di kertas A4 — bukan sekadar screenshot layar.
   ========================================================================== */
.report-print-header {
  display: none;
}

@media print {
  .no-print,
  .app-header,
  .app-nav {
    display: none !important;
  }

  .app-main,
  .app-main--wide,
  .app-main--cta,
  .app-main--cta-tall {
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 0;
  }

  body {
    background: #fff !important;
  }

  /* Kop laporan hanya muncul di atas kertas, dengan judul & periode terisi
     oleh JS (laporan.js) sebelum window.print() dipanggil. */
  .page-laporan .report-print-header {
    display: block;
    padding: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: 2px solid #111;
  }
  .report-print-header__brand {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .report-print-header__title {
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
  }
  .report-print-header__meta {
    font-size: 12px;
    color: #555;
    margin-top: 2px;
  }

  /* Kartu metrik: 4 kolom di kertas, bukan 2 kolom di layar sempit. */
  .page-laporan .print-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Kartu jangan sampai pecah di antara dua halaman. */
  .page-laporan .card,
  .page-laporan .card--raised {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}