/* theme/almondb/style/sidenav.css
   Final consolidated sidenav CSS for Almondb theme
   - Desktop vertical sidebar (260px)
   - Collapsed desktop (72px)
   - Mobile: hidden by default; when opened -> 2-column card/grid
   - Logo/topbar alignment included
   Blue 
#02B4CA
Green
#43D6A4
Black 
#303030
White
#F3F2E3
Pink
#E75899
Yellow
#FFD160
RED
#F15D4E
  --firki-brand-white: #f3f2e3;
*/

/* =========================
   Variables (custom props)
   ========================= */
:root {
  --almondb-topbar-height: 55px;
  --almondb-sidenav-width: 227px;
  --almondb-sidenav-collapsed-width: 72px;
  --almondb-sidenav-z: 1040;

  /* Colors */
  /* --almondb-sidenav-bg: #3a1e6b; */
  --firki-brand-color: #02b4ca;
  --firki-brand-blue: #02b4ca;
  --firki-brand-green: #43d6a4;
  --firki-brand-black: #303030;

  --firki-brand-white: #f5f5f5;
  --firki-brand-pink: #e75899;
  --firki-brand-purewhite: #fff;
  --firki-brand-yellow: #ffd160;
  --firki-brand-yellow-light: #fbf2c1;
  --firki-brand-red: #f15d4e;
  --firki-brand-muted-text: #a3a3a3;
  --firki-brand-border-radious: 1.8rem;
  --firki-brand-border-color: #a3a3a3;
  --firki-brand-heading-size: 18px;
  --firki-brand-text-size: 14px;
  --almondb-sidenav-bg: radial-gradient(
    457.92% 145.97% at 49.77% 145.97%,
    #303030 0%,
    #303030 100%
  );

  --almondb-sidenav-bg-white: radial-gradient(
    457.92% 145.97% at 49.77% 145.97%,
    #fff 0%,
    #fff 100%
  );

  --almondb-sidenav-foreground: #ffffff;
  --almondb-sidenav-hover-bg: #02b4ca;
  --almondb-sidenav-hover-color: #fff;
  --almondb-sidenav-border: rgba(255, 255, 255, 0.08);
  --almondb-sidenav-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  --Colors-Gray-gray600-base13: #7a7a7a;
  --Colors-Gray-gray85-special: #ededed;
  --Colors-Base-white-base01: #ffffff;
  --bs-nav-tabs-link-active-bg: #02b4ca;
}

/* =========================
   Base / Desktop positioning
   ========================= */
.almondb-sidenav {
  position: fixed !important;
  left: 0 !important;
  /*top: var(--almondb-topbar-height) !important;  starts below topbar */
  top: 0 !important; /* <-- changed: sidenav begins at top */
  height: 100vh !important; /* full viewport height */
  /*height: calc(
    100vh - var(--almondb-topbar-height)
  ) !important;  fill remaining height */
  width: var(--almondb-sidenav-width) !important;
  background: var(--almondb-sidenav-bg);
  color: var(--almondb-sidenav-foreground);
  border-right: 1px solid var(--almondb-sidenav-border);
  z-index: var(--almondb-sidenav-z);
  display: flex;
  flex-direction: column;
  transition:
    width 220ms ease,
    transform 220ms ease;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow:
    rgba(0, 0, 0, 0.07) 0px 1px 2px,
    rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px,
    rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px,
    rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

/* inner scroll area */
.almondb-sidenav .sidenav-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.almondb-sidenav .sidenav-inner::-webkit-scrollbar {
  width: 7px;
}
.almondb-sidenav .sidenav-inner::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
}

