:root{
  --nav-h: 56px;                 /* height of your fixed header */
  --sidebar-w: 260px;            /* expanded width (fixed) */
  --sidebar-w-collapsed: 68px;   /* collapsed width (fixed) */
}

/* full-height layout: scroll inside panels (not body) */
html, body { height: 100%; }
body { overflow: hidden; }

/* app shell pinned below the fixed header */
.app-shell{
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* ===== FIXED Sidebar column ===== */
.sidebar{
  /* hard fixed width as a flex item */
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  box-sizing: border-box;
  height: 100vh;

  /* independent scroll; keep width stable when scrollbar appears */
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;

  border-right: 1px solid #eee;
  padding-top: .25rem;
  transition: width .55s cubic-bezier(.25,.8,.25,1),
              flex-basis .55s cubic-bezier(.25,.8,.25,1);
}

/* collapsed = narrower fixed column */
body.sidebar-collapsed .sidebar{
  flex-basis: var(--sidebar-w-collapsed);
  width: var(--sidebar-w-collapsed);
}

/* ===== Links & labels (compact, tidy) ===== */
.sidebar .nav-link{
  display: flex;
  align-items: center;            /* icons & text vertically aligned */
  gap: .25rem;                    /* tighter gap */
  padding: .35rem .50rem;         /* tighter padding */
  border-radius: .5rem;
  color: #222;
  text-decoration: none;
  line-height: 1.15;
  font-size: .955rem;
}
.sidebar .nav-link:hover{ background:#f3f6ff; }

.sidebar .label{
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
  max-width: calc(var(--sidebar-w) - 44px);
  text-align: left;
}

/* active state */
.sidebar .nav-link.active{
  background: #f3f6ff;
  border-radius: .5rem;
}

/* icons */
.sidebar .nav-link i{
  margin-right: .35rem !important;   /* in case markup uses .me-2 */
  font-size: 1.02rem;
}

/* section title */
.sidebar .section-title{ letter-spacing:.08em; }

/* ===== Submenu alignment: remove indentation so items stay flush-left ===== */
.sidebar .ps-4{ padding-left: 0 !important; }                 /* cancel utility padding inside sidebar */
.sidebar .nav-group .collapse .nav-link{ padding-left: .60rem !important; }

/* ===== Collapsed mode: labels hidden, icons perfectly aligned ===== */
body.sidebar-collapsed .sidebar .label,
body.sidebar-collapsed .sidebar .section-title{ display:none !important; }

body.sidebar-collapsed .sidebar .nav-link{
  justify-content: center;        /* center icon only */
  gap: 0 !important;              /* no extra space in collapsed mode */
  padding-left: .40rem !important;
  padding-right: .40rem !important;
}
body.sidebar-collapsed .sidebar .nav-link .me-2{ margin-right:0 !important; }
body.sidebar-collapsed .sidebar .nav-link i{ margin-right:0 !important; }

/* hide group chevrons in collapsed mode (they shift centering) */
body.sidebar-collapsed .sidebar .nav-group > .nav-link .fa-chevron-down{
  display: none !important;
}

/* chevrons on right */
.sidebar .nav-group > .nav-link{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .35rem;
}
.sidebar .nav-group > .nav-link .fa-chevron-down{
  order: 2;
  margin-left: auto;
}
.sidebar .nav-group .collapse .nav-link{
  padding-left: .25rem !important;
  padding-right: .25rem !important;
  gap: .35rem;
}

/* ensure nested uls don't add hidden padding that affects centering */
body.sidebar-collapsed .sidebar ul.list-unstyled{
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* remove leftover left padding on nested items when collapsed */
body.sidebar-collapsed .sidebar .nav-group .collapse .nav-link{
  padding-left: 0 !important;
}

/* ===== Seam Chevron (toggle) - pinned to the sidebar edge ===== */
.sidebar-toggle{
  position: fixed;                         /* pin to viewport so it doesn't scroll */
  top: calc(var(--nav-h) + 12px);
  left: var(--sidebar-w);                  /* sits exactly on the seam */
  transform: translateX(-50%);             /* half over the seam */
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  cursor: pointer;
  z-index: 102;
  transition: left .22s cubic-bezier(.25,.8,.25,1), transform .22s;
}
.sidebar-toggle:hover{ background:#f8f9ff; }
body.sidebar-collapsed .sidebar-toggle{ left: var(--sidebar-w-collapsed); }

/* ===== Content area scrolls independently ===== */
.app-content{
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  padding: 1rem 1.25rem;
}

.scrollable-select {
  max-height: 8em;   /* ~5 options */
  overflow-y: auto;
}

.col-desc {
  max-width: 150px;
  white-space: normal;       /* allow multi-line */
  word-wrap: break-word;     /* break long words if needed */
  overflow-wrap: anywhere;   /* modern browsers */
}

/* ===== Mobile off-canvas behavior ===== */
@media (max-width: 992px){
  body{ overflow:auto; }
  :root{ --sidebar-w: 260px; }
  .app-shell{ position: static; top: 0; min-height: auto; height: auto; }
  header .navbar{ position: sticky; top:0; z-index: 1100; }
  .app-content{ padding-top: calc(var(--nav-h) + 8px); }
  .sidebar{
    position: fixed;
    top: 0;
    padding-top: 8px;
    left: 0;
    height: 100vh;
    z-index: 1050;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    overflow-y: auto;
    background: #fff;
    transition: transform 0.8s ease-in-out;
    max-width: 100vw;
    width: 100vw;
    flex: 0 0 100vw;
    transform: translateX(-100%);
  }
  body.sidebar-collapsed .sidebar{
    transform: translateX(-100%);
    width: 100vw;
    flex: 0 0 100vw;
  }
  body:not(.sidebar-collapsed) .sidebar{
    transform: translateX(0);
    width: 100vw;
    flex: 0 0 100vw;
  }
  .sidebar-toggle{
    display: none;
    left: 12px !important;
    top: 12px !important;
    transform: none !important;
    z-index: 1060;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  body.has-sidebar:not(.sidebar-collapsed)::after{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);
    z-index:1040;
  }
  body.sidebar-collapsed .sidebar .label,
  body.sidebar-collapsed .sidebar .section-title{ display:block !important; }
  body.sidebar-collapsed .sidebar .nav-link{
    justify-content: flex-start;
    gap: .35rem !important;
    padding-left: .60rem !important;
    padding-right: .60rem !important;
  }

  /* hide seam toggle on mobile */
  .sidebar-toggle{ display:none !important; }
}