:root {
  --sidebar-width: 238px;
}

body > nav {
  width: var(--sidebar-width) !important;
  padding: 22px 15px 18px !important;
  gap: 5px !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(42, 150, 94, .22), transparent 28%),
    linear-gradient(180deg, #073f29 0%, #052f21 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 10px 0 35px rgba(5, 38, 25, .12) !important;
}

body > nav strong {
  position: relative !important;
  margin: 0 3px 17px !important;
  padding: 5px 10px 20px 48px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .11) !important;
  font-size: 23px !important;
  line-height: 1.05 !important;
  letter-spacing: .8px !important;
}

body > nav strong::before {
  content: "S";
  position: absolute;
  left: 2px;
  top: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(145deg, #2da56b, #11844e);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
}

body > nav strong::after {
  margin-top: 6px !important;
  color: #9cc8b1 !important;
  font-size: 9px !important;
  letter-spacing: 1.7px !important;
}

body > nav a {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  color: #cfe3d8 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

body > nav a::before {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  color: #acd1bc;
  font-size: 15px;
  font-weight: 800;
}

body > nav a:nth-of-type(1)::before { content: "⌂"; }
body > nav a:nth-of-type(2)::before { content: "▤"; }
body > nav a:nth-of-type(3)::before { content: "♙"; }
body > nav a:nth-of-type(4)::before { content: "□"; }
body > nav a:nth-of-type(5)::before { content: "₹"; }
body > nav a:nth-of-type(6)::before { content: "▥"; }
body > nav a:nth-of-type(7)::before { content: "◉"; }
body > nav a:nth-of-type(8)::before { content: "⚙"; }
body > nav a:nth-of-type(9)::before { content: "×"; }

body > nav a:hover {
  transform: translateX(2px) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}

body > nav a:hover::before {
  background: rgba(255, 255, 255, .13);
  color: #fff;
}

body.page-dashboard > nav a:nth-of-type(1),
body.page-new_bill > nav a:nth-of-type(2),
body.page-edit_bill > nav a:nth-of-type(2),
body.page-bills > nav a:nth-of-type(2),
body.page-view_bill > nav a:nth-of-type(2),
body.page-customers > nav a:nth-of-type(3),
body.page-products > nav a:nth-of-type(4),
body.page-payments > nav a:nth-of-type(5),
body.page-ledger > nav a:nth-of-type(6),
body.page-reports > nav a:nth-of-type(6),
body.page-whatsapp_reminders > nav a:nth-of-type(7),
body.page-settings > nav a:nth-of-type(8) {
  border-color: rgba(134, 220, 174, .18) !important;
  background: linear-gradient(90deg, rgba(43, 164, 102, .28), rgba(43, 164, 102, .10)) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 #4dcb88 !important;
}

body.page-dashboard > nav a:nth-of-type(1)::before,
body.page-new_bill > nav a:nth-of-type(2)::before,
body.page-edit_bill > nav a:nth-of-type(2)::before,
body.page-bills > nav a:nth-of-type(2)::before,
body.page-view_bill > nav a:nth-of-type(2)::before,
body.page-customers > nav a:nth-of-type(3)::before,
body.page-products > nav a:nth-of-type(4)::before,
body.page-payments > nav a:nth-of-type(5)::before,
body.page-ledger > nav a:nth-of-type(6)::before,
body.page-reports > nav a:nth-of-type(6)::before,
body.page-whatsapp_reminders > nav a:nth-of-type(7)::before,
body.page-settings > nav a:nth-of-type(8)::before {
  background: #2aa566 !important;
  color: #fff !important;
}

body > nav a:last-child {
  margin-top: auto !important;
  border-color: rgba(255, 255, 255, .07) !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #ffc5c0 !important;
}

body > nav a:last-child::before {
  background: rgba(207, 66, 55, .15);
  color: #ffb6ae;
}

.wrap {
  margin-left: var(--sidebar-width) !important;
  padding: 32px 34px !important;
}

@media (max-width: 900px) {
  :root {
    --sidebar-width: 258px;
  }

  body > nav {
    width: var(--sidebar-width) !important;
    padding: 20px 14px 16px !important;
  }

  .wrap {
    margin-left: 0 !important;
    padding: 78px 12px 26px !important;
  }

  body > nav strong {
    font-size: 22px !important;
  }
}

@media print {
  body > nav,
  .menu-toggle {
    display: none !important;
  }

  .wrap {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


@media (max-width: 900px) {
  body.nav-open { overflow: hidden; }
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(5, 32, 22, .32);
    backdrop-filter: blur(1px);
  }
  body.nav-open > nav,
  body.nav-open .menu-toggle { z-index: 80; }
}