/*
 * Modern nav refresh — sidebar & header only.
 * Loads AFTER AdminLTE.min.css + _all-skins.min.css so these rules win the cascade.
 * Only visual properties are touched (color, background, radius, shadow, spacing,
 * font) — layout-critical properties (position/width/display) are left alone so
 * sidebar-mini collapse, treeview open/close and dropdown toggling keep working
 * exactly as before.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --nx-blue-900: #0f2a43;
  --nx-blue-700: #1b4b72;
  --nx-blue-500: #2f86c2;
  --nx-blue-400: #3c8dbc;
  --nx-sidebar-bg: #1a232b;
  --nx-sidebar-bg-soft: #212b34;
  --nx-sidebar-text: #b8c7ce;
  /* Stock AdminLTE width is 230px. Every rule below that positions
     something relative to the sidebar's width (logo box, header nav
     offset, content margin, mobile slide-in distance) has to move
     together with this or they'll drift out of alignment. */
  --nx-sidebar-width: 250px;
  /* Stock collapsed (icon-only) width is 50px. Its own thin scrollbar
     (see .main-sidebar .sidebar::-webkit-scrollbar) has to fit inside
     that same 50px alongside the icons, leaving barely anything to grab
     -- widen it a bit so the scrollbar is actually usable. */
  --nx-sidebar-width-collapsed: 64px;
  /* Mobile header is a stacked logo row + the unconditional 50px navbar
     row (see the max-width:767px block below) -- .content-wrapper and
     .main-sidebar's mobile top offsets are computed from this exact
     value, so it stays a single source of truth for the combined
     height. */
  --nx-mobile-logo-height: 34px;
}

.main-header,
.main-sidebar,
.navbar-nav > .notifications-menu > .dropdown-menu,
.navbar-nav > .user-menu > .dropdown-menu {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Header ---------- */

.skin-blue .main-header .navbar,
.skin-blue .main-header li.user-header {
  background: linear-gradient(100deg, var(--nx-blue-900) 0%, var(--nx-blue-700) 50%, var(--nx-blue-500) 100%);
}

.skin-blue .main-header {
  box-shadow: 0 2px 10px rgba(15, 42, 67, .25);
}

.skin-blue .main-header .logo {
  background: linear-gradient(100deg, var(--nx-blue-900) 0%, var(--nx-blue-700) 100%);
  font-weight: 700;
  letter-spacing: .3px;
}

/* Inter's vertical metrics differ from the base font, so the old
   line-height-only centering no longer lines the title up with the
   header — center it with flex instead so it sits at the same height
   as the rest of the navbar regardless of font metrics. */
.main-header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  width: var(--nx-sidebar-width);
}

.main-header .navbar {
  margin-left: var(--nx-sidebar-width);
}

.main-header .logo .logo-lg,
.main-header .logo .logo-mini {
  line-height: normal;
}

/* "Metrosolusindo" is longer than the old mark — shrink it a touch so it
   never clips against the fixed logo box width (--nx-sidebar-width).
   Uppercase runs wider than mixed case at the same size, so it gets an
   extra size step down. */
.main-header .logo .logo-lg {
  font-size: 15px;
  letter-spacing: .2px;
  white-space: nowrap;
  text-transform: uppercase;
}

.skin-blue .main-header .logo:hover {
  background: var(--nx-blue-700);
}

.main-header .navbar {
  height: 100%;
}

.main-header .navbar .sidebar-toggle {
  border-radius: 6px;
  margin: 0 4px;
  transition: background .15s ease;
}

.main-header .navbar .nav > li > a {
  transition: background .15s ease, color .15s ease;
}

.main-header .navbar .nav > li.dropdown.notifications-menu > a {
  border-radius: 8px;
  margin: 0 2px;
}

.main-header .navbar .user-menu .dropdown-toggle img {
  border: 2px solid rgba(255, 255, 255, .35);
  transition: border-color .15s ease;
}

.main-header .navbar .user-menu .dropdown-toggle:hover img {
  border-color: #fff;
}

/* ---------- Dropdowns (notifications / profile) ---------- */

.navbar-nav > .notifications-menu > .dropdown-menu,
.navbar-nav > .user-menu > .dropdown-menu {
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 42, 67, .18);
  overflow: hidden;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.header {
  background: #f5f8fb;
  color: var(--nx-blue-700);
  font-weight: 600;
  border-bottom: 1px solid #e8eef3;
}

.navbar-nav > .notifications-menu > .dropdown-menu .menu > li > a {
  border-radius: 8px;
  margin: 2px 6px;
}