/* overlay (works whether overlay is inside nav or adjacent) */
.almondb-sidenav .sidenav-overlay,
.almondb-sidenav + .sidenav-overlay {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--almondb-topbar-height);
  height: calc(100vh - var(--almondb-topbar-height));
  background: rgba(0, 0, 0, 0.45);
  z-index: calc(var(--almondb-sidenav-z) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* show overlay when sidenav has .open */
.almondb-sidenav.open .sidenav-overlay,
.almondb-sidenav.open + .sidenav-overlay {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   Top brand area (logo) - aligned with sidenav width
   ========================= */
.almondb-sidenav .sidenav-top {
  padding: 0.2rem;
  text-align: center;
  /*border-bottom: 1px solid rgba(255, 255, 255, 0.08); */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* logo image inside sidenav */
.almondb-sidenav .sidenav-logo {
  max-width: calc(
    var(--almondb-sidenav-width) - 24px
  ); /* leave small horizontal padding */
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Brand image inside sidenav */
.sidenav-brand {
  height: 53px;
}
.almondb-sidenav .sidenav-brand img,
.navbar .navbar-brand img.logo {
  /* max-width: 50%; */
  height: auto;
  object-fit: contain;
  display: block;
}

/* Navbar brand wrapper aligned to same width as sidenav 
.navbar .navbar-brand {
  /* position: relative;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: var(--almondb-sidenav-width);
  min-height: var(--almondb-topbar-height);
  margin: 0;
  padding: 0.25rem 0.5rem;
  box-sizing: border-box;
  background: var(--almondb-sidenav-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
}
*/
/* .navbar.fixed-top {
  left: var(--almondb-sidenav-width);
} */

/* === Navbar shift to follow sidenav width (desktop only) === */
/* === Navbar shift to follow sidenav width (desktop only)
   Works when the has-sidenav / sidenav-collapsed classes
   are on either #page-wrapper or <body> (both supported) === */

@media (min-width: 992px) {
  /* --- Collapsed (sidenav narrow): match collapsed width
       note: selector covers both #page-wrapper.sidenav-collapsed.has-sidenav
       and body.sidenav-collapsed.has-sidenav for maximum compatibility --- */
  .has-sidenav.sidenav-collapsed .navbar,
  .has-sidenav.sidenav-collapsed .navbar.fixed-top,
  .has-sidenav.sidenav-collapsed #top-navbar,
  .has-sidenav.sidenav-collapsed .page-navbar,
  body.sidenav-collapsed .navbar,
  body.sidenav-collapsed .navbar.fixed-top,
  body.sidenav-collapsed #top-navbar,
  body.sidenav-collapsed .page-navbar {
    left: var(--almondb-sidenav-collapsed-width);
    width: calc(100% - var(--almondb-sidenav-collapsed-width));
  }

  /* --- When the page wrapper has the class (preferred for your setup) --- */
  #page-wrapper.has-sidenav .navbar,
  #page-wrapper.has-sidenav .navbar.fixed-top,
  #page-wrapper.has-sidenav #top-navbar,
  #page-wrapper.has-sidenav .page-navbar,

  /* --- fallback: when body has the class (legacy) --- */
  body.has-sidenav .navbar,
  body.has-sidenav .navbar.fixed-top,
  body.has-sidenav #top-navbar,
  body.has-sidenav .page-navbar {
    position: fixed;
    left: var(--almondb-sidenav-width);
    right: 0;
    top: 0;
    z-index: calc(var(--almondb-sidenav-z) + 5);
    width: calc(100% - var(--almondb-sidenav-width));
    transition:
      left 200ms ease,
      width 200ms ease;
    box-sizing: border-box;
  }

  /* 🌟 Collapsed sidenav layout — when navbar has .sidenav-collapsed */
  nav.navbar.sidenav-collapsed,
  #page-wrapper.has-sidenav .navbar.sidenav-collapsed,
  body.has-sidenav .navbar.sidenav-collapsed {
    left: var(--almondb-sidenav-collapsed-width);
    width: calc(100% - var(--almondb-sidenav-collapsed-width));
    transition:
      left 200ms ease,
      width 200ms ease;
  }

  /* NAVBAR when sidenav collapsed Mihir - 7 NOV 2025 --*/
  /* ✅ Collapsed sidenav override */
  body.has-sidenav.sidenav-collapsed .navbar,
  body.has-sidenav.sidenav-collapsed .navbar.fixed-top,
  body.has-sidenav.sidenav-collapsed #top-navbar,
  body.has-sidenav.sidenav-collapsed .page-navbar,
  #page-wrapper.has-sidenav.sidenav-collapsed .navbar,
  #page-wrapper.has-sidenav.sidenav-collapsed .navbar.fixed-top,
  #page-wrapper.has-sidenav.sidenav-collapsed #top-navbar,
  #page-wrapper.has-sidenav.sidenav-collapsed .page-navbar {
    left: var(--almondb-sidenav-collapsed-width);
    width: calc(100% - var(--almondb-sidenav-collapsed-width));
  }

  /* --- No sidenav: full width navbar --- */
  #page-wrapper:not(.has-sidenav) .navbar,
  #page-wrapper:not(.has-sidenav) .navbar.fixed-top,
  #page-wrapper:not(.has-sidenav) #top-navbar,
  #page-wrapper:not(.has-sidenav) .page-navbar,
  body:not(.has-sidenav) .navbar,
  body:not(.has-sidenav) .navbar.fixed-top,
  body:not(.has-sidenav) #top-navbar,
  body:not(.has-sidenav) .page-navbar {
    left: 0;
    width: 100%;
    position: fixed;
    top: 0;
    transition:
      left 200ms ease,
      width 200ms ease;
    box-sizing: border-box;
  }
}

/* navbar logo sizing */
.navbar .navbar-brand img.logo {
  display: block;
  max-width: calc(100% - 1rem);
  max-height: calc(var(--almondb-topbar-height) - 10px);
  object-fit: contain;
  margin: 0 auto;
}

/* ---------- Page shifting & navbar placement (desktop only) ---------- */
/* Desktop: push page wrapper & top navbar to the right by sidenav width */
@media (min-width: 992px) {
  body.has-sidenav #page-wrapper,
  .has-sidenav #page-wrapper {
    margin-left: var(--almondb-sidenav-width);
    transition: margin-left 220ms ease;
  }

  /* Top navbar sits after the sidenav and fills remaining width */
  .navbar,
  #top-navbar,
  .page-navbar {
    position: fixed;
    left: var(--almondb-sidenav-width);
    right: 0;
    top: 0;
    z-index: calc(var(--almondb-sidenav-z) + 5);
    width: calc(100% - var(--almondb-sidenav-width));
    box-sizing: border-box;
  }
  /* If your navbar has container padding, adjust content to not overlap */
  /* #page-wrapper {
    padding-top: var(--almondb-topbar-height); 
  }  */
  /* keep content below navbar */
}

/* Mobile: navbar is full width and sits at top (do not offset) */
@media (max-width: 991.98px) {
  .navbar,
  #top-navbar,
  .page-navbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: calc(var(--almondb-sidenav-z) + 5);
    width: 100%;
  }

  /* sidenav overlay on mobile should cover from topbar down (if desired),
     or you can keep overlay starting below topbar by adjusting top. */
  .almondb-sidenav .sidenav-overlay,
  .almondb-sidenav + .sidenav-overlay {
    left: 0;
    right: 0;
    top: var(--almondb-topbar-height);
    height: calc(100vh - var(--almondb-topbar-height));
  }
  /* when sidenav is open as a grid, prevent body scroll */
  body.sidenav-mobile-open {
    overflow: hidden;
  }
}

/* smaller navbar-brand on small screens */
/* @media (min-width: 991.98px) {
  .navbar .navbar-brand {
    width: var(--almondb-sidenav-collapsed-width);
    padding: 0.25rem;
  }
  .navbar .navbar-brand img.logo {
    max-width: calc(100% - 0.5rem);
    max-height: 48px;
  }
} */

/* =========================
   Nav list (desktop) & link basics
   ========================= */
.almondb-sidenav .sidenav-nav {
  list-style: none;
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 0.75rem;
}
.almondb-sidenav .sidenav-item {
  margin: 0.35rem 0;
}

/* each link used for both desktop and mobile */
.sidenav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  color: var(--almondb-sidenav-foreground);
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  transition: all 0.18s ease;
  text-decoration: none;
  background: transparent;
}

