/* ============================================================
 * NextGen MIS — Layout shell
 * ------------------------------------------------------------
 * Owns the geometry of the app shell so it's self-consistent:
 *   - Fixed white top bar (full width)
 *   - Full-height deep-forest sidebar (below the top bar → bottom)
 *   - Content offset by sidebar width + top bar height
 *   - Static footer within the content column (never under sidebar)
 *   - Collapsible sidebar (desktop: icon-rail; mobile: off-canvas)
 *
 * All offsets derive from --topbar-height / --sidebar-width so the
 * pieces always line up. !important is used to beat Metronic's
 * hard-coded 68px header / 195px sidebar / fixed footer.
 * ============================================================ */

/* ---------- TOP BAR — MOBILE ONLY (hidden on desktop; logo+toggle live in the
   sidebar there). Flush full-width bar on small screens. ---------- */
.page-header.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--color-topbar-bg) !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
  box-shadow: none !important;
  z-index: var(--z-topbar);
}
@media (min-width: 992px) {
  .page-header.navbar { display: none !important; }
}

.page-header.navbar .page-header-inner.ng-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-height);
  /* left pad tuned so the toggle icon centre lines up with the sidebar icons */
  padding: 0 var(--space-5) 0 14px;
  width: 100%;
  float: none;
}

/* ---------- PAGE FLOW (flex column so the non-sticky footer is never clipped) ----------
   The fixed top bar + sidebar are out of normal flow, so the in-flow column is
   simply: (spacers) → .page-container (grows) → .page-footer (bottom). This
   guarantees the footer sits at the bottom of the page and is always reachable. */
html { height: auto !important; }
body {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
  height: auto !important;
}
body > .page-container { flex: 1 0 auto; }
body > .page-footer { flex: 0 0 auto; }

/* ---------- CONTAINER (no top offset; the floating top bar + content carry
   their own insets) ---------- */
.page-header-fixed .page-container,
.page-container {
  margin-top: 0 !important;
  background: var(--color-bg-app) !important;
}

/* ---------- SIDEBAR (full height, fixed) ---------- */
.page-sidebar-wrapper {
  position: static;
}

.page-sidebar,
.page-sidebar-fixed .page-sidebar,
.page-sidebar.navbar-collapse,
.page-sidebar.navbar-collapse.collapse,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
  position: fixed !important;
  /* Zero Bootstrap's .navbar-collapse 15px L/R padding on the sidebar — that
     padding sat OUTSIDE our --sidebar-width-collapsed (72px) on some browsers,
     making the visible rail render at ~88px (72 + 16-ish residual). With this
     here the rail's true outer width matches the token. */
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  /* Flex column so the account block can tether to the bottom (defeats
     Bootstrap-3 .collapse{display:none} too). */
  display: flex !important;
  flex-direction: column;
  top: 0;                           /* full height — logo sits at the very top */
  bottom: 0;
  left: 0;
  width: var(--sidebar-width) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;                 /* the nav list scrolls internally; brand + account stay put */
  background-color: var(--color-sidebar-bg);   /* grey base — sits on a lower level */
  border-right: none;                          /* blends into the app background */
  z-index: var(--z-sidebar);
  -webkit-overflow-scrolling: touch;
  transition: width var(--motion-base) var(--ease-standard),
              transform var(--motion-base) var(--ease-standard);
}

/* The nav list scrolls NATIVELY inside the menu (Metronic's slimScroll is torn down
   in refinements.js — and re-killed after each submenu toggle, since Metronic re-applies
   it). It carries a thin, discoverable scrollbar so a long/expanded menu reads as
   scrollable; the slimScroll bar/rail are hidden in case the teardown is briefly late. */
.page-sidebar .page-sidebar-menu {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;             /* let the flex child shrink so it actually scrolls */
  /* Now that the menu scrolls natively (slimScroll gone), the browser's scroll
     anchoring fights Metronic's slideDown: as a submenu opens the content grows and
     the browser nudges scrollTop to compensate, yanking the rows back up mid-animation
     (a "down then back up" jerk). Opt out so expand/collapse is a single clean slide. */
  overflow-anchor: none;
  scrollbar-width: thin;                                       /* Firefox */
  scrollbar-color: var(--color-text-faint) transparent;
}
.page-sidebar .page-sidebar-menu::-webkit-scrollbar { width: 6px; }                              /* Safari/Chrome */
.page-sidebar .page-sidebar-menu::-webkit-scrollbar-track { background: transparent; }
.page-sidebar .page-sidebar-menu::-webkit-scrollbar-thumb { background: var(--color-text-faint); border-radius: var(--radius-full); }
.page-sidebar .page-sidebar-menu::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
.page-sidebar .slimScrollBar,
.page-sidebar .slimScrollRail { display: none !important; }

