@charset "UTF-8";
/* ============================================================================
 * views/user.css
 * COLAVIA v1.000.0000
 *
 *   ユーザー・組織管理（§5.2 / §5.2-1）と、プロフィール編集（§5.2-4）。
 *
 *   この画面は管理者専用。メインメニューには置かず、設定メニューから開く（§6.1）。
 *   ただしプロフィール編集は全員が使うため、同じ部品を共用する。
 *
 *   出所: mock/user.html の <style> から切り出したもの。
 *         モック専用だった .mockbar（表示権限の切替）は取り除いてある。
 *         実装では権限がセッションから決まるため不要（§10）。
 * ========================================================================== */
/* ---------------------------------------------------------------------------
 * 2. ユーザー一覧
 * ------------------------------------------------------------------------- */

.ugrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--sp-4);
}

.ucard {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 0.0625rem solid var(--c-hairline); border-radius: var(--r-md);
  background-color: var(--c-surface); box-shadow: var(--shadow-card);
  cursor: pointer; text-align: left;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.ucard:hover { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.10); transform: translateY(-0.0625rem); }

.ucard__main { flex: 1 1 auto; min-width: 0; }

.ucard__name { font-size: var(--fs-md); font-weight: 700; line-height: 1.4; }

.ucard__kana { font-size: var(--fs-xs); color: var(--c-text-tertiary); }

.ucard__meta { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-secondary); line-height: 1.7; }

.ucard__orgs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: var(--sp-2); }

/* 停止中のユーザーは控えめに見せる */

.ucard.is-suspended, .row-suspended { opacity: 0.55; }

.avatar--xl { width: 3.5rem; height: 3.5rem; font-size: var(--fs-md); }

/* 組織のチップ */

.org-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  height: 1.25rem; padding: 0 var(--sp-2);
  border-radius: var(--r-xs);
  background-color: color-mix(in srgb, var(--tone, var(--c-gray)) 14%, transparent);
  color: var(--tone, var(--c-gray));
  font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 3. ユーザー詳細
 * ------------------------------------------------------------------------- */

/* 定義リスト形式のプロフィール表示 */

/* 管理者のみ閲覧できる項目の印 */

.admin-only {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.625rem; font-weight: 700; color: var(--c-orange);
}

.hidden-value { color: var(--c-text-tertiary); font-style: normal; }

/* 一覧の行（参加中のプロジェクトなど） */

/* ---------------------------------------------------------------------------
 * 4. フォーム
 * ------------------------------------------------------------------------- */

.form { display: grid; gap: var(--sp-4); }

.input:disabled { opacity: 0.55; cursor: not-allowed; }

.form-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  padding-top: var(--sp-4); margin-top: var(--sp-2);
  border-top: 0.0625rem solid var(--c-separator);
}

/* アバターの変更 */

.avatar-edit { display: flex; align-items: center; gap: var(--sp-4); }

/* 色の選択 */

.color-picks { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.color-pick {
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-full);
  background-color: var(--tone); position: relative;
}

.color-pick.is-on::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 0.6875rem;
}

/* ---------------------------------------------------------------------------
 * 5. 組織マスタ管理
 * ------------------------------------------------------------------------- */

.org-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 0.0625rem solid var(--c-separator);
}

.org-row:last-child { border-bottom: none; }

.org-row:hover { background-color: var(--c-fill); }

.org-row.is-inactive { opacity: 0.5; }

.org-row__main { flex: 1 1 auto; min-width: 0; }

.org-row__name { font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.org-row__meta { font-size: var(--fs-xs); color: var(--c-text-secondary); }

.org-swatch { flex-shrink: 0; width: 0.75rem; height: 0.75rem; border-radius: var(--r-full); background-color: var(--tone, var(--c-gray)); }

/* 並べ替えボタン */

.sort-btns { display: flex; flex-direction: column; gap: 0.125rem; flex-shrink: 0; }

.sort-btns button {
  display: grid; place-items: center;
  width: 1.25rem; height: 0.875rem; border-radius: var(--r-xs);
  color: var(--c-text-tertiary); font-size: 0.5625rem;
}

.sort-btns button:hover { background-color: var(--c-fill-hover); color: var(--c-text); }

.sort-btns button:disabled { opacity: 0.25; cursor: default; }

/* 招待メールの宛先入力 */

.invite-rows { display: grid; gap: var(--sp-2); }

.invite-row { display: flex; gap: var(--sp-2); align-items: center; }

/* ---------------------------------------------------------------------------
 * レスポンシブ
 * ------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .tbl .col-org { display: none; }
}

@media (max-width: 48rem) {
  .ugrid { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 6rem minmax(0, 1fr); }
  .tbl .col-tel, .tbl .col-role { display: none; }
}

/* 一覧に添える有効期限 */

.expire-note { display: block; margin-top: 0.1875rem; font-size: 0.625rem; color: var(--c-text-tertiary); white-space: nowrap; }

/* 見出し直下の案内 */

/* .notice はメール設定でも使うため components.css へ移した。
   モックでは user.html と mail.html で data-tone の色が食い違っていた
   （warn が赤と橙）。components.css 側で
   info=青 / warn=橙 / error=赤 / done=緑 に統一している。 */


/* ---------------------------------------------------------------------------
 * 実装フェーズで追加したもの
 * ------------------------------------------------------------------------- */

/* モックでは <div> で組んでいた箇所を、カード全体を押せるように
   <button> の中の <span> へ置き換えたため、改めて縦に積む指定を足す。
   （button の中に div を置くのは HTML の規定から外れる） */
.ucard__name,
.ucard__kana { display: block; }

.ucard__name { margin-bottom: 0.125rem; }

/* 期限切れ・停止のユーザーは薄く表示する（§5.2-5） */
.ucard.is-dim,
.tbl tbody tr.is-dim { opacity: 0.55; }