/* inner main group */
.sidenav-main {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Hover/active: inverted style */
.sidenav-item .is-active {
  background: var(--almondb-sidenav-hover-bg);
  color: var(--almondb-sidenav-hover-color);
  text-decoration: none;
  border-radius: 20px;
}
.sidenav-link:active,
.sidenav-link:hover,
.sidenav-link:focus {
  background: var(--almondb-sidenav-hover-bg);
  color: var(--almondb-sidenav-hover-color);
  text-decoration: none;
  border-radius: 20px;
}
.almondb-sidenav .is-active > .sidenav-link {
  background: var(--almondb-sidenav-hover-bg);
  color: var(--almondb-sidenav-hover-color);
  font-weight: 600;
}

/* chevron on desktop only */
.sidenav-chevron {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7);
}

/* submenu (desktop) */
.sidenav-sub {
  margin: 0.25rem 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.sidenav-subitem a {
  padding: 0.4rem 0.6rem;
  display: block;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}
.sidenav-subitem a:hover {
  background: var(--almondb-sidenav-hover-bg);
  color: var(--almondb-sidenav-hover-color);
}

/* icons spacing */
.almondb-sidenav i.fa {
  width: 1.25rem;
  text-align: center;
}

/* bottom area */
.almondb-sidenav .sidenav-bottom {
  flex-shrink: 0;
  padding: 0.75rem;
}
.almondb-sidenav .sidenav-bottom a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 20px;
  color: var(--almondb-sidenav-foreground);
}

