/**
 * Civi360 collapsible left menu.
 * WordPress style click to collapse sidebar.
 * Single top collapse button only.
 * Includes Superfish submenu visibility fixes.
 * Includes Drupal admin toolbar z-index fix.
 */

@media (min-width: 992px) {
  :root {
    --civi360-sidebar-expanded: 230px;
    --civi360-sidebar-collapsed: 56px;
    --civi360-sidebar-speed: 0.22s;
    --civi360-sidebar-bg: #f7f9fb;
    --civi360-sidebar-border: #d7dde3;
    --civi360-sidebar-button-bg: #003b5c;
    --civi360-sidebar-button-bg-hover: #00547f;
    --civi360-sidebar-button-text: #ffffff;
  }

  body.civi360-sidebar-ready .civi360-layout-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    overflow: visible !important;
  }

  body.civi360-sidebar-ready .civi360-sidebar-col {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--civi360-sidebar-expanded) !important;
    width: var(--civi360-sidebar-expanded) !important;
    max-width: var(--civi360-sidebar-expanded) !important;
    min-width: 0 !important;
    background: var(--civi360-sidebar-bg);
    border-right: 1px solid var(--civi360-sidebar-border);
    position: relative;
    z-index: 1000 !important;
    overflow: visible !important;
    transition:
      flex-basis var(--civi360-sidebar-speed) ease,
      width var(--civi360-sidebar-speed) ease,
      max-width var(--civi360-sidebar-speed) ease;
  }

  body.civi360-sidebar-ready .civi360-content-col {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.civi360-sidebar-collapsed .civi360-sidebar-col {
    flex: 0 0 var(--civi360-sidebar-collapsed) !important;
    width: var(--civi360-sidebar-collapsed) !important;
    max-width: var(--civi360-sidebar-collapsed) !important;
    overflow: hidden !important;
  }

  .civi360-sidebar-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--civi360-sidebar-border);
    border-radius: 0;
    background: var(--civi360-sidebar-button-bg);
    color: var(--civi360-sidebar-button-text);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-align: left;
    line-height: 1.2;
  }

  .civi360-sidebar-toggle:hover,
  .civi360-sidebar-toggle:focus {
    background: var(--civi360-sidebar-button-bg-hover);
    outline: none;
  }

  .civi360-sidebar-toggle-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    text-align: center;
  }

  .civi360-sidebar-toggle-label {
    display: inline-block;
    white-space: nowrap;
  }

  body.civi360-sidebar-collapsed .civi360-sidebar-toggle {
    justify-content: center;
    padding: 0;
  }

  body.civi360-sidebar-collapsed .civi360-sidebar-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  body.civi360-sidebar-ready .civi360-sidebar-col .region-sidebar-first {
    flex: 1 1 auto;
    width: 100%;
    overflow: visible !important;
    transition:
      opacity var(--civi360-sidebar-speed) ease,
      visibility var(--civi360-sidebar-speed) ease;
  }

  body.civi360-sidebar-collapsed .civi360-sidebar-col .region-sidebar-first {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden !important;
  }

  body.civi360-sidebar-ready .civi360-sidebar-col .region-sidebar-first a {
    white-space: nowrap;
  }

  body.civi360-sidebar-ready .civi360-sidebar-col .sf-menu,
  body.civi360-sidebar-ready .civi360-sidebar-col .menu {
    width: 100%;
    overflow: visible !important;
  }

  body.civi360-sidebar-ready .civi360-sidebar-col .sf-menu li,
  body.civi360-sidebar-ready .civi360-sidebar-col .menu li {
    width: 100%;
    position: relative;
    overflow: visible !important;
  }

  body.civi360-sidebar-ready .civi360-sidebar-col .sf-menu ul,
  body.civi360-sidebar-ready .civi360-sidebar-col .menu ul {
    z-index: 2000 !important;
    overflow: visible !important;
  }

  body.civi360-sidebar-ready .civi360-sidebar-col .sf-menu li:hover > ul,
  body.civi360-sidebar-ready .civi360-sidebar-col .sf-menu li.sfHover > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.civi360-sidebar-collapsed .civi360-sidebar-col .region-sidebar-first a {
    pointer-events: none;
  }
}

/**
 * Drupal admin toolbar fix.
 * Keeps Drupal toolbar fly-out menus above the Civi360 sidebar.
 */

#toolbar-administration,
#toolbar-administration .toolbar-bar,
#toolbar-administration .toolbar-tray,
#toolbar-administration .toolbar-menu,
#toolbar-administration .toolbar-lining,
.toolbar,
.toolbar-bar,
.toolbar-tray,
.toolbar-menu {
  z-index: 10000 !important;
}

#toolbar-administration .toolbar-tray,
#toolbar-administration .toolbar-menu,
#toolbar-administration .toolbar-lining {
  z-index: 10001 !important;
}

@media (max-width: 991.98px) {
  .civi360-sidebar-toggle {
    display: none;
  }
}