/* ---------- CONTENT OFFSET ---------- */
.page-content-wrapper {
  float: none !important;
  width: auto !important;
}

.page-content-wrapper .page-content {
  /* Floating white content pane, inset to the right of the sidebar and below
     the floating top bar — sits ABOVE the grey base level. */
  margin-left: calc(var(--sidebar-width) + var(--pane-gap)) !important;
  margin-right: var(--pane-gap) !important;
  margin-top: var(--pane-gap) !important;       /* no desktop top bar — pane starts near the top */
  margin-bottom: var(--pane-gap) !important;
  padding: var(--content-padding) !important;
  min-height: calc(100vh - 2 * var(--pane-gap)) !important;
  height: auto !important;             /* neutralise Metronic's JS-set inline height */
  background: var(--color-bg-surface) !important;     /* white pane */
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  transition: margin-left var(--motion-base) var(--ease-standard);
}

/* Content spans the full width of the content column (no max-width cap). */

/* ---------- COLLAPSED SIDEBAR (desktop icon-rail) ---------- */
@media (min-width: 992px) {
  /* Specificity must beat the base rule's `.page-sidebar.navbar-collapse.collapse`
     (0,3,0) — otherwise the collapsed width never applies. */
  .page-sidebar-closed .page-sidebar,
  .page-sidebar-closed .page-sidebar.navbar-collapse.collapse,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
    width: var(--sidebar-width-collapsed) !important;
  }
  /* Visual-balance nudge for the collapsed rail. Apply translateX uniformly
     to the brand-top, the nav menu and the account block so all three shift
     by the same pixel amount regardless of their internal widths. (Asymmetric
     sidebar padding doesn't work cleanly here — the nav link width: 72px
     overflows the padded content area and gets clipped, producing a different
     centre offset from the brand which uses width: auto.) */
  .page-sidebar-closed .ng-sidebar-top,
  .page-sidebar-closed .page-sidebar-menu,
  .page-sidebar-closed .ng-sidebar-account,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .ng-sidebar-top,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .ng-sidebar-account {
    transform: translateX(7px) !important;
  }
  .page-sidebar-closed .page-content-wrapper .page-content {
    margin-left: calc(var(--sidebar-width-collapsed) + var(--pane-gap)) !important;
  }
  .page-sidebar-closed .page-footer {
    margin-left: calc(var(--sidebar-width-collapsed) + var(--pane-gap)) !important;
  }
  .page-sidebar-closed .page-header.navbar {
    left: calc(var(--sidebar-width-collapsed) + var(--pane-gap)) !important;
  }
  /* Collapsed rail: brand + account shrink to icon/avatar only */
  .page-sidebar-closed .ng-sidebar-brand,
  .page-sidebar-closed .ng-account-toggle { justify-content: center; }
  .page-sidebar-closed .ng-account__name,
  .page-sidebar-closed .ng-account__caret { display: none !important; }
  .page-sidebar-closed .ng-sidebar-top {
    flex-direction: column;
    align-items: center;            /* hamburger + logo aligned with the nav icons */
    gap: var(--space-2);
    padding: var(--space-2) 0;      /* centred in the rail — equal gaps L/R (matches the nav icons) */
  }
  /* Collapsed: show only the emblem in the brand lockup */
  .page-sidebar-closed .ng-sidebar-brand__lockup { display: none; }
  .page-sidebar-closed .ng-sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  /* COLLAPSED RAIL — verified live (browser-inspected). Two root causes:
     (1) Metronic pins the menu to 54px (beats width:100%), leaving icons left
         of the 72px rail centre;
     (2) parent <li>s shrink-wrap to their 195px submenu on hover, overflowing
         and cropping the rail.
     Fix: lock the menu + every item + link to the rail width with min/max-width
     (the `ul.` bump out-specifies Metronic), centre the icon, and hide labels /
     arrows / submenus in ALL states incl. :hover. */
  .page-sidebar-closed .page-sidebar ul.page-sidebar-menu {
    width: var(--sidebar-width-collapsed) !important;
    min-width: var(--sidebar-width-collapsed) !important;
    max-width: var(--sidebar-width-collapsed) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li:hover {
    width: var(--sidebar-width-collapsed) !important;
    position: static !important;
    z-index: auto !important;
  }
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li:hover > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a {
    width: var(--sidebar-width-collapsed) !important;
    display: flex !important;
    align-items: center !important;        /* vertical centre */
    justify-content: center !important;    /* horizontal centre */
    text-align: center !important;
    /* SYMMETRIC padding + FIXED height in ALL states (default + hover) so the icon
       is vertically centred and the row never contracts on hover. layout-app.css
       set 19px/10px asymmetric padding only on the closed (non-hover) state. */
    /* Vertical breathing room between the collapsed icons. Padding is constant
       across all states (default + hover) so the row never contracts on hover.
       8px matches the expanded top-level links — collapsed and expanded share
       one vertical rhythm so they feel like the same nav, just two widths. */
    padding: 8px 0 !important;
    min-height: var(--target-size-min) !important;   /* unified 44px rhythm with the expanded view */
    height: auto !important;
    box-shadow: none !important;
  }
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a > i { margin: 0 !important; }
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a > .title,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a > .arrow,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu li .sub-menu,
  .page-sidebar-closed .page-sidebar .ng-section-label {
    display: none !important;
  }
  /* Belt-and-braces: keep the rail itself fixed too. */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
    width: var(--sidebar-width-collapsed) !important;
  }

  /* Collapsed rail only: hide the scrollbar so the centred icons aren't pushed
     off-centre by its gutter (the expanded sidebar keeps its thin bar). Scroll still works. */
  .page-sidebar-closed .page-sidebar-menu { scrollbar-width: none; }
  .page-sidebar-closed .page-sidebar-menu::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