.almondb-sidenav .sidenav-bottom a:hover {
  background: var(--almondb-sidenav-hover-bg);
  color: var(--almondb-sidenav-hover-color);
  text-decoration: none;
}

/* =========================
   Collapsed desktop behavior
   ========================= */
.almondb-sidenav.collapsed {
  width: var(--almondb-sidenav-collapsed-width) !important;
}
.almondb-sidenav.collapsed .sidenav-text {
  display: none !important;
}

/* =========================
   Page shifting only on desktop
   ========================= */
@media (min-width: 992px) {
  .has-sidenav #page-wrapper,
  body.has-sidenav #page-wrapper {
    margin-left: var(--almondb-sidenav-width);
    transition: margin-left 220ms ease;
  }
  body.sidenav-collapsed.has-sidenav #page-wrapper,
  .has-sidenav.sidenav-collapsed #page-wrapper {
    margin-left: var(--almondb-sidenav-collapsed-width);
  }
}
@media (max-width: 991.98px) {
  .has-sidenav #page-wrapper,
  body.has-sidenav #page-wrapper {
    margin-left: 0 !important;
  }
}

/* =========================
   MOBILE: grid / cards layout when open
   ========================= */
/* ======= MOBILE: FORCE GRID (override Bootstrap utilities) ======= */
@media (max-width: 991.98px) {
  /* Ensure the sidenav is off-screen by default (closed) */
  .almondb-sidenav {
    transform: translateX(-100%);
    left: 0;
    width: var(--almondb-sidenav-width);
    box-shadow: var(--almondb-sidenav-shadow);
    position: fixed;
    top: var(--almondb-topbar-height);
  }

  /* When open, make it full width under topbar */
  .almondb-sidenav.open {
    transform: translateX(0);
    width: 100%;
    left: 0;
    right: 0;
    height: auto;
    z-index: var(--almondb-sidenav-z);
    background: var(--almondb-sidenav-bg);
    padding-bottom: 0.5rem;
  }

  /* overlay visible when open */
  .almondb-sidenav.open .sidenav-overlay,
  .almondb-sidenav.open + .sidenav-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  /*
    Override Bootstrap d-flex / flex-column on the inner wrapper.
    Target both the utility classes and the generic element to be safe.
  */
  .almondb-sidenav.open .sidenav-inner,
  .almondb-sidenav.open .sidenav-inner.d-flex,
  .almondb-sidenav.open .sidenav-inner.flex-column,
  .almondb-sidenav.open > .sidenav-inner {
    display: block !important; /* neutralize d-flex */
    flex-direction: initial !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* Make the UL the grid container — override flex-grow-1 and other utilities */
  .almondb-sidenav.open .sidenav-nav,
  .almondb-sidenav.open .sidenav-nav.flex-grow-1 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0.75rem !important;
    list-style: none !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    max-height: calc(100vh - var(--almondb-topbar-height) - 20px);
    overflow-y: auto;
  }

  /* Ensure each LI becomes a grid cell */
  .almondb-sidenav.open .sidenav-item {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Make anchors fill the card and center their content (override d-flex utilities) */
  .almondb-sidenav.open .sidenav-item .sidenav-link,
  .almondb-sidenav.open .sidenav-item > a.sidenav-link,
  .almondb-sidenav.open .sidenav-item .sidenav-link.d-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    min-height: 72px !important;
    padding: 0.8rem !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  /* Adjust inner ordering: icon above text */
  .almondb-sidenav.open .sidenav-link .sidenav-main {
    display: flex !important;
    flex-direction: row !important; /* make the icon and text side by side again */
    gap: 0.35rem !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .almondb-sidenav.open i.fa {
    font-size: 1.15rem !important;
    margin: 0 !important;
    display: inkine-block !important;
  }

  .almondb-sidenav.open .sidenav-text {
    font-size: 0.95rem !important;
    display: inline-block !important; /* make the icon and text side by side again */
  }

  /* Hide submenus in grid mode so layout stays simple */
  .almondb-sidenav.open .sidenav-sub {
    display: none !important;
  }

  /* prevent body scroll when open */
  body.sidenav-mobile-open {
    overflow: hidden;
  }
}

/* =========================
   Accessibility focus
   ========================= */
.almondb-sidenav a:focus,
.almondb-sidenav button:focus {
  outline: 3px solid rgba(255, 255, 255, 0.22);
  outline-offset: 2px;
}

/* =========================
   Small polish
   ========================= */
#page-content {
  transition:
    margin-left 200ms ease,
    width 200ms ease;
}

/* suman add css style for mobile view 04-11-2025   start-------> */

/* ===== Mobile sidenav redesign (for max-width:450px) ===== */
@media (max-width: 450px) {
  #almondb-sidenav {
    width: 100% !important;
    height: 450px !important;
    position: fixed;
    top: 0;
    left: 0;
    /* box-shadow: 4px 0 16px rgba(0,0,0,0.5); */
    color: #fff;
    z-index: 9999;
    padding: 1.2rem 1.2rem 2rem;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    top: 70px !important;
  }

  /* hide multi-column layout spacing */
  #almondb-sidenav .sidenav-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* logo / user top section */
  #almondb-sidenav .sidenav-top {
    justify-content: flex-start !important;
  }
  #almondb-sidenav .sidenav-top img {
    max-height: 36px;
    border-radius: 50%;
  }

  /* main nav section */
  #almondb-sidenav .sidenav-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  /* bottom area */
  .almondb-sidenav .sidenav-bottom {
    padding-top: 10px;
    padding: 0rem;
  }

  #almondb-sidenav .sidenav-item {
    width: 100%;
  }

  #almondb-sidenav .sidenav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    transition: background 0.3s ease;
  }

  #almondb-sidenav .sidenav-link i.fa {
    width: 22px;
    font-size: 1.2rem;
    text-align: center;
  }

  #almondb-sidenav .sidenav-item.is-active .sidenav-link,
  #almondb-sidenav .sidenav-link:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  /* remove submenus (hide children) */
  #almondb-sidenav .sidenav-sub {
    display: none !important;
  }

  /* bottom area (Help, Settings, Logout) */
  #almondb-sidenav .sidenav-bottom {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  #almondb-sidenav .sidenav-bottom .sidenav-link {
    color: #fff;
    font-size: 0.9rem;
  }

  /* overlay dim for mobile */
  #almondb-sidenav .sidenav-overlay {
    background: rgba(0, 0, 0, 0.4);
  }

  .almondb-sidenav.open .sidenav-item .sidenav-link,
  .almondb-sidenav.open .sidenav-item > a.sidenav-link,
  .almondb-sidenav.open .sidenav-item .sidenav-link.d-flex {
    justify-content: left !important;
    flex-direction: row !important;
    min-height: 25px !important;
    padding: 0.2rem !important;
  }
}

