/* Polesan akhir ungu lembut dan tajam untuk OysKasir. */
:root {
  --oys-purple-500: #675cf0;
  --oys-purple-600: #5b56df;
  --oys-purple-700: #4f4bc7;
  --oys-violet-500: #8a5be7;
  --oys-purple-glow: rgba(105, 88, 232, .22);
  --oys-purple-gradient:
    linear-gradient(128deg, #5664d4 0%, #6260db 36%, #735bdc 68%, #875fe1 100%);
  --oys-purple-gradient-strong:
    linear-gradient(132deg, #515fd0 0%, #5f59d3 42%, #7455d7 74%, #855ade 100%);
  --oys-soft-card: rgba(255, 255, 255, .88);
  --oys-soft-border: rgba(255, 255, 255, .92);
  --oys-soft-shadow: 0 14px 38px rgba(58, 55, 104, .075), inset 0 1px 0 rgba(255, 255, 255, .96);
  --oys-comfort-gradient: var(--oys-purple-gradient);
  --watzap-gradient: var(--oys-purple-gradient);
  --wz-gradient-rich: var(--oys-purple-gradient);
}

html { background: #f4f5fa; }

body,
.install-body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 4% 3%, rgba(99, 102, 241, .09), transparent 29rem),
    radial-gradient(circle at 72% -5%, rgba(139, 92, 246, .055), transparent 35rem),
    radial-gradient(circle at 100% 38%, rgba(118, 97, 218, .085), transparent 43rem),
    linear-gradient(145deg, #fafbfc 0%, #f5f6fa 43%, #efeff8 100%);
}

/* Material putih susu dengan pantulan ungu halus. */
.panel,
.toolbar,
.page-head.boxed,
.table-wrap,
.branch-overview,
.branch-performance-table,
.product-card,
.cart,
.account-menu,
dialog,
.install-panel,
.login-left {
  border-color: var(--oys-soft-border);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(252, 251, 255, .84));
  box-shadow: var(--oys-soft-shadow);
  backdrop-filter: blur(20px) saturate(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(1.04);
}

.panel,
.table-wrap,
.branch-overview,
.page-head.boxed { transition: transform .24s cubic-bezier(.16, 1, .3, 1), border-color .24s ease, box-shadow .24s ease; }

.panel-title {
  border-bottom-color: rgba(103, 92, 240, .075);
  background: linear-gradient(110deg, rgba(248, 247, 255, .82), rgba(255, 255, 255, .68));
}

/* Navigasi lebih bersih, ikon tetap tajam. */
.sidebar {
  border-color: rgba(255, 255, 255, .96);
  background:
    radial-gradient(circle at 8% 0%, rgba(108, 99, 237, .055), transparent 190px),
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(251, 250, 255, .89));
  box-shadow: 8px 0 34px rgba(48, 46, 83, .06), inset -1px 0 0 rgba(115, 91, 220, .05);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.sidebar-brand {
  background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(247, 246, 255, .72));
}

.nav-link {
  color: #606b7f;
  border-radius: 15px;
}

.nav-link:hover {
  color: #3f3d79;
  border-color: rgba(103, 92, 240, .08);
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(245, 243, 255, .92));
  box-shadow: 0 9px 24px rgba(78, 68, 143, .075), inset 0 1px 0 #fff;
  transform: translateX(3px);
}

