/* ═══ 3ツール共通のヘッダー（上のバー）・右上の「⚙ 設定」一覧 ═══
   ★このファイルは出品管理・注文管理・メッセージ管理で「1文字も違わない同じ中身」にする（2026-10-10 統一）。
     元は ebay-web-tools/shared/ui/shared_header.css。各ツールの web/static/css/shared_header.css はその写し。
     直すときは「元を直す → 3ツールへ写す」。片方だけ直さない（各ツールの点検が食い違いを見つける）。
   ★ツールごとに違うのは色だけ。色は <html data-tool="listing|order|message"> で切り替える（下の3行）。
   ★各ツールでは見た目の設定の「いちばん最後」に読み込む（ツール側の古いヘッダー設定より優先させるため）。
   ★数字の決まり（高さ40px・ツール名15px・メニュー14px・名前と設定13px・書体）は親フォルダの CLAUDE.md に表がある。 */

/* ── ツールの色（ファビコンより1段濃い色＝白い文字が読みやすい）。accent は開いているページの下線 ── */
:root                      { --hdr-bg: #1D4ED8; --hdr-accent: #93C5FD; }  /* 指定なし＝注文管理と同じ青 */
:root[data-tool="order"]   { --hdr-bg: #1D4ED8; --hdr-accent: #93C5FD; }  /* 注文管理：青（ファビコン #2563EB） */
:root[data-tool="listing"] { --hdr-bg: #047857; --hdr-accent: #A7F3D0; }  /* 出品管理：緑（ファビコン #059669） */
:root[data-tool="message"] { --hdr-bg: #C2410C; --hdr-accent: #FED7AA; }  /* メッセージ管理：オレンジ（ファビコン #EA580C） */

/* ── バー本体 ── */
.topbar {
  display: flex; align-items: center; gap: 16px;
  height: 40px; padding: 0 16px;
  background: var(--hdr-bg); color: #fff;
  font-family: system-ui, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 14px; line-height: 1.4;
}
.topbar .brand { font-weight: 700; font-size: 15px; white-space: nowrap; }

/* ── メニュー：開いているページは文字を白く太くし、文字の直下に下線（バーの内側に出す） ── */
.topbar .mainnav { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.topbar .mainnav > a, .topbar .navgrp-t {
  margin: 0; padding: 2px 2px 3px;
  font-size: 14px; color: rgba(255, 255, 255, 0.8); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; background: none; border-radius: 0;
}
.topbar .mainnav > a:hover, .topbar .navgrp:hover > .navgrp-t { color: #fff; background: none; }
.topbar .mainnav > a.active, .topbar .navgrp.active > .navgrp-t {
  color: #fff; font-weight: 600; border-bottom-color: var(--hdr-accent); background: none;
}
.topbar .navgrp { margin: 0; }

/* ── 右上：名前と「⚙ 設定」 ── */
.topbar .user-area { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.topbar .user-area > span { white-space: nowrap; }
.topbar .user-area .gear { color: #fff; text-decoration: none; padding: 4px 10px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.topbar .user-area .gear:hover { background: rgba(255, 255, 255, 0.14); }
.topbar .user-area .gear.active { background: rgba(255, 255, 255, 0.2); font-weight: 700; }

/* ── 「⚙ 設定」で開く一覧（その場で開く小さな窓）。ツール側のほかの小窓に響かないよう #setpop / #setpop-bg だけに効かせる ── */
#setpop-bg.modal-bg { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1300; }
#setpop.modal-box {
  display: none; position: fixed; z-index: 1301; top: 48px; right: 18px; left: auto; transform: none;
  width: 300px; max-width: 92vw;
  background: #fff; border: 1px solid #d4dbe3; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); overflow: hidden;
  font-family: system-ui, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
#setpop .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  border-bottom: 1px solid #eef1f4; font-weight: 700; font-size: 15px; color: #2b2b2b; }
#setpop .modal-x { border: none; background: transparent; font-size: 16px; color: #9aa3ad; cursor: pointer; line-height: 1; }
#setpop .modal-x:hover { color: #5a6573; }
.setpop-list { display: flex; flex-direction: column; padding: 6px; }
.setpop-list a { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
  border-radius: 8px; text-decoration: none; color: #37414b; font-size: 14px; }
.setpop-list a:hover { background: #eef2f6; }
.setpop-list .snav-soon { font-size: 10px; color: #9aa3ad; background: #eef1f4; border-radius: 8px; padding: 1px 6px; }
.setpop-sep { height: 1px; background: #e3e8ee; margin: 5px 8px; }
.setpop-list .logout-form { margin: 0; }
.setpop-list .snav-logout, .setpop-list button.snav-logout {
  width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
  border: none; border-radius: 8px; background: none; cursor: pointer; font: inherit; font-size: 14px;
  color: #b3261e; text-decoration: none; }
.setpop-list .snav-logout:hover { background: #fdecea; }

/* ── スマホ（横740px以下）：2段にする。1段目＝ツール名・名前・⚙ 設定／2段目＝メニュー（足りなければ指で流す） ── */
@media (max-width: 740px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 5px 10px; gap: 0 10px; }
  .topbar .brand { font-size: 14px; }
  .topbar .user-area { gap: 8px; font-size: 12px; }
  .topbar .user-area > span { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
  .topbar .mainnav { order: 3; flex: 1 0 100%; gap: 12px; margin-top: 2px;
    overflow-x: auto; scrollbar-width: none; }
  .topbar .mainnav::-webkit-scrollbar { display: none; }
  .topbar .mainnav > a, .topbar .navgrp-t { flex: 0 0 auto; padding: 4px 0 5px; }
  #setpop.modal-box { top: 78px; right: 10px; }
}