/* OysKasir milky-white finish — shell and Mesin Kasir surfaces. */
:root {
  --oys-milk: #fffef9;
  --oys-milk-soft: #fbf9f4;
  --oys-milk-muted: #f6f3ee;
  --oys-milk-line: rgba(113, 105, 143, .12);
  --oys-milk-shadow: 0 12px 34px rgba(53, 50, 79, .075), inset 0 1px 0 rgba(255, 255, 255, .96);
  --oys-milk-ease: cubic-bezier(.2, .72, .2, 1);
}

body {
  background:
    radial-gradient(circle at 78% 2%, rgba(225, 219, 255, .5), transparent 36%),
    radial-gradient(circle at 22% 18%, rgba(255, 248, 220, .45), transparent 31%),
    linear-gradient(145deg, #f7f6f1 0%, #f5f4f8 52%, #f0eff9 100%);
}

/* Milky navigation shell, based on the supplied OysPanel reference. */
.sidebar {
  border-color: rgba(127, 119, 158, .11);
  background:
    linear-gradient(180deg, rgba(255, 254, 249, .99) 0%, rgba(255, 253, 248, .98) 58%, rgba(249, 247, 252, .98) 100%);
  box-shadow: 8px 0 34px rgba(53, 50, 79, .065), inset -1px 0 0 rgba(255, 255, 255, .86);
  backdrop-filter: blur(22px) saturate(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(1.05);
}

.sidebar-brand {
  border-bottom-color: rgba(126, 117, 154, .11);
  background: linear-gradient(145deg, rgba(255, 255, 252, .98), rgba(250, 247, 255, .82));
}

.sidebar-brand img {
  border-color: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 20px rgba(90, 81, 191, .16), 0 0 0 5px rgba(247, 244, 255, .72);
}

.sidebar nav {
  scrollbar-color: rgba(127, 116, 205, .52) transparent;
}

.nav-group-label,
.nav-group:nth-child(n) .nav-group-label {
  color: #a09aaa;
}

.nav-link {
  color: #62697a;
}

.nav-link:hover {
  color: #564fc2;
  border-color: rgba(111, 96, 217, .08);
  background: rgba(248, 245, 255, .82);
  box-shadow: 0 8px 20px rgba(68, 61, 111, .045);
}

.nav-link.active {
  color: #574ed1;
  border-color: rgba(102, 86, 221, .13);
  background: linear-gradient(135deg, rgba(248, 245, 255, .98), rgba(237, 233, 255, .94));
  box-shadow: 0 10px 25px rgba(93, 78, 193, .10), inset 0 1px 0 #fff;
}

.nav-link > .icon {
  box-shadow: 0 7px 16px rgba(91, 78, 184, .10), inset 0 1px 0 rgba(255, 255, 255, .82);
}

.sidebar-footer {
  border-color: rgba(112, 98, 187, .14);
  color: #635bb5;
  background:
    radial-gradient(circle at 92% 0, rgba(188, 220, 255, .32), transparent 60px),
    linear-gradient(135deg, #fffafc 0%, #f6f2ff 54%, #eef7ff 100%);
  box-shadow: 0 12px 28px rgba(76, 66, 139, .11), inset 0 1px 0 #fff;
}

.sidebar-footer::after {
  border-color: rgba(109, 91, 207, .055);
}

.sidebar-footer-mark {
  border-color: rgba(102, 86, 221, .13);
  color: #6959da;
  background: rgba(238, 233, 255, .86);
  box-shadow: 0 5px 13px rgba(93, 78, 193, .10), inset 0 1px 0 #fff;
}

.sidebar-footer-copy {
  color: #554cae;
}

.sidebar-footer-copy small {
  color: #9089aa;
}

.sidebar-footer button {
  border-color: rgba(102, 86, 221, .13);
  color: #6959da;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 5px 13px rgba(76, 66, 139, .08), inset 0 1px 0 #fff;
}

/* Floating milky topbar. */
.topbar {
  border-color: rgba(125, 117, 155, .10);
  background: rgba(255, 254, 249, .91);
  box-shadow: 0 12px 32px rgba(52, 49, 76, .065), inset 0 1px 0 #fff;
  backdrop-filter: blur(24px) saturate(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(1.04);
}

.topbar .menu-btn,
.topbar .branch-select,
.topbar .module,
.account-btn {
  border-color: rgba(123, 114, 153, .10);
  background: rgba(255, 254, 250, .9);
  box-shadow: 0 5px 15px rgba(48, 44, 71, .04), inset 0 1px 0 #fff;
}

.account-menu {
  border-color: var(--oys-milk-line);
  background: rgba(255, 254, 250, .985);
  box-shadow: 0 20px 50px rgba(47, 43, 72, .15), inset 0 1px 0 #fff;
}

/* Mesin Kasir: warm white catalog and checkout surfaces. */
.main.pos-main {
  background:
    radial-gradient(circle at 74% 2%, rgba(229, 222, 255, .5), transparent 35%),
    radial-gradient(circle at 15% 10%, rgba(255, 248, 219, .38), transparent 30%),
    linear-gradient(145deg, #f8f7f2 0%, #f5f4f8 55%, #f0eff9 100%);
}

.pos-catalog {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 20px;
  background: rgba(255, 254, 250, .40);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.pos-tools {
  padding: 8px;
  border: 1px solid rgba(124, 115, 153, .10);
  border-radius: 16px;
  background: rgba(255, 254, 250, .76);
  box-shadow: 0 8px 24px rgba(49, 46, 73, .045), inset 0 1px 0 #fff;
}

.pos-tools select,
.pos-tools input,
.pos-search input,
.payment-row input,
.payment-row select,
.customer-box select,
.cart-notes,
.discount-controls input {
  border-color: rgba(119, 111, 148, .13);
  background-color: rgba(255, 254, 249, .98);
  box-shadow: inset 0 1px 0 #fff;
}

.pos-search {
  padding: 3px;
  border: 1px solid rgba(124, 115, 153, .09);
  border-radius: 15px;
  background: rgba(255, 254, 250, .72);
  box-shadow: 0 7px 20px rgba(49, 46, 73, .04), inset 0 1px 0 #fff;
}

.pos-search .search {
  background: transparent;
}

.view-toggle {
  border-color: rgba(116, 105, 154, .12);
  background: rgba(255, 254, 250, .94);
  box-shadow: 0 5px 14px rgba(53, 49, 80, .045), inset 0 1px 0 #fff;
}

.pos-products {
  margin-top: 2px;
  padding: 4px 5px 4px 2px;
}

.pos-products .marketplace-card {
  border-color: rgba(115, 107, 142, .11);
  background: linear-gradient(180deg, #fffefa 0%, #fffdf8 100%);
  box-shadow: 0 8px 22px rgba(47, 44, 69, .065), inset 0 1px 0 #fff;
}

.marketplace-content {
  background: linear-gradient(180deg, rgba(255, 255, 252, .98), rgba(255, 252, 247, .96));
}

.pos-products .marketplace-media {
  background: #f6f4ef;
}

.pos-catalog .pagination {
  margin-top: 5px;
  border-top: 1px solid rgba(120, 111, 150, .09);
  background: rgba(255, 254, 250, .68);
}

.cart {
  border-color: rgba(112, 101, 157, .14);
  background: var(--oys-milk);
  box-shadow: 0 18px 44px rgba(49, 44, 78, .11), inset 0 1px 0 #fff;
}

.cart-header {
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 8px 22px rgba(91, 74, 209, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.cart-controls,
.cart-items,
.cart-bottom {
  border-color: rgba(119, 110, 149, .10);
  background: linear-gradient(180deg, #fffefa 0%, #fbf9f4 100%);
}

.cart-row {
  border-color: rgba(118, 109, 148, .11);
  background: #fffefa;
  box-shadow: 0 7px 18px rgba(49, 45, 72, .05), inset 0 1px 0 #fff;
}

.customer-box {
  border-color: rgba(114, 103, 159, .12);
  background: linear-gradient(135deg, #fffefa, #faf7ff);
  box-shadow: inset 0 1px 0 #fff;
}

.bill {
  border-color: rgba(101, 86, 213, .14);
  background: linear-gradient(125deg, #f7f4ff 0%, #fffdf8 100%);
  box-shadow: inset 0 1px 0 #fff;
}

.change-row button {
  color: #6259c5;
  background: #f4f0ff;
}

@media (hover: hover) and (pointer: fine) {
  .sidebar-footer button:hover {
    color: #5548c9;
    background: #fff;
    box-shadow: 0 8px 18px rgba(76, 66, 139, .13), inset 0 1px 0 #fff;
  }

  .pos-products .marketplace-card:not(.out-of-stock):hover {
    border-color: rgba(103, 86, 221, .29);
    box-shadow: 0 16px 34px rgba(76, 65, 147, .14), inset 0 1px 0 #fff;
  }
}

@media (max-width: 760px) {
  .main.pos-main { padding-inline: 9px; padding-bottom: 9px; }
  .pos-catalog { padding: 7px; border-radius: 16px; }
  .pos-tools { padding: 6px; border-radius: 14px; }
  .cart { border-radius: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .pos-products .marketplace-card,
  .nav-link,
  .sidebar-footer button {
    transition: none;
  }
}