/* Navigasi OysPanel untuk OysKasir — dimuat paling akhir. */
:root {
  --oys-nav-primary: #5865e8;
  --oys-nav-primary-dark: #4652cf;
  --oys-nav-title: #172033;
  --oys-nav-text: #526176;
  --oys-nav-muted: #8a96a8;
  --oys-nav-line: #e7e9f3;
  --oys-nav-surface: #fffefd;
  --oys-nav-soft: #f5f6fb;
  --oys-nav-ease: cubic-bezier(.2, .8, .2, 1);
}

.sidebar {
  color: var(--oys-nav-text);
  background:
    radial-gradient(circle at 10% 1%, rgba(101, 88, 232, .055), transparent 150px),
    linear-gradient(180deg, #fff 0%, var(--oys-nav-surface) 100%);
  border-color: rgba(218, 222, 235, .92);
  box-shadow: 8px 0 34px rgba(31, 38, 69, .055);
  transition: width .3s var(--oys-nav-ease), transform .32s var(--oys-nav-ease), box-shadow .3s ease;
}

.sidebar-brand {
  height: 70px;
  padding: 12px 17px;
  gap: 11px;
  border-color: rgba(229, 232, 241, .85);
  background: rgba(255, 255, 255, .82);
}

.sidebar-brand img {
  width: 43px;
  height: 43px;
  border: 2px solid rgba(255, 255, 255, .96);
  border-radius: 14px;
  box-shadow: 0 7px 20px rgba(72, 82, 183, .16);
  transition: transform .38s var(--oys-nav-ease), box-shadow .38s ease;
}

.sidebar-brand strong {
  color: var(--oys-nav-title);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.sidebar-brand .brand-name span { color: var(--oys-nav-primary); }
.sidebar-brand small { color: var(--oys-nav-muted); font-size: 9px; font-weight: 650; letter-spacing: .02em; }

.sidebar nav {
  min-height: 0;
  padding: 13px 10px 26px;
  scrollbar-width: thin;
  scrollbar-color: #cbc5ef transparent;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.sidebar nav::-webkit-scrollbar { width: 5px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: #cbc5ef; border-radius: 20px; }
.sidebar nav:hover::-webkit-scrollbar-thumb { background: #a99fe4; }

.nav-group { margin: 14px 0 17px; }
.nav-group-label {
  margin: 0 10px 8px;
  padding: 0;
  border: 0;
  color: #99a2b3 !important;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .09em;
}

.nav-link {
  --nav-tone: #60708a;
  --nav-soft: #f1f4f8;
  --nav-border: #e2e7ee;
  position: relative;
  min-height: 44px;
  margin: 2px 0;
  padding: 6px 9px;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--oys-nav-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  transition:
    color .24s ease,
    background-color .24s ease,
    border-color .24s ease,
    box-shadow .28s ease,
    transform .28s var(--oys-nav-ease);
}

.nav-link::before {
  content: '';
  position: absolute;
  inset: 5px auto 5px 0;
  width: 3px;
  border-radius: 0 8px 8px 0;
  background: var(--nav-tone);
  transform: scaleY(0);
  opacity: 0;
  transition: transform .28s var(--oys-nav-ease), opacity .2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.62) 48%, transparent 76%);
  transform: translateX(-130%);
  pointer-events: none;
}

.nav-link > .icon {
  box-sizing: border-box;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  padding: 7px;
  border: 1px solid var(--nav-border);
  border-radius: 10px;
  color: var(--nav-tone);
  background: var(--nav-soft);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--nav-tone) 13%, transparent), inset 0 1px 0 rgba(255,255,255,.9);
  transform-origin: 50% 60%;
  transition: color .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .28s ease;
}

