/* Tema visual OysKasir dari backup_fix1: hanya presentasi, tanpa logika aplikasi backup. */
:root {
  --teal: #5c67f2;
  --teal-dark: #4f46e5;
  --ink: #1e293b;
  --muted: #64748b;
  --line: rgba(148, 163, 184, .18);
  --bg: #f6f7fb;
  --oys-comfort-bg: #f6f7fb;
  --oys-comfort-surface: rgba(255, 255, 255, .84);
  --oys-comfort-surface-solid: #fff;
  --oys-comfort-soft: #f7f8fc;
  --oys-comfort-line: rgba(148, 163, 184, .18);
  --oys-comfort-purple: #5c67f2;
  --oys-comfort-purple-dark: #4f46e5;
  --oys-comfort-purple-soft: #eeefff;
  --oys-comfort-shadow: 0 8px 32px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .82);
  --oys-comfort-shadow-hover: 0 15px 40px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
  --oys-comfort-gradient: linear-gradient(125deg, #5c67f2 0%, #6961ef 52%, #8b5cf6 100%);
  --watzap-indigo: #5c67f2;
  --watzap-purple: #8b5cf6;
  --watzap-ink: #1e293b;
  --watzap-muted: #64748b;
  --watzap-gradient: var(--oys-comfort-gradient);
  --wz-gradient-rich: var(--oys-comfort-gradient);
}

