/* OysKasir milk surfaces: navigasi dan kartu mengikuti putih susu menu profil. */
:root {
  --oys-profile-milk: #fffdf9;
  --oys-profile-milk-top: #fffefb;
  --oys-profile-milk-bottom: #f7f5f1;
  --oys-page-milk: #f2f1f5;
  --oys-page-milk-deep: #eeedf3;
  --oys-milk-border: #e9e5de;
  --oys-milk-divider: #eeeae4;
  --oys-milk-shadow: 0 14px 38px rgba(39, 35, 67, .075), inset 0 1px 0 #fff;
}

html { background: var(--oys-page-milk); }

body,
.install-body {
  background:
    radial-gradient(circle at 4% 2%, rgba(111, 101, 218, .075), transparent 28rem),
    radial-gradient(circle at 100% 20%, rgba(139, 92, 246, .055), transparent 34rem),
    linear-gradient(145deg, #f7f6f4 0%, var(--oys-page-milk) 48%, var(--oys-page-milk-deep) 100%);
}

/* Navigasi putih susu solid. */
.sidebar,
.topbar {
  border-color: var(--oys-milk-border);
  background-color: var(--oys-profile-milk);
  background-image: linear-gradient(180deg, var(--oys-profile-milk-top), var(--oys-profile-milk));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sidebar {
  box-shadow: 8px 0 34px rgba(39, 35, 67, .065), inset -1px 0 0 #fff;
}

.sidebar-brand {
  border-bottom-color: var(--oys-milk-divider);
  background: linear-gradient(145deg, var(--oys-profile-milk-top), #faf7f4);
}

.sidebar nav { background: var(--oys-profile-milk); }
.nav-link { color: #5f6677; }

.nav-link:hover {
  color: #5147c8;
  border-color: #e8e3fb;
  background: linear-gradient(135deg, #faf8ff, #f3f0fd);
  box-shadow: 0 8px 20px rgba(70, 61, 122, .065), inset 0 1px 0 #fff;
}

.nav-link.active,
.nav-link.active:hover {
  color: #443ba9;
  border-color: #ddd7f7;
  background: linear-gradient(135deg, #f8f5ff 0%, #eeebfc 100%);
  box-shadow: 0 9px 24px rgba(82, 69, 158, .105), inset 0 1px 0 #fff;
}

.nav-link.active > .icon,
.nav-link.active:hover > .icon {
  color: #fff;
  background: linear-gradient(145deg, #625bf6, #855ade);
}

.sidebar-footer {
  border-color: #e4dff6;
  background:
    radial-gradient(circle at 90% 0%, rgba(117, 88, 225, .09), transparent 72px),
    linear-gradient(135deg, var(--oys-profile-milk-top), #f2effd);
  box-shadow: 0 10px 26px rgba(61, 52, 111, .09), inset 0 1px 0 #fff;
}

.topbar {
  box-shadow: 0 11px 30px rgba(39, 35, 67, .06), inset 0 1px 0 #fff;
}

.topbar .menu-btn,
.topbar .branch-select,
.topbar .module,
.account-btn {
  border-color: var(--oys-milk-border);
  background: linear-gradient(145deg, var(--oys-profile-milk-top), #faf8f4);
  box-shadow: 0 5px 15px rgba(39, 35, 67, .045), inset 0 1px 0 #fff;
}

.topbar .menu-btn:hover,
.account-btn:hover,
.account-btn[aria-expanded="true"] {
  color: #5147c8;
  border-color: #ded8f6;
  background: linear-gradient(145deg, var(--oys-profile-milk-top), #f3effd);
}

/* Seluruh permukaan putih mengikuti material profil. */
.panel,
.toolbar,
.page-head.boxed,
.table-wrap,
.branch-overview,
.branch-performance-table,
.product-card,
.chart-panel,
.sales-chart-panel,
.cart,
.pos-catalog,
.pos-tools,
dialog,
.install-panel,
.login-left,
.dashboard-stats .stat:not(.gradient),
.account-menu {
  border-color: var(--oys-milk-border);
  background-color: var(--oys-profile-milk);
  background-image: linear-gradient(145deg, var(--oys-profile-milk-top), var(--oys-profile-milk) 58%, var(--oys-profile-milk-bottom));
  box-shadow: var(--oys-milk-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.panel-title,
.dashboard-chart-head,
.modal-head:not(.gradient) {
  border-color: var(--oys-milk-divider);
  background: linear-gradient(110deg, #faf8f4, var(--oys-profile-milk-top));
}

input,
select,
textarea,
.dashboard-tools input,
.date-filter input,
.pos-tools input,
.pos-tools select,
.pos-search input,
.payment-row input,
.payment-row select,
.customer-box input,
.customer-box select,
.discount-controls input,
.file-upload-control,
.file-upload-button,
.pagination select,
.presets button,
.variant-editor,
.customer-box,
.cart-row,
.cart-controls,
.cart-items,
.cart-bottom,
.bill {
  border-color: var(--oys-milk-border);
  background-color: var(--oys-profile-milk-top);
  box-shadow: inset 0 1px 0 #fff;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #dcd6ed;
  background: #fffefa;
}

.data-table th,
.form-actions,
.modal-foot {
  border-color: var(--oys-milk-divider);
  background: #f8f6f2;
}

.data-table td { border-bottom-color: var(--oys-milk-divider); }
.data-table tbody tr:hover { background: #faf7f3; }

.modal-body,
.marketplace-content,
.receipt-preview { background: var(--oys-profile-milk); }

.pos-products .marketplace-card {
  border-color: var(--oys-milk-border);
  background: linear-gradient(180deg, var(--oys-profile-milk-top), var(--oys-profile-milk));
  box-shadow: 0 8px 22px rgba(39, 35, 67, .065), inset 0 1px 0 #fff;
}

.main.pos-main {
  background:
    radial-gradient(circle at 78% 2%, rgba(112, 99, 220, .07), transparent 35%),
    linear-gradient(145deg, #f7f6f4, var(--oys-page-milk) 56%, var(--oys-page-milk-deep));
}

.pos-catalog { background: var(--oys-profile-milk); }

.account-menu,
.account-menu-actions,
.account-menu .account-menu-actions .btn,
.account-menu::before {
  background-color: var(--oys-profile-milk);
}

@media (max-width: 760px) {
  .sidebar,
  .topbar { background: var(--oys-profile-milk); }
}

@media print {
  body,
  .install-body { background: #fff; }
}