/* ---------- FOOTER (NON-sticky — flows below the content, within the content
   column, never invades the sidebar) ---------- */
.page-footer {
  position: static !important;
  display: flex !important;
  align-items: center;
  min-height: var(--footer-height);
  margin-left: calc(var(--sidebar-width) + var(--pane-gap)) !important;
  margin-right: var(--pane-gap) !important;
  padding: var(--space-1) var(--content-padding) var(--space-3) !important;
  background: transparent !important;   /* on the grey base, below the content pane */
  border-top: none !important;
  transition: margin-left var(--motion-base) var(--ease-standard);
}

.page-footer .page-footer-inner {
  color: var(--color-text-faint) !important;
  font-family: var(--font-family-ui) !important;
  font-size: var(--font-size-xs) !important;
  float: none !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-4);
}
.page-footer .page-footer-inner .pull-right { float: none !important; margin-left: auto; }

/* ---------- RESPONSIVE: mobile off-canvas (<992px) ---------- */
@media (max-width: 991px) {
  /* Top bar spans full width; sidebar tucks below it as an off-canvas panel */
  .page-header.navbar {
    left: 0 !important;
  }
  .page-sidebar,
  .page-sidebar-fixed .page-sidebar,
  .page-sidebar.navbar-collapse.collapse {
    top: var(--topbar-height) !important;
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
    box-shadow: var(--shadow-lg);
  }
  body.ng-sidebar-open .page-sidebar,
  body.ng-sidebar-open .page-sidebar-fixed .page-sidebar {
    transform: translateX(0);
  }
  /* Brand sits inside the sidebar; hidden under the top bar on mobile so it
     doesn't duplicate — show nav straight away */
  .ng-sidebar-brand { display: none; }
  .page-content-wrapper .page-content {
    margin-left: 0 !important;
  }
  .page-footer {
    margin-left: 0 !important;
  }
  /* Scrim behind the open mobile sidebar */
  body.ng-sidebar-open::after {
    content: "";
    position: fixed;
    inset: var(--topbar-height) 0 0 0;
    background: var(--color-bg-overlay);
    z-index: calc(var(--z-sidebar) - 1);
  }
  /* Brand byline can be tight on small screens */
  .ng-brand__byline { display: none; }
  .ng-context { display: none !important; }
}

@media (max-width: 480px) {
  .ng-brand__lockup { display: none; }
  .page-content-wrapper .page-content { padding: var(--space-3) !important; }
}