/* Infinity Connect sidebar restyle — keeps AdminLTE structure, reduces visual clutter */

.skin-blue .main-sidebar.ic-sidebar,
.skin-blue .wrapper .main-sidebar.ic-sidebar {
  background: #111111;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
}

.ic-sidebar .sidebar {
  padding-bottom: 16px;
}

.ic-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 64px;
  padding: 8px 10px 8px 12px;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(194, 61, 138, 0.35);
}

.ic-brand-link {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none !important;
  background: transparent !important;
}

.ic-brand-link .ic-logo-wordmark {
  display: block;
  max-height: 42px;
  width: auto;
  /* 100%, not the 168px this used to be. The link is what is left of the
     brand bar once the toggle has taken its share, and a fixed 168px did not
     know that: widening the toggle to a 44px touch target left the link at
     156px and the logo overlapped the hamburger by 4px. Tied to the container
     it cannot collide at any sidebar width. max-height still caps it. */
  max-width: 100%;
  mix-blend-mode: screen;
}

.ic-brand-link .ic-logo-mark {
  display: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
  mix-blend-mode: screen;
}

.ic-brand-toggle {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  color: #e6edf5 !important;
  text-align: center;
  border-radius: 8px;
  background: transparent !important;
}

.ic-brand-toggle:before {
  content: "\f0c9";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 36px;
}

.ic-brand-toggle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.ic-sidebar .user-panel {
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, #1a1a1a 0%, #111111 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.ic-sidebar .user-panel > .image {
  display: none;
}

.ic-sidebar .user-panel .info {
  position: relative;
  left: auto;
  float: none;
  padding: 0;
}

