/* dev-doc: 2026-10-06 21:10 team-portal-mcp */
/* Team language picker, shared by the dashboard header (template/header.html) and the login page
   (Views/Account/Login.cshtml): the scribblemaps.com header selector's look. Flag + each language's own name, two
   columns on wide screens, opens on hover as well as click, current language bold blue, scrolls on short screens.
   Each page styles its own toggle; this file is the menu. */
.tm-language-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  -webkit-flex: none;
  flex: none;
}
.tm-language-menu {
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 160px;
  padding: 4px 0;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1024px) {
  /* No height cap here: CSS columns under a max-height spill extra columns sideways, which scrolled the menu
     horizontally. 21 languages in two columns (~11 rows) fit any desktop height. The selector outranks the
     dashboard's generic ".header-inner .dropdown .dropdown-menu" 400px cap (team.css). */
  .dropdown.tm-language > .dropdown-menu.tm-language-menu {
    min-width: 320px;
    max-height: none;
    overflow: hidden;
    padding: 8px;
    -webkit-columns: 2;
    columns: 2;
    -webkit-column-gap: 0;
    column-gap: 0;
  }
  /* Open on hover. The dashboard theme shows menus by scale + opacity on .open rather than display, so hover sets
     all three; on the login page (plain Bootstrap) display alone does it. */
  .dropdown.tm-language:hover > .dropdown-menu.tm-language-menu {
    display: block;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.tm-language-menu > li {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
.tm-language-menu > li > a {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: #333;
  font-size: 14px;
  white-space: nowrap;
  border-radius: 4px;
}
.tm-language-menu > li > a:hover,
.tm-language-menu > li > a:focus {
  background: #f5f5f5;
  color: #333;
  text-decoration: none;
}
.tm-language-menu > li.active > a,
.tm-language-menu > li.active > a:hover {
  font-weight: 600;
  color: #1e50c3;
  background: transparent;
}