/* =============================================================
   SIDEBAR  —  premium dark navigation (RTL-aware)
   -------------------------------------------------------------
   Two zones:
     • GLOBAL (any state): colours, hover/active, scrollbar,
       bottom logout footer.
     • EXPANDED-ONLY (body:not(.sidebar-collapse)): spacing,
       the "button" look, and long-label WRAPPING.
   Layout is scoped to the expanded state so the collapsed and
   collapsed+hover states keep AdminLTE's native, correct layout
   (no tall-wrap gaps). No markup/behaviour changes.
   ============================================================= */

/* ---- Brand --------------------------------------------------- */
.main-sidebar .brand-link {
  border-bottom: 1px solid var(--sidebar-border);
  padding: 0.85rem 1rem;
  transition: background-color var(--speed-fast) var(--ease);
}
.main-sidebar .brand-link:hover { background-color: var(--sidebar-hover-bg); }
.main-sidebar .brand-text { color: var(--sidebar-text-strong); letter-spacing: .01em; }

/* ---- User panel ---------------------------------------------- */
.main-sidebar .user-panel { border-bottom: 1px solid var(--sidebar-border); }
.main-sidebar .user-panel .info a { color: var(--sidebar-text-strong); }
.main-sidebar .user-panel .image img { box-shadow: 0 0 0 2px var(--sidebar-hover-bg); }

/* ---- Nav link colours (all states) --------------------------- */
.main-sidebar .nav-sidebar .nav-link {
  color: var(--sidebar-text);
  border-radius: var(--sidebar-item-radius);
  transition: background-color var(--speed-fast) var(--ease),
              color var(--speed-fast) var(--ease);
}
.main-sidebar .nav-sidebar .nav-link:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--sidebar-text-strong);
}
.main-sidebar .nav-sidebar .nav-link.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: var(--fw-medium);
}
.main-sidebar .nav-sidebar .nav-link.active .nav-icon { color: var(--sidebar-active-text); }

/* group headers + treeview colour (all states) */
.main-sidebar .nav-header {
  color: var(--sidebar-header);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}
.main-sidebar .nav-treeview { background-color: var(--sidebar-bg-2); }

/* =============================================================
   EXPANDED-ONLY  —  spacing, button look, label wrapping
   ============================================================= */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  min-height: 2.35rem;
  height: auto;
  margin: var(--sidebar-item-gap) .5rem;
  padding: .5rem .85rem;
}
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link > p {
  margin: 0;
  flex: 1 1 auto;
  line-height: 1.35;
  white-space: normal;           /* wrap long labels (full width only) */
  overflow-wrap: anywhere;
  word-break: break-word;
}
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link .nav-icon {
  width: 1.4rem;
  margin-top: .12rem;
  text-align: center;
  flex: 0 0 auto;
}
/* collapse arrow pinned to the first line so it never overlaps wrap */
body:not(.sidebar-collapse) .main-sidebar .has-treeview > .nav-link > p { padding-inline-end: 1.4rem; }
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link > p > .right {
  position: absolute;
  top: .75rem;
  transition: transform var(--animation-speed) var(--ease);
}
body:not(.sidebar-collapse) .main-sidebar .nav-item.menu-open > .nav-link > p > .right { transform: rotate(-90deg); }

/* nested treeview spacing */
body:not(.sidebar-collapse) .main-sidebar .nav-treeview {
  border-radius: var(--radius-small);
  margin: 2px .5rem 6px;
  padding: 4px 0;
}
body:not(.sidebar-collapse) .main-sidebar .nav-treeview .nav-link {
  margin: var(--sidebar-item-gap) .35rem;
  font-size: .95em;
}

/* group headers spacing */
body:not(.sidebar-collapse) .main-sidebar .nav-header {
  font-size: 11px;
  padding: .55rem 1rem .35rem;
  margin: .35rem .5rem 0;
  opacity: .95;
}

/* ---- Scrollbar (all states) ---------------------------------- */
.main-sidebar .sidebar::-webkit-scrollbar { width: 7px; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb {
  background: var(--sidebar-scrollbar);
  border-radius: var(--radius-pill);
}
.main-sidebar .sidebar::-webkit-scrollbar-track { background: transparent; }
.main-sidebar .sidebar { scrollbar-width: thin; scrollbar-color: var(--sidebar-scrollbar) transparent; }

/* ---- Bottom logout footer (all states) ----------------------- */
/* Pin the sidebar to the viewport and span its FULL height so it always reaches
   the bottom of the page.
   AdminLTE ships `:not(.layout-fixed) .main-sidebar { position:absolute;
   height:inherit; min-height:100% }`. The body has no `.layout-fixed`, so that
   rule applied and the sidebar scrolled with the page, stopping short of the
   bottom by the height of the fixed page footer. We mirror AdminLTE's selector
   (same specificity) and load after it, so this wins.
   This is also the containing block for the absolute .sidebar-footer below. */
:not(.layout-fixed) .main-sidebar,
.layout-fixed .main-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;          /* RTL: sidebar lives on the right */
  left: auto;
  height: 100vh;
  min-height: 100vh;
}
.main-sidebar .sidebar { padding-bottom: 3.9rem; }        /* clear the footer */
.main-sidebar .sidebar-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.6rem 0.7rem;
  background: var(--sidebar-bg);
  border-top: 1px solid var(--sidebar-border);
  z-index: 5;
}
.ds-sidebar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--sidebar-item-radius);
  background: var(--danger-soft);
  color: #ff6b6b;
  font-weight: var(--fw-medium);
  transition: background-color var(--speed-fast) var(--ease),
              color var(--speed-fast) var(--ease),
              transform var(--speed-fast) var(--ease);
}
.ds-sidebar-logout:hover { background: var(--danger); color: #fff; transform: translateY(-1px); }
.ds-sidebar-logout:active { transform: translateY(0); }
/* collapsed (not hovered): show only the logout icon */
.sidebar-collapse .main-sidebar:not(:hover) .ds-sidebar-logout span { display: none; }
.sidebar-collapse .main-sidebar:not(:hover) .ds-sidebar-logout { padding: 0.55rem 0; }