/* Hide the close button by default (for web/desktop) */
.sidenav-close-btn {
  display: none;
}
/* === Mobile sidenav style === */
@media (max-width: 450px) {
  /* Top section alignment */
  #almondb-sidenav .sidenav-top {
    position: relative;
    display: flex !important;
    align-items: left !important;
    justify-content: left !important;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
  }

  /* Keep user image visible and rounded */
  #almondb-sidenav .sidenav-top img.rounded-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  /* Cross (close) button styling */
  #almondb-sidenav .sidenav-close-btn {
    display: block;
    position: absolute;
    right: 12px;
    top: 10px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 5;
    line-height: 1;
  }

  #almondb-sidenav .sidenav-close-btn:hover {
    color: #ccc;
  }
}

@media (max-width: 850px) {
  /* Top section alignment */
  #almondb-sidenav .sidenav-top {
    position: relative;
    display: flex !important;
    align-items: left !important;
    justify-content: left !important;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
  }

  /* Keep user image visible and rounded */
  #almondb-sidenav .sidenav-top img.rounded-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  /* Cross (close) button styling */
  #almondb-sidenav .sidenav-close-btn {
    display: block;
    position: absolute;
    right: 12px;
    top: 10px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 5;
    line-height: 1;
  }

  #almondb-sidenav .sidenav-close-btn:hover {
    color: #ccc;
  }
}
@media (max-width: 850px) {
  #almondb-sidenav {
    width: 100% !important;
    height: 450px !important;
    position: fixed;
    top: 0;
    left: 0;
    /* box-shadow: 4px 0 16px rgba(0,0,0,0.5); */
    color: #fff;
    z-index: 9999;
    padding: 1.2rem 1.2rem 2rem;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    top: 50px !important; /* suman change 70 to 50 for mobile view 04-11-2025 */
  }

  /* hide multi-column layout spacing */
  #almondb-sidenav .sidenav-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* logo / user top section */
  #almondb-sidenav .sidenav-top {
    justify-content: flex-start !important;
  }
  #almondb-sidenav .sidenav-top img {
    max-height: 36px;
    border-radius: 50%;
  }

  /* main nav section */
  #almondb-sidenav .sidenav-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  /* bottom area */
  .almondb-sidenav .sidenav-bottom {
    padding-top: 10px;
    padding: 0rem;
  }

  #almondb-sidenav .sidenav-item {
    width: 100%;
  }

  #almondb-sidenav .sidenav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    transition: background 0.3s ease;
  }

  #almondb-sidenav .sidenav-link i.fa {
    width: 22px;
    font-size: 1.2rem;
    text-align: center;
  }

  #almondb-sidenav .sidenav-item.is-active .sidenav-link,
  #almondb-sidenav .sidenav-link:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  /* remove submenus (hide children) */
  #almondb-sidenav .sidenav-sub {
    display: none !important;
  }

  /* bottom area (Help, Settings, Logout) */
  #almondb-sidenav .sidenav-bottom {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  #almondb-sidenav .sidenav-bottom .sidenav-link {
    color: #fff;
    font-size: 0.9rem;
  }

  /* overlay dim for mobile */
  #almondb-sidenav .sidenav-overlay {
    background: rgba(0, 0, 0, 0.4);
  }

  .almondb-sidenav.open .sidenav-item .sidenav-link,
  .almondb-sidenav.open .sidenav-item > a.sidenav-link,
  .almondb-sidenav.open .sidenav-item .sidenav-link.d-flex {
    justify-content: left !important;
    flex-direction: row !important;
    min-height: 25px !important;
    padding: 0.2rem !important;
  }
}

