/* ── Horizontal / topbar layout mode ───────────────────────────────────── */
/* The sidebar becomes a sticky top navigation bar; the toolbar sticks just
   below it. Both are in-flow (sticky) so a wrapping nav row grows naturally
   instead of being cut off. Dropdowns must never be inside a scroll
   container: overflow-x:auto on .app-navigation makes overflow-y compute to
   "auto" too, which clips the absolutely-positioned submenus. */
.layout-horizontal #app {
  display: block;
}

.layout-horizontal #app-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--toolbar-h);
  border-right: none;
  border-bottom: 1px solid var(--border);
  display: block;
  overflow: visible;
  z-index: 1030;
}

/* The top-nav bar is full width; its inner content lives in .app-container,
   which becomes the flex row here (and the column in vertical/mobile modes).
   Restructured pages use a Bootstrap container class (.container / .container-xl)
   as the same flex wrapper. */
.layout-horizontal #app-nav > .app-container,
.layout-horizontal #app-nav > .container,
.layout-horizontal #app-nav > .container-xl {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  min-width: 0;
  padding-inline: 18px;
}

.layout-horizontal .app-logo {
  border-bottom: none;
  border-right: none;
  min-width: 210px;
  flex-shrink: 0;
  /* Sit flush on the bar's gutter (18px is only for the sidebar drawer) so the
     brand mark lines up with the toolbar and content column below. */
  padding-left: 0;
}

.layout-horizontal .app-navigation {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  overflow: visible;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}

.layout-horizontal .side-group {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.layout-horizontal .side-group-toggle {
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.layout-horizontal .side-link {
  border-left: none;
  border-bottom: 2px solid transparent;
  padding: 7px 11px;
  white-space: nowrap;
}

.layout-horizontal .side-link.active {
  border-bottom-color: var(--accent);
  border-left: none;
}

.layout-horizontal .side-submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
  padding: 8px;
  z-index: 1100;
}

/* Bridge over the 8px gap between the main menu and its dropdown, so moving
   the cursor from one into the other never drops the :hover state. */
.layout-horizontal .side-submenu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

/* Auto-show only, exactly like the mini-sidebar rail: dropdowns appear on hover
   and stay open while the pointer travels into them via the ::before bridge.
   Note: no :focus-within — a mouse click focuses the toggle, which would pin
   the dropdown open even when hovering other menus. Keyboard access is wired
   via the .kb-open class in app.js instead. Click / .open state is ignored. */
.layout-horizontal .side-group.open > .side-submenu {
  display: none;
}
.layout-horizontal .side-group:hover > .side-submenu,
.layout-horizontal .side-group.kb-open > .side-submenu {
  display: block;
  animation: fadeIn .15s ease;
}

/* Active state on the top-level menu: the same look the click-toggle used to
   give via .open (accent icon, full-strength label, rotated chevron). */
.layout-horizontal .side-group:hover > .side-group-toggle,
.layout-horizontal .side-group.kb-open > .side-group-toggle {
  color: var(--text);
  background: var(--surface2);
}
.layout-horizontal .side-group:hover > .side-group-toggle .sg-icon,
.layout-horizontal .side-group.kb-open > .side-group-toggle .sg-icon {
  color: var(--accent-h);
}
.layout-horizontal .side-group:hover > .side-group-toggle .sg-chev,
.layout-horizontal .side-group.kb-open > .side-group-toggle .sg-chev {
  transform: rotate(180deg);
}

.layout-horizontal .side-submenu .side-link {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: none;
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 2px 0;
}

.layout-horizontal .side-submenu .side-link.active {
  border-left-color: var(--accent);
  border-bottom: none;
  background: var(--accent-bg);
  color: var(--accent-h);
}

.layout-horizontal .app-user {
  margin-left: auto;
  border-top: none;
  border-left: none;
  padding-inline: 10px 0;
  height: var(--toolbar-h);
  flex-direction: row;
  align-items: center;
  gap: 0;
}
.layout-horizontal .app-user > :not(.footer-user) { display: none; }
.layout-horizontal .footer-user .avatar-btn { padding: 4px; }
.layout-horizontal .footer-user-chev { transform: rotate(180deg); }
.layout-horizontal .footer-user.show .footer-user-chev { transform: none; }

.layout-horizontal #main {
  margin-left: 0;
  padding-top: 0;
  min-height: calc(100vh - var(--toolbar-h));
}

.layout-horizontal #toolbar {
  position: sticky;
  top: var(--toolbar-h);
}