.navbar-nav .dropdown-menu .label {
  border-radius: 20px;
  padding: 3px 7px;
}

.navbar-nav > .user-menu .user-header {
  border-radius: 12px 12px 0 0;
}

.navbar-nav > .user-menu .user-footer {
  background: #f8fafc;
  border-top: 1px solid #eef2f5;
}

.navbar-nav > .user-menu .user-footer .btn-default {
  border-radius: 6px;
}

/* ---------- Password policy checklist (login/forgot/reset/profile pages) ---------- */

.pw-policy-checklist {
  list-style: none;
  margin: 4px 0 18px;
  padding: 0;
}

.pw-policy-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b0;
  padding: 3px 0;
}

.pw-policy-checklist li i {
  font-size: 13px;
}

.pw-policy-checklist li.pw-rule-valid {
  color: #1e7a34;
}

/* ---------- Sidebar ---------- */

.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background-color: var(--nx-sidebar-bg);
}

/* ---------- Sidebar menu search ---------- */
/* Logic lives in main-sidebar.php (buildMenuSearchIndex/
   renderMenuSearchResults). position:sticky here relies on .sidebar
   itself being the scrolling ancestor (overflow-y:auto, see the fixed-
   layout section below) with this as a direct child of it, so it stays
   pinned to the top of the icon/menu list instead of scrolling away. */
.sidebar-search {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--nx-sidebar-bg);
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* Blue-tinted instead of the same flat grey as the treeview flyout cards
   (.sidebar-bg-soft) -- ties it to the same accent blue used for the
   active-page pill and header gradient, so it reads as "the search"
   rather than just another dark panel. */
.sidebar-search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(47, 134, 194, .1);
  border: 1px solid rgba(47, 134, 194, .3);
  border-radius: 8px;
  padding: 0 10px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.sidebar-search-box:focus-within {
  border-color: var(--nx-blue-500);
  background: rgba(47, 134, 194, .16);
  box-shadow: 0 0 0 3px rgba(47, 134, 194, .18);
}

.sidebar-search-icon {
  flex: 0 0 auto;
  color: var(--nx-blue-500);
  font-size: 12px;
}

.sidebar-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: #fff;
  font-size: 13px;
  padding: 8px 0;
}

.sidebar-search-input::placeholder {
  color: var(--nx-sidebar-text);
  opacity: .75;
}

.sidebar-search-clear {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--nx-sidebar-text);
  padding: 4px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}

.sidebar-search-clear:hover {
  color: #fff;
}

.sidebar-search-results {
  margin-top: 8px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--nx-sidebar-bg-soft);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.sidebar-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--nx-sidebar-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.sidebar-search-result:last-child {
  border-bottom: none;
}

.sidebar-search-result:hover,
.sidebar-search-result.active {
  background: rgba(47, 134, 194, .2);
  color: #fff;
  text-decoration: none;
}

.sidebar-search-result-icon {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  color: var(--nx-blue-500);
}