.nav-link.active,
.nav-link.active:hover {
  color: #302e68;
  border-color: rgba(103, 92, 240, .13);
  background:
    radial-gradient(circle at 88% 12%, rgba(139, 92, 246, .085), transparent 62px),
    linear-gradient(135deg, #fff 0%, #f1efff 100%);
  box-shadow: 0 10px 27px rgba(82, 69, 158, .11), inset 0 1px 0 #fff;
}

.nav-link.active::after {
  background: linear-gradient(180deg, #625bf6, #8b5cf6);
  box-shadow: 0 0 14px rgba(99, 91, 246, .40);
}

.nav-link.active > .icon,
.nav-link.active:hover > .icon {
  color: #fff;
  background: linear-gradient(145deg, #625bf6 0%, #7358ec 56%, #8b5cf6 100%);
  box-shadow: 0 8px 19px rgba(98, 91, 246, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.sidebar-footer {
  border-color: rgba(103, 92, 240, .13);
  background:
    radial-gradient(circle at 88% 0%, rgba(139, 92, 246, .13), transparent 76px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,238,255,.94));
  box-shadow: 0 10px 27px rgba(76, 67, 135, .10), inset 0 1px 0 #fff;
}

.sidebar-footer-mark {
  color: #625bf6;
  border-color: rgba(103, 92, 240, .13);
  background: linear-gradient(145deg, #f5f3ff, #e9e8ff);
  box-shadow: 0 6px 15px rgba(99, 91, 246, .12), inset 0 1px 0 #fff;
}

.sidebar-footer-copy strong { color: #4e4a9b; }
.sidebar-footer button:hover { color: #fff; background: var(--oys-purple-gradient); }

.topbar {
  border-color: rgba(255, 255, 255, .95);
  background: linear-gradient(110deg, rgba(255, 255, 255, .91), rgba(250, 249, 255, .84));
  box-shadow: 0 12px 34px rgba(49, 47, 83, .065), inset 0 1px 0 #fff;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.topbar .menu-btn,
.topbar .branch-select,
.topbar .module,
.account-btn {
  border-color: rgba(103, 92, 240, .08);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,246,253,.88));
  box-shadow: 0 5px 16px rgba(45, 43, 75, .045), inset 0 1px 0 #fff;
}

.topbar .menu-btn:hover,
.account-btn:hover {
  color: #5750d2;
  border-color: rgba(103, 92, 240, .18);
  background: #f5f3ff;
}

.avatar { background: linear-gradient(145deg, #625bf6, #8b5cf6); box-shadow: 0 6px 16px rgba(99,91,246,.24); }

/* Hero dashboard: lembut di bidang besar, tajam pada titik fokus. */
.dashboard-head,
.main-dashboard-head {
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .27);
  background:
    radial-gradient(circle at 10% 0%, rgba(126, 149, 255, .23), transparent 29rem),
    radial-gradient(circle at 68% 115%, rgba(175, 145, 255, .22), transparent 28rem),
    radial-gradient(circle at 91% 9%, rgba(255, 255, 255, .13), transparent 17rem),
    var(--oys-purple-gradient-strong);
  box-shadow: 0 19px 44px rgba(68, 58, 155, .20), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.dashboard-head::before {
  border-color: rgba(255, 255, 255, .07);
  filter: blur(.2px);
}

.dashboard-head::after {
  border-color: rgba(255, 255, 255, .055);
  background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 66%);
}

.dashboard-head h2,
.main-dashboard-head h2 {
  color: #fff;
  text-shadow: 0 3px 15px rgba(40, 34, 112, .20);
}

.dashboard-head p,
.main-dashboard-head .dashboard-heading-copy p { color: rgba(255, 255, 255, .82); }

.dashboard-tools {
  border-color: rgba(255, 255, 255, .19);
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 10px 28px rgba(47, 39, 120, .09);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dashboard-tools .btn.soft,
.dashboard-tools .btn.icon-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.dashboard-tools .btn.soft:hover,
.dashboard-tools .btn.icon-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.22);
  box-shadow: 0 8px 20px rgba(42,32,117,.14), inset 0 1px 0 rgba(255,255,255,.18);
}

.dashboard-tools .btn.green {
  color: #176d58;
  border-color: rgba(255, 255, 255, .78);
  background: linear-gradient(145deg, #f1fff9, #e8fbf5);
  box-shadow: 0 8px 20px rgba(16, 120, 91, .12), inset 0 1px 0 #fff;
}

/* Statistik dan grafik. */
.dashboard-stats .stat,
.stat {
  border-color: var(--oys-soft-border);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(252,251,255,.86));
  box-shadow: var(--oys-soft-shadow);
}

.gradient,
.dashboard-stats .stat.gradient {
  border-color: rgba(255, 255, 255, .23);
  background:
    radial-gradient(circle at 93% 4%, rgba(255,255,255,.15), transparent 12rem),
    radial-gradient(circle at 18% 120%, rgba(134, 153, 255, .16), transparent 15rem),
    var(--oys-purple-gradient-strong);
  box-shadow: 0 18px 42px rgba(69, 57, 160, .21), inset 0 1px 0 rgba(255,255,255,.18);
}

.dashboard-stats .stat:not(.gradient)::before { opacity: .98; }
.dashboard-stats .stat:nth-child(2)::before { background: linear-gradient(90deg, #5d66ef, #9a5cea); }
.dashboard-stats .stat:nth-child(3)::before { background: linear-gradient(90deg, #e7a820, #f7c94d); }
.dashboard-stats .stat:nth-child(4)::before { background: linear-gradient(90deg, #10a982, #42d1a8); }

.sales-chart-panel,
.chart-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(103,92,240,.045), transparent 14rem),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(252,251,255,.88));
}

.dashboard-chart-head {
  border-bottom-color: rgba(103, 92, 240, .08);
  background: linear-gradient(112deg, rgba(247,245,255,.95), rgba(255,255,255,.76));
}

.dashboard-chart-icon {
  background: linear-gradient(145deg, #625bf6 0%, #7459ed 55%, #9258e8 100%);
  box-shadow: 0 10px 23px rgba(99, 91, 246, .25), inset 0 1px 0 rgba(255,255,255,.20);
}

.sales-chart-panel .chart-area {
  background:
    radial-gradient(circle at 52% 42%, rgba(112, 99, 238, .065), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(250,249,255,.76));
}

.sales-chart-panel .chart-sales-line { stroke: #675cf0; filter: drop-shadow(0 5px 8px rgba(99, 91, 246, .25)); }
.sales-chart-panel .chart-sales-point { stroke: #675cf0; }
.chart-panel h3::before { background: linear-gradient(180deg, #675cf0, #9a5ce9); }

.donut {
  box-shadow: 0 14px 32px rgba(91, 81, 190, .12), inset 0 0 0 1px rgba(255,255,255,.76);
}
.donut::after { box-shadow: inset 0 0 0 1px rgba(103,92,240,.06), 0 7px 18px rgba(75,65,148,.06); }

.recent-row .round-icon {
  color: #625bf6;
  background: linear-gradient(145deg, #f5f3ff, #ebeaff);
  box-shadow: 0 6px 16px rgba(99,91,246,.10), inset 0 1px 0 #fff;
}

/* Tombol ungu tetap tajam pada hover dan status aktif. */
.btn.primary,
.btn.primary:hover,
.login-form .submit,
.login-form .submit:hover,
.pay-btn,
.pay-btn:hover,
.view-toggle button.active,
.view-toggle button.active:hover,
[aria-pressed="true"],
[aria-pressed="true"]:hover {
  color: #fff;
  border-color: transparent;
  background: var(--oys-purple-gradient);
  box-shadow: 0 10px 24px rgba(98, 91, 246, .25), inset 0 1px 0 rgba(255,255,255,.20);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(103, 92, 240, .56);
  box-shadow: 0 0 0 4px rgba(103, 92, 240, .10), inset 0 1px 0 #fff;
}

@media (hover: hover) and (pointer: fine) {
  .panel:hover,
  .page-head.boxed:hover,
  .table-wrap:hover,
  .dashboard-stats .stat:hover {
    border-color: rgba(255,255,255,.98);
    box-shadow: 0 20px 48px rgba(56, 52, 100, .105), inset 0 1px 0 #fff;
    transform: translateY(-2px);
  }

  .dashboard-stats .stat.gradient:hover {
    box-shadow: 0 23px 50px rgba(69, 57, 160, .27), inset 0 1px 0 rgba(255,255,255,.20);
  }
}

@media (max-width: 760px) {
  body,
  .install-body { background-attachment: scroll; }
  .sidebar { background: rgba(255, 255, 255, .97); }
  .topbar { background: rgba(255, 255, 255, .95); }
  .dashboard-head,
  .main-dashboard-head { background: var(--oys-purple-gradient-strong); }
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .table-wrap,
  .branch-overview,
  .nav-link { transition: none; }
}

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