/* End of the cabinet sidebar list (app-sidebar.css): «Обучение и новости», account and version, a line above.
   Figma «LidFly — Бренд и UI Kit 2026» → Sidebar (57:1609). It scrolls with the items, above the pinned «Аккаунт».
   The theme switch (.sidebar-theme__switch) stands in the logo row; its look is kept here. Collapsed panel: one
   theme button at the end of the list; phone panel: theme buttons 44 × 40 and logos 24 with 44 × 44 hit areas. */

.sidebar-meta {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 4px 0 6px;
  border-top: 1px solid var(--lf-border-subtle);
}

.sidebar-social,
.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
}

.sidebar-social-label,
.sidebar-account-type,
.sidebar-version {
  color: var(--lf-text-secondary);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.sidebar-theme__switch {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border-radius: var(--lf-radius-sm);
  background: var(--lf-bg-muted);
}

.sidebar-theme__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  /* 6 px, the kit's radius/xs: the track's 8 minus its 2 px padding. */
  border-radius: calc(var(--lf-radius-sm) - 2px);
  background: transparent;
  color: var(--lf-text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-theme__option svg {
  display: block;
  width: 16px;
  height: 16px;
}

.sidebar-theme__option:hover,
.sidebar-theme__option[aria-pressed="true"] {
  color: var(--lf-text-primary);
}

.sidebar-theme__option[aria-pressed="true"] {
  background: var(--lf-bg-surface);
  box-shadow: var(--lf-shadow-elevation-1);
}

.sidebar-theme__option:focus-visible,
.sidebar-social-link:focus-visible {
  outline: none;
  box-shadow: var(--lf-focus-ring);
}

/* One theme button of the collapsed panel: moon in the light theme, sun in the dark one. */
.sidebar-meta .sidebar-theme-toggle,
.sidebar-theme-toggle .sidebar-theme-toggle__sun,
:root[data-theme="dark"] .sidebar-theme-toggle .sidebar-theme-toggle__moon {
  display: none;
}

:root[data-theme="dark"] .sidebar-theme-toggle .sidebar-theme-toggle__sun {
  display: block;
}

/* «Обучение и новости»: one-colour logos 18, 12 apart: ВКонтакте, Telegram, MAX. */
.sidebar-social-links {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding-right: 6px;
}

.sidebar-social-link {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--lf-radius-sm);
  color: var(--lf-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.sidebar-social-link svg {
  display: block;
  width: 18px;
  height: 18px;
}

.sidebar-social-link:hover {
  color: var(--lf-text-primary);
}

/* Account type (agency) or the account switcher on the left, version on the right. */
.sidebar-footer {
  flex-wrap: wrap;
  padding-top: 4px;
}

.sidebar-account-type {
  display: none;
}

.sidebar-account-switcher {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 16px 0 0;
  border: 0;
  border-radius: var(--lf-radius-sm);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) right 5px center / 5px 5px no-repeat,
    linear-gradient(-45deg, transparent 50%, currentColor 50%) right 0 center / 5px 5px no-repeat;
  color: var(--lf-text-secondary);
  font: 400 13px/18px var(--font-sans);
  text-overflow: ellipsis;
  cursor: pointer;
  appearance: none;
}

.sidebar-account-switcher:focus-visible {
  outline: none;
  box-shadow: var(--lf-focus-ring);
}

.sidebar-version {
  margin-left: auto;
  color: var(--lf-text-tertiary);
  white-space: nowrap;
}

@media (min-width: 1121px) {
  .sidebar.is-collapsed .sidebar-social,
  .sidebar.is-collapsed .sidebar-footer {
    display: none;
  }

  .sidebar.is-collapsed .sidebar-meta {
    align-items: center;
    gap: 0;
    margin-top: 24px;
    padding: 0;
    border-top: 0;
  }

  .sidebar.is-collapsed .sidebar-meta::before {
    content: "";
    width: 28px;
    height: 1px;
    margin: 8px 0 12px;
    background: var(--lf-border-subtle);
  }

  .sidebar.is-collapsed .sidebar-meta .sidebar-theme-toggle {
    display: inline-flex;
  }
}

@media (max-width: 1120px) {
  .sidebar-meta {
    gap: 14px;
    margin-top: 16px;
  }

  /* Theme buttons 44 × 40; with the 2 px track the hit area is 44 × 44. */
  .sidebar-theme__option,
  .sidebar-brand .sidebar-theme__option {
    width: 44px;
    height: 40px;
  }

  .sidebar-theme__option::after {
    content: "";
    position: absolute;
    inset: -2px 0;
  }

  .sidebar-theme__option svg {
    width: 20px;
    height: 20px;
  }

  /* Logos 24, 16 apart; each has a 44 × 44 hit area around it (neighbours share the 4 px between them). */
  .sidebar-social-links {
    gap: 16px;
  }

  .sidebar-social-link,
  .sidebar-social-link svg {
    width: 24px;
    height: 24px;
  }

  .sidebar-social-link::after {
    content: "";
    position: absolute;
    inset: -10px;
  }

  /* The account switcher keeps its caption line but takes 44 px for a finger. */
  .sidebar-account-switcher {
    margin: -13px 0;
    padding-block: 13px;
  }
}