.ic-sidebar .user-panel .info p {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ic-sidebar .user-panel .info .user-panel-links {
  display: block;
  margin-top: 2px;
}

.ic-sidebar .user-panel .info a {
  display: inline-block;
  margin-right: 10px;
  font-size: 12px;
  color: #c9d4e3 !important;
}

.ic-sidebar .user-panel .info a:hover {
  color: #fff !important;
}

.ic-sidebar .sidebar-search {
  padding: 12px 12px 6px;
}

.ic-sidebar .sidebar-search .form-control {
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #1c1c1c;
  color: #e6edf5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-size: 12px;
  padding: 8px 12px;
}

.ic-sidebar .sidebar-search .form-control:focus {
  background: #242424;
  box-shadow: inset 0 0 0 1px #3c8dbc;
  outline: none;
}

.ic-sidebar .sidebar-search .form-control::-webkit-input-placeholder {
  color: #7d8a9d;
}

.ic-sidebar .sidebar-search .form-control::-moz-placeholder {
  color: #7d8a9d;
}

.skin-blue .ic-sidebar .sidebar-menu > li.header {
  padding: 12px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #6f7c90;
  background: transparent;
}

.skin-blue .ic-sidebar .sidebar-menu > li > a {
  margin: 2px 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 0;
  color: #c5d0de;
  font-size: 13px;
}

.skin-blue .ic-sidebar .sidebar-menu > li > a > .fa {
  width: 20px;
  margin-right: 6px;
  color: #8aa0b8;
}

.skin-blue .ic-sidebar .sidebar-menu > li:hover > a,
.skin-blue .ic-sidebar .sidebar-menu > li.active > a,
.skin-blue .ic-sidebar .sidebar-menu > li.menu-open > a {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-left: 0;
}

.skin-blue .ic-sidebar .sidebar-menu > li.active > a {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 0 0 #7b4bb0;
}

.skin-blue .ic-sidebar .sidebar-menu > li:hover > a > .fa,
.skin-blue .ic-sidebar .sidebar-menu > li.active > a > .fa,
.skin-blue .ic-sidebar .sidebar-menu > li.menu-open > a > .fa {
  color: #fff;
}

.skin-blue .ic-sidebar .sidebar-menu > li > .treeview-menu {
  margin: 0 8px 6px;
  padding: 4px 0 6px;
  background: #0d0d0d;
  border-radius: 0 0 8px 8px;
  display: none;
}

.skin-blue .ic-sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu {
  display: block;
}

.skin-blue .ic-sidebar .sidebar-menu > li.treeview.menu-open > a,
.skin-blue .ic-sidebar .sidebar-menu > li.treeview.active > a {
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

.ic-sidebar .sidebar-menu .treeview-menu > li > a {
  padding: 7px 12px 7px 28px;
  color: #9aa8bb;
  font-size: 12px;
  border-radius: 6px;
  margin: 1px 6px;
}

.ic-sidebar .sidebar-menu .treeview-menu > li > a > .fa {
  width: 16px;
  margin-right: 6px;
  font-size: 12px;
}

/* ---- Touch targets ------------------------------------------------------
   docs/UI_STANDARD.md: "Touch targets on sidebar and toolbars stay >= 44px".
   Measured at 1400px before this block, all 35 sidebar targets were under it:
   top-level rows 39px, submenu rows 31px, Profile / Log Out 13px, the brand
   link 33px, its toggle 36px, the search box 34px.

   This file already carried a 44px rule -- but only for top-level rows, and
   only inside the max-width:767px block, so the desktop staff actually work
   on was never covered.

   min-height rather than height, so a label that wraps to two lines still
   grows, and flex so it centres in the taller box instead of sitting at the
   top of it. These links hold an icon and a label and nothing else: no
   carets, badges or pull-right containers anywhere in _aside.html.erb, so
   changing the layout model here is safe. */
.ic-sidebar .sidebar-menu > li > a,
.skin-blue .ic-sidebar .sidebar-menu > li > a,
.ic-sidebar .sidebar-menu .treeview-menu > li > a,
.skin-blue .ic-sidebar .sidebar-menu .treeview-menu > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Profile and Log Out, the two smallest targets in the app at 13px. They sit
   side by side under the user's name, so the 44px is bought with padding and
   given back with negative margin -- a full 44px box each would otherwise add
   about 30px of empty panel for two words of text. */
.ic-sidebar .user-panel .info a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -14px;
  margin-bottom: -14px;
}

.ic-brand-link {
  min-height: 44px;
}

.ic-brand-toggle {
  width: 44px;
  height: 44px;
}

.ic-brand-toggle:before {
  line-height: 44px;
}

/* Qualified past `body.spx-app .sidebar-search input.form-control`, which sets
   34px with no media query and so was quietly beating this file's own
   max-width:767px rule at every width. */
body.spx-app .ic-sidebar .sidebar-search input.form-control,
.ic-sidebar .sidebar-search .form-control {
  height: 44px;
  min-height: 44px;
}

.skin-blue .ic-sidebar .sidebar-menu .treeview-menu > li > a:hover,
.skin-blue .ic-sidebar .sidebar-menu .treeview-menu > li.active > a {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}

.ic-sidebar .sidebar-menu .treeview > a > .pull-right-container {
  right: 14px;
  margin-top: -8px;
}

.ic-sidebar .sidebar-menu .treeview > a > .pull-right-container > .fa-angle-left {
  color: #7d8a9d;
}

.sidebar-mini.sidebar-collapse .ic-sidebar .sidebar-search-item {
  display: none !important;
}

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .ic-brand {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: auto;
    min-height: 0;
    padding: 10px 0 8px;
  }

  .sidebar-mini.sidebar-collapse .ic-brand-link {
    justify-content: center;
    flex: 0 0 auto;
  }

  .sidebar-mini.sidebar-collapse .ic-brand-link .ic-logo-wordmark {
    display: none;
  }

  .sidebar-mini.sidebar-collapse .ic-brand-link .ic-logo-mark {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .sidebar-mini.sidebar-collapse .ic-brand-toggle {
    width: 32px;
    height: 32px;
  }

  .sidebar-mini.sidebar-collapse .ic-brand-toggle:before {
    font-size: 15px;
    line-height: 32px;
  }

  .sidebar-mini.sidebar-collapse .ic-sidebar .user-panel,
  .sidebar-mini.sidebar-collapse .ic-sidebar .sidebar-menu > li.header {
    display: none !important;
  }

  .sidebar-mini.sidebar-collapse .ic-sidebar .sidebar-menu > li > a {
    margin: 3px 7px;
    padding: 9px 0;
    text-align: center;
    border-radius: 8px;
  }

  .sidebar-mini.sidebar-collapse .skin-blue .ic-sidebar .sidebar-menu > li > a > .fa {
    width: auto;
    margin: 0;
    float: none;
    display: inline-block;
    font-size: 15px;
    line-height: 1;
  }

  .sidebar-mini.sidebar-collapse .ic-sidebar .sidebar-menu > li > a > .pull-right-container {
    display: none !important;
  }

  .sidebar-mini.sidebar-collapse .skin-blue .ic-sidebar .sidebar-menu > li.active > a,
  .sidebar-mini.sidebar-collapse .skin-blue .ic-sidebar .sidebar-menu > li:hover > a,
  .sidebar-mini.sidebar-collapse .skin-blue .ic-sidebar .sidebar-menu > li.menu-open > a {
    box-shadow: none;
  }

  .sidebar-mini.sidebar-collapse .skin-blue .ic-sidebar .sidebar-menu > li.treeview.menu-open > a,
  .sidebar-mini.sidebar-collapse .skin-blue .ic-sidebar .sidebar-menu > li.treeview.active > a {
    border-radius: 8px;
    margin-bottom: 3px;
  }

  .sidebar-mini.sidebar-collapse .ic-sidebar .sidebar-menu > li > .treeview-menu {
    margin: 0;
    border-radius: 0 8px 8px 0;
  }

  .sidebar-mini.sidebar-collapse .skin-blue .ic-sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu {
    display: none;
  }

  .sidebar-mini.sidebar-collapse .skin-blue .ic-sidebar .sidebar-menu > li.treeview:hover > .treeview-menu {
    display: block;
  }
}

@media (max-width: 767px) {
  /* 16px so iOS does not zoom the page when the field takes focus. The height
     is set unconditionally in the touch-target block above. */
  .ic-sidebar .sidebar-search .form-control {
    font-size: 16px;
  }

  .skin-blue .ic-sidebar .sidebar-menu > li > a {
    padding: 12px 12px;
  }

  .ic-sidebar .sidebar-menu .treeview-menu > li > a {
    padding: 10px 12px 10px 28px;
  }
}