/* Between the off-canvas breakpoint and ~1200px keep the nav on one row by
   collapsing the logo to its mark. Restructured pages cap the nav at
   container's 960px here, so the menu groups are also compressed to fit. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .layout-horizontal .app-logo {
    min-width: 56px;
    width: 56px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  .layout-horizontal .app-logo .logo-mark {
    font-size: 13px;
  }
  .layout-horizontal .footer-user .who,
  .layout-horizontal .footer-user-chev { display: none; }

  .layout-horizontal .app-navigation {
    gap: 4px;
    padding: 0 6px;
  }
  .layout-horizontal .side-group-toggle {
    padding: 7px 6px;
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: .05em;
  }
}

/* At 1200-1399 the contained column is Bootstrap's 1140px, which is not wide
   enough for the full logo + all eight menu groups + the user chip. Reuse the
   collapsed-logo / compact-group squeeze so the top nav still fits on one row.
   Boxed follows the same 1140px box at this range, so it needs the same
   squeeze (fluid keeps the roomy full-width bar untouched). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .layout-contained.layout-horizontal .app-logo,
  .layout-boxed.layout-horizontal .app-logo {
    min-width: 56px;
    width: 56px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  .layout-contained.layout-horizontal .app-logo .logo-mark,
  .layout-boxed.layout-horizontal .app-logo .logo-mark {
    font-size: 13px;
  }
  .layout-contained.layout-horizontal .footer-user .who,
  .layout-contained.layout-horizontal .footer-user-chev,
  .layout-boxed.layout-horizontal .footer-user .who,
  .layout-boxed.layout-horizontal .footer-user-chev { display: none; }

  .layout-contained.layout-horizontal .app-navigation,
  .layout-boxed.layout-horizontal .app-navigation {
    gap: 4px;
    padding: 0 6px;
  }
  .layout-contained.layout-horizontal .side-group-toggle,
  .layout-boxed.layout-horizontal .side-group-toggle {
    padding: 7px 6px;
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: .05em;
  }
}

/* At >=1400 the contained column is 1320px: the full logo fits, but the eight
   full-size groups would still run past the user chip, so trim the group
   padding slightly (contained and boxed, which shares the same 1320px box). */
@media (min-width: 1400px) {
  .layout-contained.layout-horizontal .side-group-toggle,
  .layout-boxed.layout-horizontal .side-group-toggle {
    padding: 7px 7px;
    gap: 7px;
    letter-spacing: .07em;
  }
}

/* Mobile fallback: horizontal behaves like the vertical layout — the top bar
   collapses into the off-canvas sidebar drawer opened by the toolbar burger. */
@media (max-width: 991.98px) {
  .layout-horizontal #app-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-w);
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    transform: translateX(-100%);
  }

  .layout-horizontal #app-nav > .app-container,
  .layout-horizontal #app-nav > .container,
  .layout-horizontal #app-nav > .container-xl {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: auto;
    padding: 0;
    align-items: stretch;
  }

  .layout-horizontal #app-nav.open {
    transform: translateX(0);
  }

  .layout-horizontal .app-logo {
    border-bottom: 1px solid var(--border);
    border-right: none;
    min-width: 0;
    padding: 0 18px;
  }

  .layout-horizontal .app-navigation {
    display: block;
    align-items: normal;
    gap: 0;
    padding: 14px 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex-wrap: nowrap;
    width: auto;
  }

  .layout-horizontal .side-group {
    position: static;
    display: block;
  }

  .layout-horizontal .side-group-toggle {
    padding: 9px 18px;
    border-radius: 0;
    white-space: normal;
  }

  .layout-horizontal .side-link {
    border-left: 2px solid transparent;
    border-bottom: none;
    padding: 8px 18px;
    white-space: normal;
  }

  .layout-horizontal .side-link.active {
    border-bottom-color: transparent;
    border-left: 2px solid var(--accent);
  }

  .layout-horizontal .side-submenu {
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    box-shadow: none;
    border: none;
    padding: 0;
    z-index: auto;
  }

  .layout-horizontal .side-submenu::before {
    display: none;
  }

  .layout-horizontal .side-group:hover > .side-submenu,
  .layout-horizontal .side-group.kb-open > .side-submenu {
    display: none;
  }

  .layout-horizontal .side-group.open > .side-submenu {
    display: block;
    animation: fadeIn .15s ease;
  }

  .layout-horizontal .side-submenu .side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 22px;
    margin: 0;
    border-radius: 0;
  }

  .layout-horizontal .app-user {
    margin-left: 0;
    border-top: 1px solid var(--border);
    border-left: none;
    padding: 12px 18px;
    height: var(--toolbar-h);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }
  .layout-horizontal .app-user > :not(.footer-user) { display: none; }
  .layout-horizontal .footer-user { width: 100%; }
  .layout-horizontal .footer-user .avatar-btn { padding: 4px; justify-content: space-between; }
  .layout-horizontal .footer-user-chev { transform: none; }
  .layout-horizontal .footer-user.show .footer-user-chev { transform: rotate(180deg); }

  .layout-horizontal #main {
    margin-left: 0;
    padding-top: 0;
  }

  .layout-horizontal #toolbar {
    position: sticky;
    top: 0;
  }

  .layout-horizontal .app-nav-toggle {
    display: inline-flex;
  }

  .layout-horizontal #app-overlay.open {
    display: block;
  }
}