/* suman add css style for mobile view 04-11-2025   end-------> */
/* Mihir for sidenav loader css **/
/* almondb sidenav loader overlay */
#almondb-sidenav-loader {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  display: none; /* shown by JS */
  align-items: center;
  justify-content: center;
  background: rgba(
    255,
    255,
    255,
    0.85
  ); /* white overlay — change to match theme */
  z-index: 99999;
  transition: opacity 0.25s ease;
  pointer-events: none; /* allow click-through if necessary */
}

/* small inner box */
.almondb-sidenav-loader-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 10px;
}

/* spinner */
.almondb-loader-svg {
  width: 56px;
  height: 56px;
}
.almondb-loader-ring {
  stroke: rgba(60, 18, 150, 0.9);
  stroke-linecap: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 0;
  transform-origin: 50% 50%;
  animation: almondb-spin 1s linear infinite;
}
@keyframes almondb-spin {
  0% {
    transform: rotate(0deg);
    stroke-dashoffset: 90;
  }
  50% {
    transform: rotate(180deg);
    stroke-dashoffset: 22;
  }
  100% {
    transform: rotate(360deg);
    stroke-dashoffset: 90;
  }
}

/* optional: when loader visible, add class on html/body if you want to style page differently */
.html.almondb-sidenav-loading,
.almondb-sidenav-loading {
  /* placeholder if you want to hide page scrollbar etc. */
  overflow: hidden;
}