/* OysKasir — palet dashboard terinspirasi dari tampilan login Moota. */
:root {
  --moota-blue: #4465f0;
  --moota-blue-hover: #556ff3;
  --moota-blue-deep: #354fc9;
  --moota-blue-soft: #eef2ff;
  --moota-blue-line: #dbe3ff;
  --moota-ink: #1f2937;
  --moota-muted: #6b7280;
  --moota-page: #f3f4f6;
  --moota-surface: #ffffff;
  --moota-line: #e5e7eb;
  --oys-purple-500: var(--moota-blue);
  --oys-purple-600: var(--moota-blue-deep);
  --oys-purple-700: #2f45af;
  --oys-violet-500: #6478ef;
  --oys-purple-glow: rgba(68, 101, 240, .20);
  --oys-purple-gradient: linear-gradient(128deg, #4465f0 0%, #5169ed 52%, #6578ee 100%);
  --oys-purple-gradient-strong: linear-gradient(128deg, #3f60ea 0%, #4d65e8 54%, #6073e9 100%);
  --oys-comfort-gradient: var(--oys-purple-gradient);
  --watzap-gradient: var(--oys-purple-gradient);
  --wz-gradient-rich: var(--oys-purple-gradient);
}

html { background: var(--moota-page); }

body,
.install-body {
  color: var(--moota-ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(68, 101, 240, .055), transparent 29rem),
    linear-gradient(145deg, #f8f9fb 0%, var(--moota-page) 56%, #eef0f5 100%);
}

.muted,
.sub,
.stat-foot,
.branch-overview-head p,
.data-table td p { color: var(--moota-muted); }

/* Navigasi putih bersih seperti sisi formulir Moota. */
.sidebar,
.topbar,
.sidebar nav {
  border-color: var(--moota-line);
  background: var(--moota-surface);
}

.sidebar {
  box-shadow: 8px 0 30px rgba(31, 41, 55, .055), inset -1px 0 0 #fff;
}

.sidebar-brand {
  border-bottom-color: var(--moota-line);
  background: #fff;
}

.topbar {
  box-shadow: 0 10px 28px rgba(31, 41, 55, .055), inset 0 1px 0 #fff;
}

.nav-group-label,
.nav-group:nth-child(n) .nav-group-label { color: #9ca3af; }
.nav-link { color: #596274; }

.nav-link:hover {
  color: var(--moota-blue);
  border-color: var(--moota-blue-line);
  background: #f7f9ff;
  box-shadow: 0 7px 18px rgba(68, 101, 240, .065), inset 0 1px 0 #fff;
}

.nav-link.active,
.nav-link.active:hover {
  color: #334dbd;
  border-color: #d7e0ff;
  background: linear-gradient(135deg, #f3f6ff, #e9eeff);
  box-shadow: 0 9px 22px rgba(68, 101, 240, .12), inset 0 1px 0 #fff;
}

.nav-link.active::after {
  background: var(--moota-blue);
  box-shadow: 0 0 14px rgba(68, 101, 240, .33);
}

.nav-link.active > .icon,
.nav-link.active:hover > .icon {
  color: #fff;
  background: linear-gradient(145deg, var(--moota-blue), #6076ef);
  box-shadow: 0 8px 18px rgba(68, 101, 240, .24), inset 0 1px 0 rgba(255,255,255,.22);
}

.sidebar-footer {
  border-color: var(--moota-blue-line);
  background: linear-gradient(135deg, #f8faff, #edf1ff);
  box-shadow: 0 10px 25px rgba(68, 101, 240, .09), inset 0 1px 0 #fff;
}

.sidebar-footer-mark,
.sidebar-footer button {
  color: var(--moota-blue);
  border-color: var(--moota-blue-line);
  background: #f3f6ff;
}

.sidebar-footer-copy strong { color: #354fc9; }

.topbar .menu-btn,
.topbar .branch-select,
.topbar .module,
.account-btn {
  border-color: var(--moota-line);
  background: #fff;
}

.topbar .menu-btn:hover,
.account-btn:hover,
.account-btn[aria-expanded="true"] {
  color: var(--moota-blue);
  border-color: var(--moota-blue-line);
  background: var(--moota-blue-soft);
}

.avatar {
  background: linear-gradient(145deg, var(--moota-blue), #6076ef);
  box-shadow: 0 6px 16px rgba(68, 101, 240, .22);
}

/* Hero dan statistik memakai biru Moota, tanpa ungu panas. */
.dashboard-head,
.main-dashboard-head {
  border-color: rgba(255, 255, 255, .22);
  background:
    radial-gradient(circle at 92% 4%, rgba(255,255,255,.15), transparent 18rem),
    radial-gradient(circle at 18% 120%, rgba(157, 188, 255, .16), transparent 21rem),
    var(--oys-purple-gradient-strong);
  box-shadow: 0 18px 42px rgba(68, 101, 240, .20), inset 0 1px 0 rgba(255,255,255,.20);
}

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

.dashboard-eyebrow {
  color: #fff;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
}

.gradient,
.dashboard-stats .stat.gradient {
  border-color: rgba(255, 255, 255, .22);
  background:
    radial-gradient(circle at 92% 5%, rgba(255,255,255,.15), transparent 12rem),
    var(--oys-purple-gradient-strong);
  box-shadow: 0 17px 39px rgba(68, 101, 240, .20), inset 0 1px 0 rgba(255,255,255,.18);
}

.dashboard-stats .stat:nth-child(2)::before { background: linear-gradient(90deg, #4465f0, #7487f3); }
.dashboard-stats .stat:nth-child(3)::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dashboard-stats .stat:nth-child(4)::before { background: linear-gradient(90deg, #10a982, #42d1a8); }

/* Kartu putih dan garis abu khas Moota. */
.panel,
.toolbar,
.page-head.boxed,
.table-wrap,
.branch-overview,
.branch-performance-table,
.product-card,
.chart-panel,
.sales-chart-panel,
.dashboard-stats .stat:not(.gradient) {
  color: var(--moota-ink);
  border-color: var(--moota-line);
  background: var(--moota-surface);
  box-shadow: 0 12px 32px rgba(31, 41, 55, .065), inset 0 1px 0 #fff;
}

.panel-title,
.dashboard-chart-head {
  border-color: var(--moota-line);
  background: linear-gradient(110deg, #f9fafb, #fff);
}

.section-kicker,
.money.positive,
a { color: var(--moota-blue); }

.branch-name-cell > span,
.dashboard-chart-icon {
  background: linear-gradient(145deg, var(--moota-blue), #6076ef);
  box-shadow: 0 8px 20px rgba(68, 101, 240, .22);
}

.sales-chart-panel .chart-sales-line {
  stroke: var(--moota-blue);
  filter: drop-shadow(0 5px 8px rgba(68, 101, 240, .22));
}

.sales-chart-panel .chart-sales-point { stroke: var(--moota-blue); }
.chart-panel h3::before { background: var(--moota-blue); }
.donut { box-shadow: 0 13px 30px rgba(68, 101, 240, .11), inset 0 0 0 1px #fff; }

/* Tombol, fokus, dan kontrol. */
.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: var(--moota-blue);
  background: var(--moota-blue);
  box-shadow: 0 9px 22px rgba(68, 101, 240, .22), inset 0 1px 0 rgba(255,255,255,.18);
}

.btn.primary:hover,
.login-form .submit:hover,
.pay-btn:hover { background: var(--moota-blue-hover); }

.btn.soft {
  color: #3c58cf;
  border-color: var(--moota-blue-line);
  background: var(--moota-blue-soft);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--moota-blue);
  box-shadow: 0 0 0 3px rgba(68, 101, 240, .12), inset 0 1px 0 #fff;
}

.account-role {
  color: #354fc9;
  border-color: var(--moota-blue-line);
  background: var(--moota-blue-soft);
}

@media (hover: hover) and (pointer: fine) {
  .dashboard-stats .stat.gradient:hover {
    box-shadow: 0 22px 47px rgba(68, 101, 240, .25), inset 0 1px 0 rgba(255,255,255,.20);
  }
}

@media (max-width: 760px) {
  .dashboard-head,
  .main-dashboard-head { background: var(--oys-purple-gradient-strong); }
}

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