/* RTL: the horizontal fallback drawer mirrors to the right, like the vertical
   drawer in app.css (app.css's [dir="rtl"] rules lose to the horizontal
   translateX(-100%) above by source order, so pin it explicitly here). */
@media (max-width: 991.98px) {
  [dir="rtl"] .layout-horizontal #app-nav {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  [dir="rtl"] .layout-horizontal #app-nav.open {
    transform: translateX(0);
  }
}

/* RTL: mirror the top bar */
[dir="rtl"] .layout-horizontal .app-logo {
  border-right: none;
  border-left: none;
}

[dir="rtl"] .layout-horizontal .app-user {
  margin-left: 0;
  margin-right: auto;
  border-left: none;
  border-right: none;
}

[dir="rtl"] .layout-horizontal .side-submenu {
  left: auto;
  right: 0;
}

[dir="rtl"] .layout-horizontal .side-submenu .side-link {
  border-left: none;
  border-right: 2px solid transparent;
}

[dir="rtl"] .layout-horizontal .side-submenu .side-link.active {
  border-left: none;
  border-right-color: var(--accent);
}

[dir="rtl"] .layout-horizontal #main {
  margin-left: 0;
  margin-right: 0;
}

/* ── Content width: fluid / contained ───────────────────────────────────── */
/* Non-restructured pages cap #content with the token. Restructured pages use
   Bootstrap's container class (.container / .container-xl) as the content
   column, so Bootstrap's breakpoint widths apply instead of the token. */
.layout-fluid #content:not(.container):not(.container-xl),
.layout-contained #content:not(.container):not(.container-xl) {
  max-width: none;
}

.layout-contained #content:not(.container):not(.container-xl) {
  width: 100%;
  max-width: var(--app-contained-w);
  margin-left: auto;
  margin-right: auto;
}

.layout-contained #content.container,
.layout-contained #content.container-xl {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.layout-fluid #content.container,
.layout-fluid #content.container-xl,
.layout-boxed #content.container,
.layout-boxed #content.container-xl {
  max-width: none;
}

/* Matches the contained column plus its padding; kept as a literal because
   media queries cannot read CSS custom properties. The bar inners get the
   same gutter as #content so the top nav / toolbar / footer line up with the
   content column. Boxed shares the same column width, so it gets the same
   gutter for a consistent feel. */
@media (min-width: 1240px) {
  .layout-contained #content,
  .layout-contained #toolbar > .app-container,
  .layout-contained #toolbar > .container,
  .layout-contained #toolbar > .container-xl,
  .layout-horizontal.layout-contained #app-nav > .app-container,
  .layout-horizontal.layout-contained #app-nav > .container,
  .layout-horizontal.layout-contained #app-nav > .container-xl,
  .layout-horizontal.layout-contained .app-footer-inner,
  .layout-boxed #content,
  .layout-boxed #toolbar > .app-container,
  .layout-boxed #toolbar > .container,
  .layout-boxed #toolbar > .container-xl,
  .layout-horizontal.layout-boxed #app-nav > .app-container,
  .layout-horizontal.layout-boxed #app-nav > .container,
  .layout-horizontal.layout-boxed #app-nav > .container-xl,
  .layout-horizontal.layout-boxed .app-footer-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── Sidebar collapse toggle: vertical ↔ mini-sidebar ──────────────────────── */
.app-nav-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s ease, background .15s ease;
}

.app-nav-collapse:hover {
  color: var(--accent-h);
  background: var(--surface2);
}

.layout-horizontal .app-nav-collapse {
  display: none;
}

/* ── Mini Sidebar: icon rail + top toolbar ──────────────────────────────────── */
.layout-mini-sidebar #app-nav {
  width: var(--toolbar-h);
}

.layout-mini-sidebar #main {
  margin-left: var(--toolbar-h);
}

.layout-mini-sidebar .app-logo {
  justify-content: center;
  padding: 0;
  gap: 0;
  font-size: 0;
}

.layout-mini-sidebar .app-logo .logo-mark {
  font-size: 13px;
}

.layout-mini-sidebar .app-nav-collapse {
  display: none;
  margin-left: 0;
  font-size: 14px;
}

