/* Resizable vertical menu (drag handle).
 *
 * Vuexy bakes the menu width (16.25rem) as a literal into core.css in ~12 places.
 * Here we route the width through a --menu-width custom property and re-declare
 * the rules that matter for this app's layout (layout-content-navbar + fixed
 * menu/navbar). A small JS module (menu-resize.js) updates --menu-width as the
 * user drags the handle; a pre-paint boot script in master.html applies the
 * saved value from localStorage.
 *
 * Each override is prefixed with `html:not(.layout-menu-collapsed)` for two
 * reasons:
 *   1. It restricts the custom width to the EXPANDED state — the collapsed rail
 *      (5.25rem) and its hover-flyout keep Vuexy's own widths untouched.
 *   2. It raises specificity above core.css's literal rules, so we win even
 *      when the template-customizer re-injects core.css after this file
 *      (the same cascade quirk handled in tpp-menu-toggle.css) — no !important.
 *
 * Width is clamped to 220–420px by the JS; the variable default matches Vuexy.
 */
:root {
  --menu-width: 16.25rem;
}

/* 1. The menu itself */
html:not(.layout-menu-collapsed) .menu-vertical,
html:not(.layout-menu-collapsed) .menu-vertical .menu-block,
html:not(.layout-menu-collapsed) .menu-vertical .menu-inner > .menu-item,
html:not(.layout-menu-collapsed) .menu-vertical .menu-inner > .menu-header {
  width: var(--menu-width, 16.25rem);
}

/* 2. Detached fixed navbar: width spans the remaining space (base rule in core) */
html.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-navbar.navbar-detached {
  width: calc(100% - calc(1.5rem * 2) - var(--menu-width, 16.25rem));
}

@media (min-width: 1200px) {
  /* 3. Content area offset so it clears the fixed menu */
  html.layout-menu-fixed:not(.layout-menu-collapsed) .layout-page {
    padding-left: var(--menu-width, 16.25rem);
  }

  /* 4. Non-detached fixed navbar: left edge sits at the menu's right edge.
   *    Must match core's strongest selector (.layout-menu-fixed.layout-navbar-fixed,
   *    6 classes); the leading `html` type bump puts us just above it. */
  html.layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
    left: var(--menu-width, 16.25rem);
  }

  /* 5. Fixed footer aligns with content */
  html.layout-footer-fixed:not(.layout-menu-collapsed) .layout-wrapper:not(.layout-without-menu) .content-footer {
    left: var(--menu-width, 16.25rem);
  }
}

/* ---- Drag handle ---- */
.menu-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 10;
  touch-action: none;
}
.menu-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: transparent;
  transition: background-color 0.15s ease-in-out;
}
.menu-resize-handle:hover::after,
html.menu-resizing .menu-resize-handle::after {
  background-color: var(--bs-primary, #696cff);
}

/* No handle when collapsed or on mobile (menu becomes an overlay) */
html.layout-menu-collapsed .menu-resize-handle {
  display: none;
}
@media (max-width: 1199.98px) {
  .menu-resize-handle {
    display: none;
  }
}

/* While dragging: follow the cursor instantly (kill width transitions) and
 * suppress text selection across the page. */
html.menu-resizing .layout-menu,
html.menu-resizing .menu-vertical,
html.menu-resizing .layout-page,
html.menu-resizing .layout-navbar,
html.menu-resizing .content-footer {
  transition: none !important;
}
html.menu-resizing,
html.menu-resizing * {
  user-select: none !important;
  cursor: ew-resize !important;
}