/**
 * @file
 * 有志日本語化MOD報告 UI。
 *
 * - ライブラリカード タイトル行のバッジ型ボタン
 * - カタログカード左上オーバーレイ／詳細ページのバッジ
 * - 報告モーダル（状況表示＋報告トグル＋通報理由）
 *
 * 色は tokens.css（Steam ダークパレット）を参照。絵柄・最終配色は実機で
 * 追い込む前提（LOCALIZATION_REPORT_SPEC.md §9.1）。
 */

/* ---- ライブラリカード: タイトル行のバッジ型ボタン ----
   .game-card__title-row / .game-card__title のレイアウト（flex・title flex:1）は
   style.css で既定義。ここではボタン単体のスタイルのみ足す（既存の整列を上書き
   しない）。寸法・書体はカード左上の .game-card__badge と揃える（枠線 1px の分だけ
   padding を減らして高さを合わせる）。 */
.localization-report-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 2px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.localization-report-badge:hover {
  color: var(--color-steam-blue);
  border-color: var(--color-steam-blue);
}

/* 誰かが報告済み＝左上バッジと同じ塗り。 */
.localization-report-badge.has-reports {
  color: var(--color-deep-dark);
  background: var(--color-steam-blue);
  border-color: var(--color-steam-blue);
}

.localization-report-badge.has-reports:hover {
  background: var(--color-steam-blue-bright);
  border-color: var(--color-steam-blue-bright);
}

/* 自分が報告済みはチェックを添えて区別する。 */
.localization-report-badge__check {
  display: none;
  font-size: 0.625rem;
}

.localization-report-badge.is-reported .localization-report-badge__check {
  display: inline;
}

/* ---- バッジ（カタログ左上オーバーレイ / 詳細） ---- */
.game-card__badge--localization {
  background: var(--color-steam-blue);
  color: var(--color-deep-dark);
}

.game-detail__badge--localization {
  background: var(--color-steam-blue);
  color: var(--color-deep-dark);
}

.game-detail__localization {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.game-detail__localization-count {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.localization-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-steam-blue);
  border-radius: 4px;
  background: transparent;
  color: var(--color-steam-blue);
  /* button はページのフォントを継承しないので .btn と同じく明示する。無指定だと
     OS 既定フォント（Windows は Yu Gothic UI 等）で描かれ、Noto Sans JP より横幅が
     広くなって基本情報の値列に収まらない。 */
  font-family: var(--font-primary);
  font-size: 0.875rem;
  cursor: pointer;
}

/* ラベルは途中で折り返さない（列幅が足りないときは dd 側の flex-wrap で
   ボタンごと次行へ送る）。 */
.localization-report-btn__label {
  white-space: nowrap;
}

.localization-report-btn:hover {
  background: var(--color-blue-gray);
}

.localization-report-btn.is-reported {
  background: var(--color-steam-blue);
  color: var(--color-deep-dark);
}

/* ---- モーダル ---- */
.localization-modal[hidden] {
  display: none;
}

.localization-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.localization-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.localization-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: 4px;
  background: var(--color-dark-blue);
  color: var(--color-text-light);
  box-shadow: var(--shadow-elevated);
  /* Same thin dark scrollbar as .share-modal__dialog / .proselytize-modal__body
     — the browser default wide light bar reads as a strip laid over the dark
     panel. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue-gray) transparent;
}

.localization-modal__dialog::-webkit-scrollbar {
  width: 5px;
}

.localization-modal__dialog::-webkit-scrollbar-thumb {
  background: var(--color-blue-gray);
  border-radius: 3px;
}

.localization-modal__dialog::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

.localization-modal__title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  color: var(--color-text-white);
}

.localization-modal__subtitle {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--color-steam-blue);
  color: var(--color-deep-dark);
  font-size: 0.75rem;
  vertical-align: middle;
}

.localization-modal__status {
  margin: 0 0 1rem;
  color: var(--color-text-light);
}

/* 公開 URL 一覧 */
.localization-modal__links {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 4px;
  background: var(--color-deep-dark);
}

.localization-modal__links[hidden] {
  display: none;
}

.localization-modal__links-title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.localization-modal__link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.localization-modal__link {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.3rem 0;
}

.localization-modal__link + .localization-modal__link {
  border-top: 1px solid var(--color-divider);
}

.localization-modal__link-anchor {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  color: var(--color-steam-blue);
  text-decoration: none;
}

.localization-modal__link-anchor:hover {
  text-decoration: underline;
}

.localization-modal__link-host {
  font-weight: 700;
  white-space: nowrap;
}

.localization-modal__link-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.localization-modal__link-count {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.localization-modal__links-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.localization-modal__links-pending {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-warning);
}

/* display:flex が UA の [hidden]{display:none} に勝ち、確認待ち 0 件でも
   時計アイコンだけ残るため明示する。 */
.localization-modal__links-pending[hidden] {
  display: none;
}

/* URL 欄 */
.localization-modal__url {
  margin: 0 0 1rem;
}

.localization-modal__url-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.localization-modal__url-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: var(--color-deep-dark);
  color: var(--color-text-white);
  font-family: var(--font-primary);
  font-size: 0.9375rem;
}

.localization-modal__url-input:focus {
  outline: none;
  border-color: var(--color-steam-blue);
}

.localization-modal__url-help {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.localization-modal__url-status {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

.localization-modal__url-status[hidden] {
  display: none;
}

.localization-modal__url-status[data-state="approved"] {
  color: var(--color-price-drop);
}

.localization-modal__url-status[data-state="pending"] {
  color: var(--color-warning);
}

.localization-modal__url-status[data-state="rejected"] {
  color: var(--color-alert);
}

.localization-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.localization-modal__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-steam-blue);
  border-radius: 4px;
  background: transparent;
  color: var(--color-steam-blue);
  font-family: var(--font-primary);
  font-size: 1rem;
  cursor: pointer;
}

.localization-modal__submit:hover {
  background: var(--color-blue-gray);
}

.localization-modal__submit.is-reported {
  background: var(--color-steam-blue);
  color: var(--color-deep-dark);
}

.localization-modal__submit:disabled,
.localization-modal__withdraw:disabled {
  opacity: 0.6;
  cursor: default;
}

.localization-modal__withdraw {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-primary);
  cursor: pointer;
}

.localization-modal__withdraw:hover {
  color: var(--color-text-light);
  border-color: var(--color-text-muted);
}

.localization-modal__withdraw[hidden] {
  display: none;
}

.localization-modal__flag {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-divider);
}

.localization-modal__flag-desc {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.localization-modal__reasons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.localization-modal__reason {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-light);
  text-align: center;
  cursor: pointer;
}

.localization-modal__reason:hover {
  border-color: var(--color-alert);
  color: var(--color-alert);
}

.localization-modal__foot {
  margin-top: 1.25rem;
  text-align: right;
}

.localization-modal__cancel {
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}