/* Keep native dropdown menus readable across browser and operating-system themes. */
select,
.select {
  box-sizing: border-box;
  color: var(--text-primary, #101828);
  background-color: #fff;
  color-scheme: light;
  line-height: 1.4;
  -webkit-text-fill-color: currentColor;
}

/* Language must remain visible for every Appearance menu-bar colour. The
   collapsed control intentionally renders only the selected country flag. */
.language-flag-button {
  width: 42px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, var(--surface, #fff) 90%, transparent);
  color: var(--text-primary, #17211b);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
  cursor: pointer;
}
.language-flag-button:hover { transform: translateY(-1px); }
[data-menu-color="dark"] .language-flag-button,
[data-topbar-color="dark"] .language-flag-button,
.topbar-dark .language-flag-button,
.theme-dark .language-flag-button {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.34);
  color: #fff;
}
.topbar .popover,
.topbar .role-switch {
  background: var(--surface, #fff) !important;
  color: var(--text-primary, #17211b) !important;
  border-color: var(--border, #d7dfda) !important;
}
.topbar .popover-item,
.topbar .role-switch-item,
.topbar .popover-head,
.topbar .role-switch-t { color: var(--text-primary, #17211b) !important; }
.theme-dark .topbar .popover,
.theme-dark .topbar .role-switch,
[data-theme="dark"] .topbar .popover,
[data-theme="dark"] .topbar .role-switch {
  --surface: #152019;
  --text-primary: #f6faf7;
  --border: #3b4d42;
}

/* Native selects ignore flex centering. Do not combine a fixed height with
   vertical padding: Chromium clips the selected value when the UI font loads. */
select.select {
  min-height: 42px;
  padding-block: 0;
}

select.select.sm,
.um-edit .select.sm {
  height: 38px;
  min-height: 38px;
  padding: 0 38px 0 12px;
  line-height: normal;
}

select option,
.select option {
  color: #101828;
  background-color: #fff;
  -webkit-text-fill-color: #101828;
}

select:disabled,
.select:disabled {
  color: var(--gray-600, #475467);
  opacity: 1;
}

.app[data-theme="dark"] select,
.app[data-theme="dark"] .select {
  color: #f2f4f7;
  background-color: #262626;
  color-scheme: dark;
  -webkit-text-fill-color: currentColor;
}

.app[data-theme="dark"] select option,
.app[data-theme="dark"] .select option {
  color: #f2f4f7;
  background-color: #1f1f1f;
  -webkit-text-fill-color: #f2f4f7;
}

/* Member administration: prevent long permission labels from creating a
   horizontal scroll area, and keep dialogs above their originating drawer. */
.um-drawer-body {
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.um-edit {
  min-width: 0;
}

.um-edit > span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.um-edit .select.sm {
  flex: 0 0 200px;
  max-width: 100%;
}

.modal-bg {
  z-index: 1400;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal {
  max-height: calc(100dvh - 32px);
}

.um-drawer-foot,
.modal-foot {
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .um-drawer {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }

  .um-drawer-tabs {
    padding-inline: 10px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .um-drawer-body {
    padding: 16px;
  }

  .um-edit {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .um-edit .select.sm {
    width: 100% !important;
    flex-basis: auto;
  }

  .um-drawer-foot {
    padding: 12px 16px;
  }

  .um-drawer-foot .btn {
    flex: 1 1 132px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .um-drawer-head {
    padding: 14px 16px 10px;
  }

  .um-drawer-badges {
    padding: 0 16px 12px;
  }

  .modal-bg {
    align-items: stretch;
    padding: 0;
  }

  .modal {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .modal-head,
  .modal-body,
  .modal-foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  .modal-foot .btn {
    flex: 1 1 120px;
    justify-content: center;
  }
}