/* ===========================================================
   名前を選ぶ画面（業務アプリの「使える人」）。

   **業務アプリ共通の部品からの写しです。**
   元: src/AppKit/wwwroot/css/names.css
   base は AppKit を読まないので、写しで持ちます（js/names.js と同じ扱い。
   Db.cs・AccessName.cs と同じ決まりです）。**元を直したら、こちらにも。**

   置き場所・大きさ・囲みだけをここで決めます。**色と余白は base の
   変数を使います**（`--space-*` / `--main-color` など。base.css）。
   枠組み（`.dialog` `.panel` `.btn` `.field__input`）は base の物を借ります。
   =========================================================== */

/* 欄の下に置く「名前から選ぶ…」。 */
.namepick {
  margin-top: var(--space-1, 4px);
}

/* 種類のタブ。 */
.namekinds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  border-bottom: var(--base-border, 1px solid rgba(0, 0, 0, 0.12));
  margin-bottom: var(--space-3, 12px);
}

.namekind {
  border: 0;
  border-bottom: 2px solid transparent;
  background-color: transparent;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  color: var(--sub-text-color, #667);
  font: inherit;
  cursor: pointer;
}

.namekind:hover {
  color: var(--main-color, #39c);
}

.namekind[aria-current="true"] {
  border-bottom-color: var(--main-color, #39c);
  color: var(--main-color, #39c);
  font-weight: 600;
}

/* **高さを決め打ちます。**中身で伸び縮みすると、1 つ選ぶたびに下の物が
   動いて、次に押したい行が別の場所へ行きます。 */
.namelist {
  display: flex;
  flex-direction: column;
  border: var(--base-border, 1px solid rgba(0, 0, 0, 0.12));
  border-radius: var(--border-radius, 6px);
  height: 320px;
  overflow-y: auto;
}

.namerow {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  border: 0;
  border-bottom: var(--base-border, 1px solid rgba(0, 0, 0, 0.12));
  background-color: transparent;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.namerow:last-child {
  border-bottom: 0;
}

.namerow:hover {
  background-color: var(--main-color-pale, rgba(51, 153, 204, 0.08));
}

/* **入っている行は、押した跡が残る形**にします（選び直せるように）。 */
.namerow--on {
  background-color: var(--main-color-pale, rgba(51, 153, 204, 0.08));
  font-weight: 600;
}

.namerow--on .namerow__label::before {
  content: "✓ ";
  color: var(--main-color, #39c);
}

/* たどる行。**選ぶ行と見分けが付くように**、少し落として置きます。 */
.namerow--branch {
  color: var(--sub-text-color, #667);
}

/* 開く・閉じるの印。**字（▸ ▾）ではなく図形**にします。字は書体によって大きさも
   位置も揃わず、小さく見えるためです。向きは回して変えます（開いたら下向き）。 */
.namerow__mark {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--sub-text-color, #667);
}

.namerow__mark svg {
  display: block;
  width: 14px;
  height: 14px;
}

.namerow__mark--open svg {
  transform: rotate(90deg);
}

/* 開いたのに誰もいなかったとき。押せません。 */
.namerow--none {
  color: var(--sub-text-color, #667);
  cursor: default;
}

.namerow--none:hover {
  background-color: transparent;
}

.namerow__note {
  color: var(--sub-text-color, #667);
  font-size: var(--font-size-sm, 0.85em);
}

/* 選んだ物が増えても、下が押し下げられないように。 */
.namepicked {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: var(--space-1, 4px);
  min-height: 4.4em;
  max-height: 4.4em;
  overflow-y: auto;
}

/* 入っている物 1 つ。 */
.namechip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  border-radius: 999px;
  background-color: var(--main-color-pale, rgba(51, 153, 204, 0.08));
  padding: 2px var(--space-2, 8px);
  font-size: var(--font-size-sm, 0.85em);
  line-height: 1.6;
}

/* **名前だけだと同姓同名を見分けられません。**コードを小さく添えます。 */
.namechip__code {
  color: var(--sub-text-color, #667);
}

.namechip__code:empty {
  display: none;
}

.namechip__drop {
  border: 0;
  background-color: transparent;
  padding: 0;
  color: var(--sub-text-color, #667);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.namechip__drop:hover {
  color: var(--danger-color, #c33);
}

/* 出たり消えたりする但し書き。**場所は空けたままにします。** */
.namepicker__note {
  color: var(--sub-text-color, #667);
  font-size: var(--font-size-sm, 0.85em);
  min-height: 1.4em;
}