/**
 * Berlin Nav — vertical sidebar navigation.
 *
 * All layout keys on html.berlinnav-vertical / html.berlinnav-collapsed,
 * which a pre-paint inline script (berlinnav.php) sets BEFORE first render
 * — page navigation never flashes the horizontal layout. js/berlinnav.js
 * keeps the classes in sync on resize and flips the menubar itself
 * (sm-vertical) once core has built it. Below the menubar breakpoint
 * core's own mobile drawer takes over untouched.
 *
 * Colors intentionally stay out of this file: themes (e.g. Berlin Streams)
 * style #civicrm-menu directly, and those rules apply inside the sidebar
 * unchanged. Only layout lives here, driven by --berlinnav-width.
 */

:root {
  --berlinnav-width: 240px;
  --berlinnav-width-collapsed: 52px;
}

/* The collapse toggle only exists in the desktop sidebar. */
@media (max-width: 767.98px) {
  #berlinnav-toggle {
    display: none;
  }
}

@media (min-width: 768px) {
  html.berlinnav-vertical body {
    padding-left: var(--berlinnav-width);
    box-sizing: border-box;
  }

  /* The horizontal menubar reserved its own height above the page
     (margin-top on body, Standalone: menubar-standalone.css); a side
     column needs no top offset. Riverlea's sticky offsets key on
     --crm-menubar-bottom (core JS recomputes it inline — !important
     outranks the inline value). */
  html.berlinnav-vertical body.crm-menubar-over-cms-menu,
  html.berlinnav-vertical body.crm-menubar-over-cms-menu.crm-menubar-wrapped {
    margin-top: 0;
  }

  html.berlinnav-vertical {
    --crm-menubar-bottom: 0px !important;
  }

  /* Riverlea Standalone pads the page 3vw per side — proportional to the
     FULL viewport. With 240px docked at the left, the content area is
     narrower but the gutters keep growing with the window, so they read
     oversized on wide screens. Fixed, moderate gutters instead; themes
     can still override the same custom property. */
  html.berlinnav-vertical.crm-standalone {
    --crm-page-padding: 1px 1.5rem 1rem;
  }

  html.berlinnav-vertical #civicrm-menu-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--berlinnav-width);
    z-index: 900;
    /* Submenus fly out to the right of the column; clipping them with
       overflow would break SmartMenus' absolute positioning. */
    overflow: visible;
  }

  /* Core pins the ul itself fixed at full width (over-cms-menu mode,
     body.… #civicrm-menu = 1,1,1) — the extra body in the chain outranks
     it (1,1,2). overflow stays visible so submenus can fly out right —
     menus taller than the viewport are a known v0.1 limitation. */
  html.berlinnav-vertical body #civicrm-menu {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    overflow: visible;
  }

  html.berlinnav-vertical #civicrm-menu > li {
    float: none;
    width: 100%;
  }

  html.berlinnav-vertical #civicrm-menu > li > a {
    display: block;
  }

  /* The "Home" item is just the compact CiviCRM logo — orphaned between
     quicksearch and menu in a column. Park it at the very bottom as the
     column's footer (visual order only; DOM/focus order is unchanged). */
  html.berlinnav-vertical #civicrm-menu > li[data-name="Home"] {
    margin-top: auto;
    order: 1000;
  }

  /* The page footer's content (system status + version) moves into the
     sidebar as #berlinnav-status; the footers themselves disappear. */
  html.berlinnav-vertical #civicrm-footer,
  html.berlinnav-vertical #access {
    display: none;
  }

  html.berlinnav-vertical #civicrm-menu > #berlinnav-status {
    order: 999;
  }

  #berlinnav-status.crm-ok i {
    color: var(--crm-success-color, #4caf50);
  }

  #berlinnav-status.crm-warning i,
  #berlinnav-status.crm-alert i {
    color: var(--crm-warning-color, #ff9800);
  }

  #berlinnav-status.crm-error i {
    color: var(--crm-danger-color, #f44336);
  }

  /* Footer group above the logo: collapse toggle first (it pushes the
     group down), then the color-mode toggle. */
  html.berlinnav-vertical #civicrm-menu > #berlinnav-toggle {
    margin-top: auto;
    order: 997;
  }

  html.berlinnav-vertical #civicrm-menu > #berlinnav-colormode {
    order: 998;
  }

  html.berlinnav-vertical #civicrm-menu.berlinnav-has-toggle > li[data-name="Home"] {
    margin-top: 0;
  }

  /* Quicksearch sits at the top of the column, full width. */
  html.berlinnav-vertical #crm-qsearch {
    width: 100%;
    box-sizing: border-box;
  }

  html.berlinnav-vertical #crm-qsearch input[name="qfKey"],
  html.berlinnav-vertical #crm-qsearch .crm-quickSearchField {
    max-width: 100%;
  }

  /* Full column width minus the input's own 4px side margins. */
  html.berlinnav-vertical input#crm-qsearch-input {
    width: calc(100% - 8px) !important;
    box-sizing: border-box;
  }

  /* The sidebar narrows the content area, so tables whose min-content
     width used to fit the viewport now overflow it — they must scroll
     inside their own container instead of dragging the whole page
     sideways under the fixed sidebar. Trade-off: a scroll container
     captures position:sticky, so Riverlea's sticky table headers pin to
     the wrapper (= not at all) in vertical mode. */
  html.berlinnav-vertical .crm-search-display-table {
    overflow-x: auto;
  }

  /* Collapsed: narrow icon strip (Firefox vertical-tabs style). Labels
     and quicksearch disappear, icons center, flyouts keep working. */
  html.berlinnav-vertical.berlinnav-collapsed body {
    padding-left: var(--berlinnav-width-collapsed);
  }

  html.berlinnav-vertical.berlinnav-collapsed #civicrm-menu-nav {
    width: var(--berlinnav-width-collapsed);
  }

  html.berlinnav-vertical.berlinnav-collapsed #crm-qsearch {
    display: none;
  }

  html.berlinnav-vertical.berlinnav-collapsed #civicrm-menu > li > a > span {
    display: none;
  }

  html.berlinnav-vertical.berlinnav-collapsed #civicrm-menu > li > a {
    text-align: center;
  }

  html.berlinnav-vertical.berlinnav-collapsed #civicrm-menu > li > a i {
    margin-right: 0;
  }
}