@media (min-width: 992px) {
  .layout-mini-sidebar .app-logo:hover .app-nav-collapse {
    display: flex;
  }

  .layout-mini-sidebar .app-logo:hover .logo-mark {
    display: none;
  }
}

.layout-mini-sidebar .app-navigation {
  overflow: visible;
  padding: 12px 0;
}

.layout-mini-sidebar .side-group {
  position: relative;
}

.layout-mini-sidebar .side-group-toggle {
  justify-content: center;
  padding: 11px 0;
  font-size: 0;
  gap: 0;
}

.layout-mini-sidebar .side-group-toggle .sg-icon {
  font-size: 14px;
}

.layout-mini-sidebar .side-group-toggle .sg-chev {
  display: none;
}

.layout-mini-sidebar .side-submenu,
.layout-mini-sidebar .side-group.open .side-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + 2px);
  min-width: 200px;
  z-index: 1050;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  padding: 6px;
}

.layout-mini-sidebar .side-group:hover > .side-submenu,
.layout-mini-sidebar .side-group.kb-open > .side-submenu {
  display: block;
  animation: fadeIn .15s ease;
}

.layout-mini-sidebar .side-submenu::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 8px;
}

.layout-mini-sidebar .side-group:hover > .side-group-toggle,
.layout-mini-sidebar .side-group.kb-open > .side-group-toggle {
  color: var(--text);
  background: var(--surface2);
}
.layout-mini-sidebar .side-group:hover > .side-group-toggle .sg-icon,
.layout-mini-sidebar .side-group.kb-open > .side-group-toggle .sg-icon {
  color: var(--accent-h);
}

.layout-mini-sidebar .side-submenu .side-link {
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  margin: 2px 0;
  padding-left: 22px;
}

.layout-mini-sidebar .side-submenu .side-link.active {
  border-left-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent-h);
}

.layout-mini-sidebar .app-user {
  justify-content: center;
  padding: 10px 0;
  align-items: center;
}

.layout-mini-sidebar .app-user > :not(.footer-user) { display: none; }
.layout-mini-sidebar .footer-user .avatar-btn { padding: 4px; }
.layout-mini-sidebar .footer-user .who,
.layout-mini-sidebar .footer-user-chev { display: none; }
.layout-mini-sidebar .footer-user .dropdown-menu { left: calc(100% + 8px) !important; right: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; }

[dir="rtl"] .layout-mini-sidebar #main {
  margin-left: 0;
  margin-right: var(--toolbar-h);
}

[dir="rtl"] .layout-mini-sidebar .side-submenu {
  left: auto;
  right: calc(100% + 2px);
}

[dir="rtl"] .layout-mini-sidebar .side-submenu::before {
  left: auto;
  right: -8px;
}

[dir="rtl"] .layout-mini-sidebar .side-submenu .side-link {
  border-left: none;
  border-right: 2px solid transparent;
}

[dir="rtl"] .layout-mini-sidebar .side-submenu .side-link.active {
  border-left: none;
  border-right-color: var(--accent);
}
[dir="rtl"] .layout-mini-sidebar .footer-user .dropdown-menu { left: auto !important; right: calc(100% + 8px) !important; }

@media (max-width: 991.98px) {
  .layout-mini-sidebar #app-nav {
    width: 232px;
  }

  .layout-mini-sidebar #main {
    margin-left: 0;
  }

  .layout-mini-sidebar .app-logo {
    justify-content: flex-start;
    padding: 0 18px;
    gap: 10px;
    font-size: 15px;
  }

  .layout-mini-sidebar .app-nav-collapse {
    display: flex;
    margin-left: auto;
  }

  .layout-mini-sidebar .side-group-toggle {
    justify-content: flex-start;
    padding: 8px 18px;
    font-size: 13px;
  }

  .layout-mini-sidebar .side-group-toggle .sg-chev {
    display: inline;
  }

  .layout-mini-sidebar .side-group.open .side-submenu {
    display: block;
    position: static;
    min-width: 0;
    box-shadow: none;
    border: none;
    padding: 0 0 0 6px;
    animation: none;
  }

  .layout-mini-sidebar .app-user {
    justify-content: initial;
    padding: 12px 14px;
    align-items: stretch;
  }

  .layout-mini-sidebar .app-user > :not(.footer-user) { display: flex; }
  .layout-mini-sidebar .footer-user .who,
  .layout-mini-sidebar .footer-user-chev { display: initial; }
  .layout-mini-sidebar .footer-user .dropdown-menu { left: auto !important; right: 0 !important; top: auto !important; bottom: 100% !important; transform: none !important; }

  [dir="rtl"] .layout-mini-sidebar #main {
    margin-right: 0;
  }
}