html { background: #f6f7fb; }

body,
.install-body {
  color: #1e293b;
  background:
    radial-gradient(circle at 7% 0%, rgba(99, 102, 241, .075), transparent 31rem),
    radial-gradient(circle at 96% 13%, rgba(139, 92, 246, .075), transparent 39rem),
    linear-gradient(145deg, #f8f9fc 0%, #f4f5f9 50%, #eeecf7 100%);
  background-attachment: fixed;
}

h1, h2, h3, h4,
.panel-title h3,
.page-head h2,
.branch-overview-head h3 { color: #1e293b; }

.sub, .muted, .stat-foot, .form-section > p,
.data-table td p, .recent-row p, .cart-details { color: #69758a; }

::selection { color: #312e81; background: #e4e4ff; }
* { scrollbar-color: rgba(92, 103, 242, .30) transparent; }
::-webkit-scrollbar-thumb { background: rgba(92, 103, 242, .28); }

/* Kartu dan permukaan dari tema backup. */
.panel,
.toolbar,
.page-head.boxed,
.table-wrap,
.branch-overview,
.branch-performance-table,
.product-card,
.cart,
.account-menu,
dialog,
.install-panel,
.login-left {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.panel-title { background: rgba(248, 250, 252, .72); }
.toolbar { background: rgba(255, 255, 255, .80); }

input, select, textarea {
  color: #1e293b;
  border-color: rgba(148, 163, 184, .25);
  background: rgba(255, 255, 255, .88);
}

input:hover, select:hover, textarea:hover { border-color: rgba(92, 103, 242, .32); background: #fff; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(92, 103, 242, .58);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(92, 103, 242, .10);
}

.btn {
  color: #475569;
  border-color: rgba(148, 163, 184, .22);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 4px 14px rgba(30, 41, 59, .04);
}

.btn:hover { color: #4f46e5; border-color: rgba(92, 103, 242, .26); background: #f7f7ff; }
.btn.primary, .login-form .submit, .pay-btn {
  color: #fff;
  border-color: transparent;
  background: var(--oys-comfort-gradient);
  box-shadow: 0 9px 22px rgba(92, 103, 242, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn.primary:hover, .login-form .submit:hover, .pay-btn:hover {
  color: #fff;
  background: linear-gradient(125deg, #4f58e5, #7c4fe7);
  box-shadow: 0 13px 28px rgba(92, 103, 242, .30);
}
.btn.soft { color: #5c67f2; border-color: #dedfff; background: #f5f5ff; }
.btn.green { color: #087f5b; border-color: #d4f3e8; background: #effcf8; }
.btn.amber { color: #a16207; border-color: #f7e7bc; background: #fff9ea; }
.btn.danger { color: #b42338; border-color: #f4d7dc; background: #fff2f4; }
.btn.text { color: #5c67f2; }

/* Navigasi: ukuran, kaca, menu aktif, dan ikon mengikuti backup. */
.sidebar {
  border-color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .85);
  box-shadow: 7px 0 32px rgba(30, 41, 59, .055), inset -1px 0 0 rgba(148, 163, 184, .08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sidebar-brand,
.topbar { background: rgba(255, 255, 255, .84); }

.sidebar-brand { border-bottom-color: rgba(148, 163, 184, .11); }
.sidebar-brand small { color: #64748b; }
.nav-group-label { color: #9aa4b4; letter-spacing: .12em; }

.nav-link {
  min-height: 46px;
  color: #64748b;
  border-color: transparent;
  border-radius: 16px;
  font-weight: 700;
  transition: color .22s ease, background-color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.nav-link:hover {
  color: #1e293b;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .04);
  transform: translateX(3px);
}

.nav-link.active {
  color: #1e293b;
  border-color: rgba(92, 103, 242, .10);
  background: linear-gradient(135deg, #fff 0%, #f2f1ff 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .04), inset 0 1px 0 #fff;
}

.nav-link.active::after {
  left: -1px;
  width: 4px;
  background: #5c67f2;
  box-shadow: 0 0 12px rgba(92, 103, 242, .34);
}

.nav-link > .icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 10px;
  background: #eef2ff;
  color: #6366f1;
  box-shadow: 0 5px 14px rgba(99, 102, 241, .12), inset 0 1px 0 #fff;
  filter: drop-shadow(0 3px 5px rgba(99, 102, 241, .18));
}

.nav-link[data-page="global"] > .icon { color: #6366f1; background: #eef2ff; filter: drop-shadow(0 3px 5px rgba(99,102,241,.30)); }
.nav-link[data-page="dashboard"] > .icon,
.nav-link[data-page="pos"] > .icon,
.nav-link[data-page="products"] > .icon,
.nav-link[data-page="stock"] > .icon { color: #3b82f6; background: #eff6ff; filter: drop-shadow(0 3px 5px rgba(59,130,246,.30)); }
.nav-link[data-page="transactions"] > .icon,
.nav-link[data-page="opname"] > .icon,
.nav-link[data-page="opname-reports"] > .icon { color: #10b981; background: #ecfdf5; filter: drop-shadow(0 3px 5px rgba(16,185,129,.30)); }
.nav-link[data-page="shifts"] > .icon,
.nav-link[data-page="customers"] > .icon,
.nav-link[data-page="reports"] > .icon { color: #f59e0b; background: #fffbeb; filter: drop-shadow(0 3px 5px rgba(245,158,11,.30)); }
.nav-link[data-page="categories"] > .icon,
.nav-link[data-page="users"] > .icon,
.nav-link[data-page="settings"] > .icon,
.nav-link[data-page="branches"] > .icon { color: #8b5cf6; background: #f5f3ff; filter: drop-shadow(0 3px 5px rgba(139,92,246,.30)); }
.nav-link[data-page="billing"] > .icon { color: #ec4899; background: #fdf2f8; filter: drop-shadow(0 3px 5px rgba(236,72,153,.30)); }

.nav-link.active > .icon {
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
  background: linear-gradient(135deg, #5c67f2, #8b5cf6);
  box-shadow: 0 7px 17px rgba(92, 103, 242, .24), inset 0 1px 0 rgba(255, 255, 255, .24);
  filter: none;
  transform: scale(1.03);
}

.sidebar-footer {
  color: #5753b7;
  border-color: rgba(92, 103, 242, .12);
  background:
    radial-gradient(circle at 90% 12%, rgba(139, 92, 246, .10), transparent 72px),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(242,241,255,.94));
  box-shadow: 0 8px 26px rgba(92, 103, 242, .08), inset 0 1px 0 #fff;
}
.sidebar-footer::after { border-color: rgba(92, 103, 242, .055); }
.sidebar-footer-mark { color: #5c67f2; border-color: #e2e3ff; background: #f1f1ff; }
.sidebar-footer-copy { color: #5652aa; }
.sidebar-footer-copy small { color: #8b91a4; }
.sidebar-footer button { color: #5c67f2; border-color: #e1e2fb; background: rgba(255, 255, 255, .82); }

.topbar {
  border-color: rgba(255, 255, 255, .94);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 32px rgba(30, 41, 59, .055), inset 0 1px 0 #fff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar .menu-btn,
.topbar .branch-select,
.topbar .module,
.account-btn {
  color: #475569;
  border-color: rgba(148, 163, 184, .15);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 4px 14px rgba(30, 41, 59, .035);
}
.avatar { color: #fff; background: linear-gradient(135deg, #5c67f2, #8b5cf6); }

/* Dashboard mengikuti warna dan kedalaman kartu pada backup. */
.dashboard-head,
.main-dashboard-head {
  border-color: rgba(255, 255, 255, .26);
  background:
    radial-gradient(circle at 87% 7%, rgba(255, 255, 255, .14), transparent 15rem),
    radial-gradient(circle at 100% 115%, rgba(255, 255, 255, .10), transparent 14rem),
    linear-gradient(118deg, #5965c7 0%, #6964c9 51%, #7767cf 100%);
  box-shadow: 0 18px 42px rgba(79, 70, 160, .17), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.dashboard-head h2, .main-dashboard-head h2 { color: #fff; }
.dashboard-head p, .main-dashboard-head .dashboard-heading-copy p { color: rgba(255, 255, 255, .80); }
.dashboard-eyebrow { color: rgba(255,255,255,.9); background: rgba(255,255,255,.10); }
.dashboard-tools { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.10); }

.dashboard-stats .stat,
.stat {
  border-color: rgba(255,255,255,.90);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255,255,255,.9);
}
.gradient,
.dashboard-stats .stat.gradient {
  border-color: rgba(255,255,255,.20);
  background:
    radial-gradient(circle at 93% 7%, rgba(255,255,255,.12), transparent 10rem),
    linear-gradient(125deg, #5965c7 0%, #6e65cb 58%, #7867d0 100%);
  box-shadow: 0 16px 36px rgba(79, 70, 160, .17), inset 0 1px 0 rgba(255,255,255,.15);
}
.dashboard-stats .stat-value, .stat-value { color: #1e293b; }
.dashboard-stats .gradient .stat-value, .gradient .stat-value { color: #fff; }
.dashboard-stats .stat-label, .stat-label { color: #64748b; }
.dashboard-stats .gradient .stat-label, .gradient .stat-label { color: rgba(255,255,255,.78); }

.branch-overview {
  border-color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.62);
  box-shadow: 0 12px 34px rgba(30,41,59,.055), inset 0 1px 0 #fff;
}
.branch-performance-table { border-color: rgba(92,103,242,.08); background: rgba(255,255,255,.79); }
.branch-performance-table .data-table th { color: #788397; background: rgba(246,247,253,.80); }
.data-table { color: #3c4658; }
.data-table th { color: #6f7a8d; background: rgba(246,247,251,.86); }
.data-table td { border-bottom-color: rgba(148,163,184,.13); }
.data-table tbody tr:hover { background: rgba(238,239,255,.62); }
.branch-name-cell > span { background: linear-gradient(135deg, #5c67f2, #8b5cf6); }

/* POS, dialog, login, dan installer memakai material yang sama. */
.main.pos-main {
  background:
    radial-gradient(circle at 82% 2%, rgba(139,92,246,.07), transparent 36%),
    linear-gradient(145deg, #f8f9fc 0%, #f4f5f9 52%, #eeecf7 100%);
}
.pos-catalog, .pos-tools, .pos-search { border-color: rgba(148,163,184,.16); background: rgba(255,255,255,.78); }
.pos-products .marketplace-card,
.marketplace-content, .cart-row, .cart-items, .cart-controls, .cart-bottom, .customer-box { border-color: rgba(148,163,184,.16); background: rgba(255,255,255,.92); }
.pos-products .marketplace-card { box-shadow: 0 7px 22px rgba(30,41,59,.055); }
.cart-header, .view-toggle button.active, .pos-products .marketplace-promo,
.pos-products .marketplace-card .marketplace-add { background: var(--oys-comfort-gradient); }
.pos-products .marketplace-card .product-price, .bill strong { color: #5c67f2; }
.bill { border-color: #deddf4; background: linear-gradient(125deg, #f3f1ff, #fffaf5); }

dialog { color: #1e293b; background: #fff; box-shadow: 0 24px 70px rgba(30,41,59,.22); }
dialog::backdrop { background: rgba(30,41,59,.42); backdrop-filter: blur(5px); }
.modal-head { background: var(--oys-comfort-gradient); }
.modal-body, .account-menu, .account-menu::before { background: #fff; }

.login-left, .install-panel {
  border-color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.90);
  box-shadow: 0 22px 58px rgba(30,41,59,.11), inset 0 1px 0 #fff;
}
.login-form input, .login-session, .demo-accounts button, .login-info { border-color: rgba(148,163,184,.18); background: #f8f9fc; }
.demo-accounts button:hover, .login-info:hover { border-color: rgba(92,103,242,.20); background: #f1f1ff; }
.install-help pre { color: #475569; background: #f1f3f8; }

@media (hover: hover) and (pointer: fine) {
  .panel:hover, .page-head.boxed:hover, .table-wrap:hover,
  .dashboard-stats .stat:hover, .pos-products .marketplace-card:not(.out-of-stock):hover {
    border-color: rgba(92,103,242,.16);
    box-shadow: 0 15px 40px rgba(0,0,0,.08), inset 0 1px 0 #fff;
  }
}

@media (max-width: 760px) {
  body, .install-body { background-attachment: scroll; }
  .sidebar { background: rgba(255,255,255,.96); }
  .topbar { background: rgba(255,255,255,.94); }
}

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