/* Goodsnap Web - Native Stylesheet */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: #e7ece9;
}

html, body {
  min-height: 100vh;
  background-color: #f7f9f8;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #202c28;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button, input, select {
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

/* Screen Visibility & Layout */
.app-screen {
  display: none;
  width: 100%;
  min-width: 1440px;
  min-height: 1120px;
}

.app-screen.active {
  display: flex;
}

/* Interactive Hover & Active Enhancements */
[data-name="Navigation item"] {
  cursor: pointer;
  transition: background-color 0.16s ease, transform 0.1s ease;
  user-select: none;
}

[data-name="Navigation item"]:hover {
  background-color: #f1f6f3;
}

[data-name="Navigation item"].bg-\[\#ebf5ef\]:hover,
[data-name="Navigation item"].bg-\[\#eaf6f2\]:hover {
  background-color: #e2f1e8;
}

/* Interactive Buttons & Chips */
[data-name="Report controls"] [data-name="Action"],
[data-name="Export button"],
[data-name="Download button"],
[data-name="Create voucher button"],
[data-name="Download app button"],
[data-name="Pairing button"],
[data-name="Buat baru button"],
[data-name="Import button"],
[data-name="Create filter button"],
[data-name="Tarik saldo button"],
[data-name="Reset button"],
[data-name="Reset"],
[data-name="Nonaktifkan button"],
[data-name="Settings button"],
[data-name="Strip button"],
[data-name="Kolase button"],
[data-name="Grid button"],
[data-name="List button"],
[data-name="QR"],
[data-name="Folder"],
[data-name="Print Booth"],
[data-name="Toggle on"],
[data-name="Toggle"] {
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  user-select: none;
}

[data-name="Report controls"] [data-name="Action"]:hover,
[data-name="Export button"]:hover,
[data-name="Download button"]:hover,
[data-name="Create voucher button"]:hover,
[data-name="Download app button"]:hover,
[data-name="Pairing button"]:hover,
[data-name="Buat baru button"]:hover,
[data-name="Import button"]:hover,
[data-name="Create filter button"]:hover,
[data-name="Tarik saldo button"]:hover,
[data-name="Reset button"]:hover,
[data-name="Reset"]:hover,
[data-name="Nonaktifkan button"]:hover {
  opacity: 0.92;
}

[data-name="Device card"] {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

[data-name="Device card"]:hover {
  border-color: #26815a;
  box-shadow: 0 4px 16px rgba(38, 129, 90, 0.08);
}

/* Sub-view Switcher Pill for Perangkat Saya */
.device-view-switcher {
  display: inline-flex;
  align-items: center;
  background-color: #edf1ee;
  padding: 3px;
  border-radius: 10px;
  gap: 2px;
  margin-left: 16px;
}

.device-view-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #58665f;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.device-view-btn.active {
  background-color: #ffffff;
  color: #202c28;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* Toggle Switch Off State for Filter & Frame Saya */
.toggle-off-state {
  filter: grayscale(1) opacity(0.55);
  transform: scaleX(-1);
}

/* Inline Search Input Overlay */
.live-search-input {
  width: 100%;
  font-size: 13px;
  color: #202c28;
  background: transparent;
  border: none;
  outline: none;
}

.live-search-input::placeholder {
  color: #7c8781;
}

/* Toast Notification */
#goodsnap-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #202c28;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#goodsnap-toast.show {
  opacity: 1;
  transform: translateY(0);
}

#goodsnap-toast .toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
}

/* Generated Utility Classes from Figma Design Context */
.\[word-break\:break-word\] { word-break: break-word; }
.absolute { position: absolute; }
.block { display: block; }
.content-center { align-content: center; }
.content-stretch { align-content: stretch; }
.cursor-pointer { cursor: pointer; }
.flex { display: flex; }
.flex-\[1_0_0\] { flex: 1 0 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.max-w-none { max-width: none; }
.not-italic { font-style: normal; }
.object-cover { object-fit: cover; }
.opacity-0 { opacity: 0; }
.overflow-clip { overflow: clip; }
.pointer-events-none { pointer-events: none; }
.relative { position: relative; }
.self-stretch { align-self: stretch; }
.shrink-0 { flex-shrink: 0; }
.whitespace-nowrap { white-space: nowrap; }
.min-h-\[1120px\] { min-height: 1120px; }
.min-h-\[90px\] { min-height: 90px; }
.min-h-px { min-height: 1px; }
.min-w-full { min-width: 100%; }
.min-w-px { min-width: 1px; }
.size-\[10px\] { width: 10px; height: 10px; }
.size-\[12px\] { width: 12px; height: 12px; }
.size-\[13px\] { width: 13px; height: 13px; }
.size-\[14px\] { width: 14px; height: 14px; }
.size-\[16px\] { width: 16px; height: 16px; }
.size-\[17px\] { width: 17px; height: 17px; }
.size-\[18px\] { width: 18px; height: 18px; }
.size-\[20px\] { width: 20px; height: 20px; }
.size-\[23px\] { width: 23px; height: 23px; }
.size-\[32px\] { width: 32px; height: 32px; }
.size-\[33px\] { width: 33px; height: 33px; }
.size-\[34px\] { width: 34px; height: 34px; }
.size-\[40px\] { width: 40px; height: 40px; }
.size-\[48px\] { width: 48px; height: 48px; }
.size-\[5px\] { width: 5px; height: 5px; }
.size-\[6px\] { width: 6px; height: 6px; }
.size-full { width: 100%; height: 100%; }
.size-px { width: 1px; height: 1px; }
.h-\[110px\] { height: 110px; }
.h-\[12px\] { height: 12px; }
.h-\[140px\] { height: 140px; }
.h-\[152px\] { height: 152px; }
.h-\[156px\] { height: 156px; }
.h-\[158px\] { height: 158px; }
.h-\[168px\] { height: 168px; }
.h-\[172px\] { height: 172px; }
.h-\[176px\] { height: 176px; }
.h-\[20px\] { height: 20px; }
.h-\[24px\] { height: 24px; }
.h-\[344px\] { height: 344px; }
.h-\[34px\] { height: 34px; }
.h-\[36px\] { height: 36px; }
.h-\[48px\] { height: 48px; }
.h-\[496px\] { height: 496px; }
.h-\[49px\] { height: 49px; }
.h-\[589px\] { height: 589px; }
.h-\[704px\] { height: 704px; }
.h-\[71px\] { height: 71px; }
.h-\[72px\] { height: 72px; }
.h-\[8px\] { height: 8px; }
.h-\[96px\] { height: 96px; }
.h-full { height: 100%; }
.h-px { height: 1px; }
.w-\[100px\] { width: 100px; }
.w-\[110px\] { width: 110px; }
.w-\[115px\] { width: 115px; }
.w-\[120px\] { width: 120px; }
.w-\[124px\] { width: 124px; }
.w-\[127\.914px\] { width: 127.914px; }
.w-\[130px\] { width: 130px; }
.w-\[131px\] { width: 131px; }
.w-\[134px\] { width: 134px; }
.w-\[140px\] { width: 140px; }
.w-\[160px\] { width: 160px; }
.w-\[16px\] { width: 16px; }
.w-\[180px\] { width: 180px; }
.w-\[183px\] { width: 183px; }
.w-\[200px\] { width: 200px; }
.w-\[202\.222px\] { width: 202.222px; }
.w-\[220px\] { width: 220px; }
.w-\[24px\] { width: 24px; }
.w-\[256px\] { width: 256px; }
.w-\[264px\] { width: 264px; }
.w-\[266px\] { width: 266px; }
.w-\[272px\] { width: 272px; }
.w-\[30px\] { width: 30px; }
.w-\[320px\] { width: 320px; }
.w-\[32px\] { width: 32px; }
.w-\[360px\] { width: 360px; }
.w-\[36px\] { width: 36px; }
.w-\[380\.086px\] { width: 380.086px; }
.w-\[40px\] { width: 40px; }
.w-\[420px\] { width: 420px; }
.w-\[548px\] { width: 548px; }
.w-\[65px\] { width: 65px; }
.w-\[672px\] { width: 672px; }
.w-\[95px\] { width: 95px; }
.w-\[min-content\] { width: min-content; }
.w-full { width: 100%; }
.w-px { width: 1px; }
.inset-\[-1\.14\%_0\] { inset: -1.14% 0; }
.inset-\[-1\.25\%_0_-1\.41\%_0\] { inset: -1.25% 0 -1.41% 0; }
.inset-\[-2\.08\%_-0\.49\%\] { inset: -2.08% -0.49%; }
.inset-0 { inset: 0px; }
.left-\[11px\] { left: 11px; }
.left-\[380\.09px\] { left: 380.09px; }
.left-\[443px\] { left: 443px; }
.left-\[448px\] { left: 448px; }
.left-\[474px\] { left: 474px; }
.left-\[8\.33px\] { left: 8.33px; }
.left-0 { left: 0px; }
.top-\[11px\] { top: 11px; }
.top-\[13px\] { top: 13px; }
.top-\[16px\] { top: 16px; }
.top-\[23px\] { top: 23px; }
.top-\[27px\] { top: 27px; }
.top-\[35px\] { top: 35px; }
.top-\[47px\] { top: 47px; }
.top-\[59px\] { top: 59px; }
.top-\[73px\] { top: 73px; }
.top-0 { top: 0px; }
.gap-\[10px\] { gap: 10px; }
.gap-\[12px\] { gap: 12px; }
.gap-\[15px\] { gap: 15px; }
.gap-\[16px\] { gap: 16px; }
.gap-\[17px\] { gap: 17px; }
.gap-\[20px\] { gap: 20px; }
.gap-\[22px\] { gap: 22px; }
.gap-\[24px\] { gap: 24px; }
.gap-\[2px\] { gap: 2px; }
.gap-\[3px\] { gap: 3px; }
.gap-\[4px\] { gap: 4px; }
.gap-\[5px\] { gap: 5px; }
.gap-\[6px\] { gap: 6px; }
.gap-\[7px\] { gap: 7px; }
.gap-\[8px\] { gap: 8px; }
.gap-\[9px\] { gap: 9px; }
.p-\[10px\] { padding: 10px; }
.p-\[14px\] { padding: 14px; }
.p-\[16px\] { padding: 16px; }
.p-\[20px\] { padding: 20px; }
.p-\[22px\] { padding: 22px; }
.p-\[24px\] { padding: 24px; }
.p-\[3px\] { padding: 3px; }
.p-\[8px\] { padding: 8px; }
.px-\[10px\] { padding-left: 10px; padding-right: 10px; }
.px-\[12px\] { padding-left: 12px; padding-right: 12px; }
.px-\[14px\] { padding-left: 14px; padding-right: 14px; }
.px-\[16px\] { padding-left: 16px; padding-right: 16px; }
.px-\[20px\] { padding-left: 20px; padding-right: 20px; }
.px-\[24px\] { padding-left: 24px; padding-right: 24px; }
.px-\[32px\] { padding-left: 32px; padding-right: 32px; }
.px-\[8px\] { padding-left: 8px; padding-right: 8px; }
.py-\[10px\] { padding-top: 10px; padding-bottom: 10px; }
.py-\[11px\] { padding-top: 11px; padding-bottom: 11px; }
.py-\[12px\] { padding-top: 12px; padding-bottom: 12px; }
.py-\[14px\] { padding-top: 14px; padding-bottom: 14px; }
.py-\[16px\] { padding-top: 16px; padding-bottom: 16px; }
.py-\[20px\] { padding-top: 20px; padding-bottom: 20px; }
.py-\[32px\] { padding-top: 32px; padding-bottom: 32px; }
.py-\[5px\] { padding-top: 5px; padding-bottom: 5px; }
.py-\[6px\] { padding-top: 6px; padding-bottom: 6px; }
.py-\[8px\] { padding-top: 8px; padding-bottom: 8px; }
.pb-\[24px\] { padding-bottom: 24px; }
.pb-\[26px\] { padding-bottom: 26px; }
.pb-\[32px\] { padding-bottom: 32px; }
.pb-\[9px\] { padding-bottom: 9px; }
.pt-\[20px\] { padding-top: 20px; }
.pt-\[28px\] { padding-top: 28px; }
.pt-\[6px\] { padding-top: 6px; }
.rounded-\[100px\] { border-radius: 100px; }
.rounded-\[10px\] { border-radius: 10px; }
.rounded-\[12px\] { border-radius: 12px; }
.rounded-\[15px\] { border-radius: 15px; }
.rounded-\[16px\] { border-radius: 16px; }
.rounded-\[24px\] { border-radius: 24px; }
.rounded-\[4px\] { border-radius: 4px; }
.rounded-\[6px\] { border-radius: 6px; }
.rounded-\[8px\] { border-radius: 8px; }
.rounded-\[999px\] { border-radius: 999px; }
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-r { border-right-width: 1px; }
.border-t { border-top-width: 1px; }
.border-solid { border-style: solid; }
.border-\[\#26815a\] { border-color: #26815a; }
.border-\[\#a7f3d0\] { border-color: #a7f3d0; }
.border-\[\#d1e9dd\] { border-color: #d1e9dd; }
.border-\[\#d7dce2\] { border-color: #d7dce2; }
.border-\[\#e5e7eb\] { border-color: #e5e7eb; }
.border-\[\#e7ece9\] { border-color: #e7ece9; }
.border-\[\#f3d1d1\] { border-color: #f3d1d1; }
.bg-\[\#166534\] { background-color: #166534; }
.bg-\[\#16a34a\] { background-color: #16a34a; }
.bg-\[\#202c28\] { background-color: #202c28; }
.bg-\[\#26815a\] { background-color: #26815a; }
.bg-\[\#2e7d32\] { background-color: #2e7d32; }
.bg-\[\#34d399\] { background-color: #34d399; }
.bg-\[\#3b82f6\] { background-color: #3b82f6; }
.bg-\[\#41916f\] { background-color: #41916f; }
.bg-\[\#8b5cf6\] { background-color: #8b5cf6; }
.bg-\[\#a7f3d0\] { background-color: #a7f3d0; }
.bg-\[\#a9d2ba\] { background-color: #a9d2ba; }
.bg-\[\#dbeafe\] { background-color: #dbeafe; }
.bg-\[\#dcfce7\] { background-color: #dcfce7; }
.bg-\[\#e7ece9\] { background-color: #e7ece9; }
.bg-\[\#eaf6f2\] { background-color: #eaf6f2; }
.bg-\[\#ebf5ef\] { background-color: #ebf5ef; }
.bg-\[\#ebf5ff\] { background-color: #ebf5ff; }
.bg-\[\#ebf7ed\] { background-color: #ebf7ed; }
.bg-\[\#ecfdf5\] { background-color: #ecfdf5; }
.bg-\[\#edf1ee\] { background-color: #edf1ee; }
.bg-\[\#eff6ff\] { background-color: #eff6ff; }
.bg-\[\#f1f3f2\] { background-color: #f1f3f2; }
.bg-\[\#f1f4f2\] { background-color: #f1f4f2; }
.bg-\[\#f3f4f6\] { background-color: #f3f4f6; }
.bg-\[\#f59e0b\] { background-color: #f59e0b; }
.bg-\[\#f7f9f8\] { background-color: #f7f9f8; }
.bg-\[\#f8faf9\] { background-color: #f8faf9; }
.bg-\[\#fafbfa\] { background-color: #fafbfa; }
.bg-\[\#fbf4e6\] { background-color: #fbf4e6; }
.bg-\[\#fdecec\] { background-color: #fdecec; }
.bg-\[\#fef2f2\] { background-color: #fef2f2; }
.bg-white { background-color: #ffffff; }
.font-\[\'Inter\:Bold\'\] { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; }
.font-\[\'Inter\:Medium\'\] { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; }
.font-\[\'Inter\:Regular\'\] { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; }
.font-\[\'Inter\:Semi_Bold\'\] { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-white { color: #ffffff; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[16px\] { font-size: 16px; }
.text-\[18px\] { font-size: 18px; }
.text-\[20px\] { font-size: 20px; }
.text-\[23px\] { font-size: 23px; }
.text-\[24px\] { font-size: 24px; }
.text-\[25px\] { font-size: 25px; }
.text-\[28px\] { font-size: 28px; }
.text-\[32px\] { font-size: 32px; }
.text-\[9px\] { font-size: 9px; }
.text-\[\#15803d\] { color: #15803d; }
.text-\[\#166534\] { color: #166534; }
.text-\[\#16a34a\] { color: #16a34a; }
.text-\[\#1d4ed8\] { color: #1d4ed8; }
.text-\[\#202c28\] { color: #202c28; }
.text-\[\#2563eb\] { color: #2563eb; }
.text-\[\#26815a\] { color: #26815a; }
.text-\[\#2e7d32\] { color: #2e7d32; }
.text-\[\#2e7d33\] { color: #2e7d33; }
.text-\[\#41916f\] { color: #41916f; }
.text-\[\#4587d4\] { color: #4587d4; }
.text-\[\#4b5563\] { color: #4b5563; }
.text-\[\#58665f\] { color: #58665f; }
.text-\[\#66756e\] { color: #66756e; }
.text-\[\#6b7280\] { color: #6b7280; }
.text-\[\#7c8781\] { color: #7c8781; }
.text-\[\#a47727\] { color: #a47727; }
.text-\[\#b42318\] { color: #b42318; }
.text-\[\#b91c1c\] { color: #b91c1c; }
.text-\[\#d8e7df\] { color: #d8e7df; }
.text-\[rgba\(255\,255\,255\,0\.8\)\] { color: rgba(255,255,255,0.8); }
.leading-\[0\] { line-height: 0; }
.leading-\[20px\] { line-height: 20px; }
.leading-\[normal\] { line-height: normal; }