.sidebar-search-result-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-search-result-label {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-search-result-label mark {
  background: var(--nx-blue-500);
  color: #fff;
  border-radius: 2px;
  padding: 0 1px;
}

.sidebar-search-result-crumb {
  font-size: 11px;
  color: rgba(184, 199, 206, .65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-search-empty {
  padding: 14px 12px;
  font-size: 12px;
  color: var(--nx-sidebar-text);
  text-align: center;
}

/* Only meaningful with the sidebar expanded -- a text field has nowhere
   to go in the 64px icon-only rail. */
.sidebar-mini.sidebar-collapse .sidebar-search {
  display: none;
}

/* Mobile-only trigger button + modal (see main-sidebar.php for the "why":
   an input inside .sidebar's own overflow:auto reliably closes the
   on-screen keyboard on Android Chrome, so mobile gets a modal -- which
   lives outside .sidebar in the DOM entirely -- instead of the inline
   box desktop/tablet use. Styled to look like the same search box
   (reuses .sidebar-search-box/-icon/-input/-clear/-results as-is) so it
   reads as one continuous feature, just a button that opens it on small
   screens instead of the field being inline. Hidden above the mobile
   breakpoint by default; modern-nav.css's max-width:767px block below
   flips which of the two is visible. */
.sidebar-search-mobile-trigger {
  display: none;
  width: 90%;
  align-items: center;
  gap: 8px;
  background: rgba(47, 134, 194, .1);
  border: 1px solid rgba(47, 134, 194, .3);
  border-radius: 8px;
  padding: 10px 12px;
  margin-left:12px;
  margin-right:12px;
  color: var(--nx-sidebar-text);
  font-size: 13px;
  text-align: left;
}

.sidebar-search-mobile-trigger .fa-search {
  color: var(--nx-blue-500);
  font-size: 12px;
}

.sidebar-search-modal .modal-dialog {
  margin-top: 12vh;
}

.sidebar-search-modal .modal-content {
  position: relative;
  background: var(--nx-sidebar-bg);
  border-radius: 12px;
  border: none;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
  /* Extra top padding clears the absolutely-positioned close button below
     -- stacked above the search box rather than squeezed beside it,
     which would otherwise crowd the box's own clear ("x") button. */
  padding: 40px 16px 8px;
}

.sidebar-search-modal .modal-body {
  padding: 0;
}

.sidebar-search-modal .menu-search-widget .sidebar-search-results {
  max-height: 65vh;
}

.sidebar-search-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--nx-sidebar-text);
  font-size: 16px;
  padding: 6px;
  line-height: 1;
  z-index: 1;
}

.sidebar-search-modal-close:hover {
  color: #fff;
}

@media (max-width: 767px) {
  .sidebar-search {
    display: none;
  }

  /* sidebar-collapse only shrinks the rail to icon-only at desktop
     widths (see the min-width:768px block near the end of this file) --
     on mobile the sidebar is always either off-canvas or full width when
     open, so the trigger shows regardless of that class. */
  .sidebar-search-mobile-trigger {
    display: flex;
  }
}

.skin-blue .sidebar-menu > li.header {
  font-size: 11px;
  letter-spacing: .06em;
  font-weight: 600;
  color: #5c7183;
  background: transparent;
  padding-top: 14px;
}

/* Top-level item: floating rounded row instead of full-width flat bar.
   padding-right keeps the text clear of the expand arrow. Truncation
   itself lives on the label only (see rule below) -- items like RAB carry
   a <br> plus one or two badges below the label, and clipping the whole
   <a> to one nowrap line was cutting the second badge off. */
.sidebar-menu > li > a {
  margin: 2px 8px;
  border-radius: 8px;
  border-left: none !important;
  padding-top: 11px;
  padding-bottom: 11px;
  padding-right: 28px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
  box-sizing: border-box;
}

/* Long menu names are clipped with an ellipsis instead of spilling past
   the sidebar. Targets just the label -- the plain <span> a treeview
   trigger wraps its name in, or the tooltip_bottom() wrapper div other
   items use directly -- never the whole row, so trailing badges/counters
   stay on their own line, wrapping normally instead of being clipped. */
/* tooltip_bottom() (shared helper, asset/connectiondb/function-raw/tooltip_bottom.php)
   hardcodes style='display:inline' on this div -- a plain inline style
   attribute beats a same-property rule here even with a class selector, so
   display has to be !important or none of the overflow/ellipsis truncation
   below it ever takes effect (overflow doesn't apply to display:inline at
   all) and long labels spill past the row/flyout card instead of clipping. */
.sidebar-menu > li > a > span:not(.pull-right-container),
.sidebar-menu > li > a > div[data-toggle="tooltip"] {
  display: inline-block !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.skin-blue .sidebar-menu > li:hover > a {
  background: var(--nx-sidebar-bg-soft);
  color: #fff;
}

/* .current-page is set only by our own JS on the exact menu item that
   matches the page you're on right now (see markActiveMenu() in
   main-sidebar.php) — deliberately NOT the same as AdminLTE's built-in
   .active/.menu-open, which it also stamps on any parent you merely
   click open to browse. Styling .active directly would highlight every
   section you expand, not just the page you're actually viewing. */
.skin-blue .sidebar-menu > li.current-page > a {
  background: linear-gradient(90deg, var(--nx-blue-700), var(--nx-blue-500));
  color: #fff;
  box-shadow: 0 4px 10px rgba(47, 134, 194, .35);
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
  width: 22px;
}

/* Compact info badges under a menu label (e.g. RAB's "Submitted"/"Published"
   counts in api/menu.sidebar.php) -- default AdminLTE .badge is sized for a
   count sitting next to a full-size label, too large for two of them
   stacked on their own line under the link text; shrink just the text. */
.sidebar-menu .badge-compact {
  font-size: 10px;
  padding: 2px 6px;
}

/* Even smaller than .badge-compact -- Customer Care's MLG/BALI pair asked to
   be shrunk further still, stacked on top of .badge-compact rather than
   replacing it so RAB's badges (which only got the first pass) are unaffected. */
.sidebar-menu .badge-compact.badge-xs {
  font-size: 9px;
  line-height: 1.6;
  padding: 1px 5px 2px;
}

/* Submenu / treeview (matches at any nesting depth) */
.skin-blue .sidebar-menu li > .treeview-menu {
  background: transparent;
  margin: 0 8px 4px 18px;
  padding-left: 10px;
  border-left: 1px dashed rgba(255, 255, 255, .12);
}

.skin-blue .treeview-menu > li > a {
  border-radius: 6px;
  margin: 1px 4px;
  padding: 8px 26px 8px 10px;
  font-size: 13px;
  color: var(--nx-sidebar-text);
  box-sizing: border-box;
  display: block;
}

/* Same label-only truncation as the top-level items above, for badge-
   carrying items nested inside a submenu (same tooltip_bottom() wrapper,
   same <br> + badge(s) shape). */
.skin-blue .treeview-menu > li > a > div[data-toggle="tooltip"] {
  display: inline-block !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Nested treeview PARENTS (a sub-group with its own children, e.g. "Dokumen
   & Legal Perusahaan" one level down inside "Direksi Area") render their
   label as a plain <span>, same as a top-level treeview item -- but the
   top-level rule above only matches `.sidebar-menu > li > a > span` (direct
   child of .sidebar-menu), which a nested one never is, and the leaf rule
   right above only matches the tooltip_bottom() `div`, not `span`. Long
   nested group names fell through both and spilled past the flyout/panel
   uncut. `.treeview-menu` is reused at every nesting depth (no per-level
   class), so this one rule covers a group nested at any depth.

   max-width is 100% minus an explicit 20px, not a plain 100% -- the toggle
   arrow (AdminLTE's `.pull-right-container`, absolutely positioned at
   right:10px) sits clear of the 26px right padding on plain leaf rows, but
   a nested group's own icon has no fixed width here (unlike a top-level
   item's `.fa{width:22px}` above), so the label's available line-box space
   isn't as predictable -- the flat 20px buffer guarantees the ellipsis
   point always lands short of the arrow instead of running up against it. */
.skin-blue .treeview-menu > li > a > span:not(.pull-right-container) {
  display: inline-block !important;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.skin-blue .treeview-menu > li > a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.skin-blue .treeview-menu > li.current-page > a {
  background: rgba(60, 141, 188, .25);
  color: #fff;
  font-weight: 500;
}

/* Collapsed sidebar-mini mode: treeview becomes a floating flyout popup
   over the page content, not a panel sitting on the sidebar's own dark
   background — so unlike the expanded state it needs its own opaque
   card background (plus the indent guide from the expanded state must
   not shift it). */
.sidebar-collapse.skin-blue .sidebar-menu li > .treeview-menu {
  margin: 0;
  padding: 6px;
  border-left: none;
  background: var(--nx-sidebar-bg-soft);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

/* Stock AdminLTE stacks a small label row above the flyout list, offset
   by a hardcoded top:44px — with our font/spacing changes the label's
   real height no longer matches that guess, leaving a dead gap the
   cursor falls through before reaching the flyout. Drop the redundant
   label for items that open a flyout and flush the list to top:0
   instead, so there is no gap to cross at all. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview:hover > a > span:not(.pull-right) {
  display: none !important;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview:hover > .treeview-menu {
  top: 0;
}

@media (max-width: 767px) {
  .sidebar-menu > li > a {
    margin: 2px 6px;
  }
}

/* ---------- Fixed header + sidebar, scrollable content ---------- */
/* Header height is locked to 50px above (see .main-header .navbar), the
   same at every breakpoint, so a single 50px offset below covers desktop
   and mobile alike -- no separate mobile padding-top needed. */

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.main-sidebar {
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  padding-top: 0;
  width: var(--nx-sidebar-width);
  /* Stock sets min-height:100% (of the viewport) for the old
     position:absolute/whole-page-scroll layout. Left in place, it wins
     over the top:50px/bottom:0 box computed here (min-height always wins
     over a smaller used height), stretching this 50px past the viewport
     bottom -- which is exactly what made the sidebar's own scrollbar
     unreachable/dead. */
  min-height: 0;
}

/* .sidebar (the <section> wrapping the menu, inside .main-sidebar) is the
   part that scrolls -- .main-sidebar itself stays a plain fixed box so it
   doesn't clip the collapsed-mode flyout (see below). Absolute-fill
   instead of height:100% so it isn't sensitive to the same kind of
   percentage-height resolution surprise. */
.main-sidebar .sidebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--nx-blue-500) transparent;
}

/* Thin, theme-colored scrollbar instead of the browser's default wide one
   (which was eating into the already-narrow sidebar width). */
.main-sidebar .sidebar::-webkit-scrollbar {
  width: 6px;
}

.main-sidebar .sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb {
  background-color: var(--nx-blue-500);
  border-radius: 4px;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb:hover {
  background-color: var(--nx-blue-400);
}

.content-wrapper,
.right-side,
.main-footer {
  margin-left: var(--nx-sidebar-width);
}

.content-wrapper {
  padding-top: 50px;
}

@media (max-width: 767px) {
  /* Stock AdminLTE stacks .logo full-width above .navbar full-width on
     mobile -- kept here (unlike the single-row layout tried earlier,
     which crammed the hamburger/notifications/user menu right up against
     the brand text and felt cramped), just given a fixed, compact height
     instead of stock's default full 50px logo row so the combined header
     isn't too tall. .content-wrapper/.main-sidebar's offsets below are
     sized to this exact combined height (logo row + the unconditional
     50px navbar row) -- change --nx-mobile-logo-height and they move
     with it. */
  .main-header .logo {
    width: 100%;
    float: none;
    height: var(--nx-mobile-logo-height);
  }

  .main-header .logo .logo-lg {
    font-size: 13px;
  }

  .main-header .navbar {
    width: 100%;
    float: none;
    margin: 0;
  }

  .content-wrapper {
    padding-top: calc(var(--nx-mobile-logo-height) + 50px);
  }

  .content-wrapper,
  .right-side,
  .main-footer {
    margin-left: 0;
  }

  .main-sidebar {
    top: calc(var(--nx-mobile-logo-height) + 50px);
    transform: translate(calc(-1 * var(--nx-sidebar-width)), 0);
  }

  .sidebar-open .content-wrapper,
  .sidebar-open .right-side,
  .sidebar-open .main-footer {
    transform: translate(var(--nx-sidebar-width), 0);
  }
}

/* Collapsed sidebar-mini mode: a top-level treeview's submenu pops out as
   a flyout next to its icon. .sidebar (the icon rail) needs a permanent,
   never-toggled overflow-y:auto -- mouse-wheel scrolling only works while
   the cursor is over the element being scrolled, so ANY rule that flips
   .sidebar's overflow to visible on hover (directly, or via a class a
   hover handler adds) kills scrolling at the exact moment the cursor is
   on it to scroll. That was tried twice (plain :hover, then a JS class
   scoped to just treeview icons) and broke scrolling both times, because
   most icons in this sidebar ARE treeview items with a flyout.

   So .sidebar's own overflow is never touched. Instead the flyout itself
   escapes .sidebar's clip via position:fixed, positioned with JS-computed
   viewport coordinates on hover (see main-sidebar.php) -- position:fixed
   isn't clipped by an ancestor's overflow at all (only an ancestor with a
   transform/filter/etc establishes a new containing block for it, and
   none of .sidebar/.main-sidebar/.wrapper do), so this works regardless
   of .sidebar's overflow value. The li.flyout-open class below still
   drives instant display + a short close grace-period (a long flyout
   packs items tightly enough that a momentary gap the cursor grazes
   while moving down it can otherwise drop the hover chain early) -- JS
   only adds position:fixed/top/left on top of what this already shows. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview.flyout-open > a > span:not(.pull-right),
.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview.flyout-open > .treeview-menu {
  display: block !important;
  position: absolute;
  width: 180px;
  left: var(--nx-sidebar-width-collapsed);
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview.flyout-open > .treeview-menu {
  top: 0;
  margin-left: 0;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview.flyout-open > a > span:not(.pull-right) {
  display: none !important;
}

/* Stock AdminLTE hardcodes the collapsed (icon-only) width as 50px in
   several places (rail width, content offset, header logo/nav offset,
   flyout's left offset above) -- all wrapped in this same media query,
   since collapse-to-a-rail is a desktop-only affordance (mobile uses an
   off-canvas slide instead, unaffected by sidebar-collapse). Re-declare
   each with --nx-sidebar-width-collapsed so they widen together. */
@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-sidebar {
    width: var(--nx-sidebar-width-collapsed) !important;
  }

  .sidebar-mini.sidebar-collapse .content-wrapper,
  .sidebar-mini.sidebar-collapse .right-side,
  .sidebar-mini.sidebar-collapse .main-footer {
    margin-left: var(--nx-sidebar-width-collapsed) !important;
  }

  .sidebar-mini.sidebar-collapse .main-header .logo {
    width: var(--nx-sidebar-width-collapsed);
  }

  .sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: var(--nx-sidebar-width-collapsed);
  }

  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    left: var(--nx-sidebar-width-collapsed);
  }
}