/*
  Shell layout: the persistent sidebar + header (both real cloned markup) plus
  an iframe that swaps in whichever route folder's index.html is selected.
  vendor.css (from bankManagementV2/) supplies all the actual ant-* styling;
  this file only positions the sider/header/content, matching how the live
  site's inline React styles push content over for a 280px (or 80px
  collapsed) sider.
*/
html, body { margin: 0; height: 100%; }

.ant-layout-sider {
  overflow: auto;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  flex: 0 0 280px;
  max-width: 280px;
  min-width: 280px;
  width: 280px;
  transition: width .2s, min-width .2s, max-width .2s, flex .2s;
  z-index: 10;
}
.ant-layout-sider.collapsed {
  flex: 0 0 80px;
  max-width: 80px;
  min-width: 80px;
  width: 80px;
}
.ant-layout-sider.collapsed .ant-menu-submenu-title .label,
.ant-layout-sider.collapsed .ant-menu-item .label,
.ant-layout-sider.collapsed .ant-menu-submenu-arrow {
  display: none;
}
/* Collapsed rail: icons centered instead of left-padded, matching the real
   icon-only rail (real site's collapsed sider is icon-only, no left align).
   .ant-menu-submenu-title is display:block (not flex) in the real antd CSS,
   so justify-content has no effect here — text-align is what actually centers
   the icon's inline-block box. The icon's own margin-right (spacing before the
   now-hidden label) is zeroed out too, or centering lands ~5px off-true. */
.ant-layout-sider.collapsed .ant-menu-submenu-title {
  padding-left: 0 !important;
  text-align: center;
}
.ant-layout-sider.collapsed .ant-menu-submenu-title .anticon {
  margin-right: 0;
}

/* Collapsed rail: hide the "STAGING" wordmark, icon-only like the real rail. */
.ant-layout-sider.collapsed .logoTitle {
  display: none;
}

.ant-menu-submenu .submenu-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease;
}
/* Direct-child selector only: each submenu's own open state controls its
   own list. A plain descendant selector here would cascade a parent's open
   state down into every nested list regardless of that nested submenu's
   own toggle state — inconsistent with the arrow rotation (which vendor.css
   already scopes with `>`) and prone to submenus rendering in a way that
   doesn't match their arrow's open/closed indicator. */
.ant-menu-submenu-open > .submenu-list {
  /* generous cap so it never clips a long submenu (e.g. Settings) —
     bump this if a submenu ever grows past ~20 items */
  max-height: 900px;
}

/* Collapsed rail: submenu no longer expands inline — it becomes a hover
   flyout popover floating over the content, matching the real site's
   collapsed-sider behavior (hover the icon to see its child pages). */
.ant-layout-sider.collapsed .submenu-list {
  max-height: none;
  overflow: visible;
  position: fixed;
  left: 80px;
  width: 200px;
  background: #001529;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  padding: 4px 0;
  z-index: 20;
  display: none;
}
.ant-layout-sider.collapsed .submenu-list.flyout-open {
  display: block;
}
.ant-layout-sider.collapsed .submenu-list .menu-item {
  padding-left: 20px;
}

.site-layout-background.ant-layout-header {
  margin-left: 280px;
  transition: margin-left .2s;
}
#page-frame-wrap {
  margin-left: 280px;
  height: calc(100vh - 68px);
  transition: margin-left .2s;
}
#root-layout.sider-collapsed .site-layout-background.ant-layout-header,
#root-layout.sider-collapsed #page-frame-wrap {
  margin-left: 80px;
}

#pageFrame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #f0f2f5;
}