.nav-link[data-page="global"] { --nav-tone:#6558e8; --nav-soft:#efedff; --nav-border:#ddd8ff; }
.nav-link[data-page="dashboard"] { --nav-tone:#3478f6; --nav-soft:#eaf3ff; --nav-border:#d3e6ff; }
.nav-link[data-page="pos"] { --nav-tone:#7c4dff; --nav-soft:#f1edff; --nav-border:#e0d8ff; }
.nav-link[data-page="transactions"] { --nav-tone:#10a879; --nav-soft:#e7f9f2; --nav-border:#ccefe2; }
.nav-link[data-page="shifts"] { --nav-tone:#e9a117; --nav-soft:#fff7df; --nav-border:#f8e8b5; }
.nav-link[data-page="customers"] { --nav-tone:#d78b0b; --nav-soft:#fff6e3; --nav-border:#f4e2b8; }
.nav-link[data-page="categories"] { --nav-tone:#8b5cf6; --nav-soft:#f3efff; --nav-border:#e3dafd; }
.nav-link[data-page="products"] { --nav-tone:#3478f6; --nav-soft:#eaf3ff; --nav-border:#d3e6ff; }
.nav-link[data-page="stock"] { --nav-tone:#268bdc; --nav-soft:#eaf6ff; --nav-border:#d2eaff; }
.nav-link[data-page="opname"] { --nav-tone:#10a879; --nav-soft:#e7f9f2; --nav-border:#ccefe2; }
.nav-link[data-page="reports"] { --nav-tone:#e4a21b; --nav-soft:#fff8e5; --nav-border:#f5e5b8; }
.nav-link[data-page="opname-reports"] { --nav-tone:#12a57d; --nav-soft:#e8f9f3; --nav-border:#ccefe2; }
.nav-link[data-page="branches"] { --nav-tone:#5865e8; --nav-soft:#eef0ff; --nav-border:#daddff; }
.nav-link[data-page="users"] { --nav-tone:#b259e1; --nav-soft:#f8edff; --nav-border:#ead4f8; }
.nav-link[data-page="settings"] { --nav-tone:#7657dc; --nav-soft:#f1eeff; --nav-border:#dfd9f8; }
.nav-link[data-page="billing"] { --nav-tone:#e06293; --nav-soft:#fff0f6; --nav-border:#f6d8e5; }

.nav-link:hover {
  color: var(--nav-tone);
  border-color: color-mix(in srgb, var(--nav-tone) 12%, transparent);
  background: color-mix(in srgb, var(--nav-soft) 72%, white);
  box-shadow: 0 9px 24px color-mix(in srgb, var(--nav-tone) 9%, transparent);
  transform: translateX(3px);
}

.nav-link:hover::after { animation: oysNavSweep .72s ease both; }
.nav-link:hover > .icon { animation: oysNavWiggle .52s var(--oys-nav-ease) both; }

.nav-link.active {
  color: var(--nav-tone);
  border-color: color-mix(in srgb, var(--nav-tone) 18%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--nav-soft) 92%, white), rgba(255,255,255,.9));
  box-shadow: 0 9px 24px color-mix(in srgb, var(--nav-tone) 12%, transparent), inset 0 1px 0 #fff;
  font-weight: 760;
}

.nav-link.active::before { opacity: 1; transform: scaleY(1); }
.nav-link.active > .icon {
  color: #fff;
  border-color: var(--nav-tone);
  background: linear-gradient(145deg, color-mix(in srgb, var(--nav-tone) 80%, white), var(--nav-tone));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--nav-tone) 26%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  animation: oysNavActivePulse 2.6s ease-in-out infinite;
}

.nav-link .badge {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--nav-tone) 16%, transparent);
  border-radius: 6px;
  color: var(--nav-tone);
  background: color-mix(in srgb, var(--nav-soft) 88%, white);
  font-size: 8px;
  font-weight: 800;
}

.sidebar-footer {
  min-height: 62px;
  margin: 0 10px 10px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 0, rgba(255,255,255,.22), transparent 68px),
    linear-gradient(135deg, #5264d9 0%, #6b5bdc 56%, #805cd5 100%);
  box-shadow: 0 12px 27px rgba(70,82,182,.21), inset 0 1px 0 rgba(255,255,255,.25);
}

.sidebar-footer::before {
  content: '';
  position: absolute;
  inset: -30% auto -30% -70%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.sidebar-footer:hover::before { animation: oysFooterShimmer .9s ease both; }
.sidebar-footer button { transition: transform .26s var(--oys-nav-ease), background-color .22s ease, box-shadow .22s ease; }

.topbar {
  height: 68px;
  border-color: rgba(225, 228, 238, .92);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 9px 28px rgba(31,38,69,.055);
  transition: left .3s var(--oys-nav-ease), padding .3s ease, box-shadow .3s ease;
}

.topbar .menu-btn,
.topbar .branch-select,
.topbar .module,
.account-btn {
  border: 1px solid #e7e9f2;
  background: #fff;
  box-shadow: 0 5px 14px rgba(31,38,69,.045);
  transition: border-color .22s ease, box-shadow .25s ease, transform .25s var(--oys-nav-ease), background-color .22s ease;
}

.topbar .menu-btn:hover,
.account-btn:hover {
  color: var(--oys-nav-primary);
  border-color: #dcdffa;
  background: #f9f9ff;
  box-shadow: 0 8px 20px rgba(88,101,232,.11);
  transform: translateY(-1px);
}

.topbar .menu-btn:active,
.account-btn:active,
.nav-link:active { transform: scale(.975); }

.main { transition: margin-left .3s var(--oys-nav-ease), padding .3s ease; }

.collapsed .sidebar-brand img { width: 39px; height: 39px; }
.collapsed .nav-link { justify-content: center; padding-inline: 5px; }
.collapsed .nav-link > .icon { width: 32px; height: 32px; flex-basis: 32px; }
.collapsed .nav-link::before { inset-block: 6px; }
.collapsed .sidebar-footer { margin-inline: 7px; padding: 8px; }
.collapsed .sidebar-footer button { transition: transform .3s var(--oys-nav-ease), background-color .22s ease; }

.sidebar.open + .backdrop { animation: oysBackdropIn .25s ease both; backdrop-filter: blur(3px); }

.nav-link.nav-tap > .icon { animation: oysNavTap .38s var(--oys-nav-ease) both; }

@keyframes oysNavWiggle {
  0% { transform: translateY(0) scale(1) rotate(0); }
  30% { transform: translateY(-2px) scale(1.08) rotate(-11deg); }
  58% { transform: translateY(-2px) scale(1.08) rotate(8deg); }
  78% { transform: translateY(-1px) scale(1.04) rotate(-4deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes oysNavActivePulse {
  0%, 78%, 100% { transform: scale(1); }
  86% { transform: scale(1.08); }
  93% { transform: scale(.99); }
}

@keyframes oysNavTap {
  0% { transform: scale(1); }
  45% { transform: scale(.86) rotate(-5deg); }
  100% { transform: scale(1); }
}

@keyframes oysNavSweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes oysFooterShimmer { from { left: -70%; } to { left: 140%; } }
@keyframes oysBackdropIn { from { opacity: 0; } to { opacity: 1; } }

@media (hover:hover) and (pointer:fine) {
  .sidebar-brand:hover img { transform: translateY(-2px) scale(1.035); box-shadow: 0 10px 24px rgba(72,82,183,.2); }
}

@media (max-width:960px) {
  .sidebar-brand { padding-inline: 13px; }
  .nav-link { padding-inline: 7px; gap: 8px; }
}

@media (max-width:760px) {
  .sidebar {
    width: min(268px, 86vw);
    transform: translateX(-108%);
    box-shadow: 18px 0 50px rgba(23,32,51,.16);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-brand { height: 64px; padding-inline: 16px; }
  .sidebar nav { padding: 11px 10px 24px; }
  .nav-link { padding-inline: 9px; }
  .topbar { height: 64px; }
  .collapsed .sidebar { width: min(268px, 86vw); }
  .collapsed .nav-link { justify-content: flex-start; padding-inline: 9px; }
  .collapsed .nav-link > .icon { width: 31px; height: 31px; flex-basis: 31px; }
}

@media (prefers-reduced-motion:reduce) {
  .sidebar,
  .sidebar-brand img,
  .nav-link,
  .nav-link::before,
  .nav-link::after,
  .nav-link > .icon,
  .sidebar-footer::before,
  .sidebar-footer button,
  .topbar,
  .topbar .menu-btn,
  .account-btn,
  .main,
  .sidebar.open + .backdrop {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}