/* 画面下部の固定タブバー（マップ／イベント一覧・カレンダー／ぬい活フォトギャラリーの3画面で共通使用）。
   map.css・dashboard.cssのどちらを使う画面からも読み込めるよう、単独のCSSファイルとして切り出している。 */

/* PCでタブ切り替え時にタブバーが左右にわずかに動くのを防ぐ。
   ページごとに縦スクロールバーの有無が変わると、position:fixedの左右幅もその分ズレて見えるため、
   スクロールバー分のスペースを常に確保しておき、コンテンツ量に関わらず表示幅を一定に保つ */
html { scrollbar-gutter: stable; }

/* マップ画面のようにタブバーがヘッダー内のドック（position:static、通常のflowで配置）になる画面では、
   left:50%のようなビューポート基準の中央寄せを使わないため、上記のジャンプ防止策自体が不要になる。
   それどころか、scrollbar-gutterが確保する余白のせいでヘッダーのフルブリード表示が右端で数px欠けてしまうため、
   この画面に限って標準の挙動に戻す */
html:has(.header-area .tab-bar) { scrollbar-gutter: auto; }

.tab-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	background: #FDFEFD;
	border-top: 1px solid #DEE3DE;
	box-shadow: 0 -2px 6px rgba(47,82,51,0.08);
	z-index: 1000;
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-bar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 0 6px 0;
	color: #A9B8AC;
	text-decoration: none;
	font-size: 11px;
	font-weight: bold;
	transition: color 0.15s ease;
}
.tab-bar-item:hover { color: #6D8670; }
.tab-bar-item.active { color: #2F5233; }

/* 誕生日限定の「夜B」モード（body.night-mode、events.css等のbirthday_idol判定時に付与）。
   PC幅のヘッダー内ドック（下記.header-area .tab-bar系）は元々var(--bg-soft)/var(--badge-bg)経由のため
   無改修で自動反転する。ここではハードコード色のモバイル固定バー・FABだけ明示的に上書きする */
body.night-mode .tab-bar {
	background: var(--bg-soft, #141d30);
	border-top-color: var(--line, #263149);
	box-shadow: 0 -2px 10px rgba(0,0,0,.35);
}
body.night-mode .tab-bar-item { color: #5b6b8a; }
body.night-mode .tab-bar-item:hover { color: var(--ink-soft, #93A2C2); }
body.night-mode .tab-bar-item.active { color: var(--ink, #EAF1FA); }
body.night-mode .tab-bar-fab {
	background: var(--ink, #EAF1FA);
	color: var(--bg, #0b1120);
	border-color: var(--bg, #0b1120);
}

/* モバイル幅で「ぬい活を投稿」への導線として、タブバー中央上に浮かせる丸い＋ボタン。
   PC幅ではヘッダー側に別の投稿ボタンがあるため常に非表示にする */
.tab-bar-fab {
	position: absolute;
	left: 50%;
	top: -20px;
	transform: translateX(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #2F5233;
	color: #FDFEFD;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #F6F3E8;
	box-shadow: 0 8px 16px -6px rgba(47,82,51,0.55);
	transition: transform 0.15s ease;
}
.tab-bar-fab:hover { transform: translateX(-50%) scale(1.05); }

/* 縦画面のスマホでは、タブバー中央だと地図の操作やスクロールの邪魔になるとの指摘を受け、
   Xアプリの投稿ボタンのように画面右下に固定する形に変更する（横画面は変更なし・従来の中央上のまま） */
@media (max-width: 899px) and (orientation: portrait) {
	.tab-bar-fab {
		left: auto;
		right: 16px;
		top: auto;
		bottom: 100%;
		margin-bottom: 14px;
		transform: none;
	}
	.tab-bar-fab:hover { transform: scale(1.05); }
}

@media (min-width: 900px) {
	.tab-bar-fab { display: none; }
}

/* タブバーの高さぶん、画面下端のコンテンツが隠れないように余白を確保する */
.has-tab-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }

/* PC幅では全幅に間延びして見えるため、幅を制限して中央寄せのコンパクトなドック風にする */
@media (min-width: 900px) {
	.tab-bar {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: 480px;
		max-width: 90vw;
	}
}

/* マップ画面のようにヘッダー（.header-area）内にタブバーを直接配置した場合は、
   PC幅で下部固定にせず、ヘッダーのflex行に馴染むコンパクトなドックとして表示する。
   モバイル幅では.header-areaにネストしていても position:fixed はビューポート基準で効くため、
   上のデフォルト（下部固定・全幅）がそのまま適用される */
@media (min-width: 900px) {
	.header-area .tab-bar {
		position: static;
		transform: none;
		left: auto;
		right: auto;
		width: auto;
		max-width: none;
		background: var(--badge-bg, #E6EAE7);
		border: none;
		border-radius: 999px;
		box-shadow: none;
		padding: 4px;
		gap: 2px;
	}
	.header-area .tab-bar-item {
		/* 親.tab-barがwidth:autoでコンテンツに合わせて縮むため、
		   基底ルールのflex:1(flex-shrink込み)を引き継ぐと文字がわずかに折り返されてしまう。
		   各項目は中身の幅どおりに自然サイズさせる */
		flex: none;
		flex-direction: row;
		gap: 6px;
		padding: 8px 14px;
		border-radius: 999px;
		font-size: 12px;
		white-space: nowrap;
	}
	.header-area .tab-bar-item svg { width: 18px; height: 18px; flex: none; }
	.header-area .tab-bar-item.active { background: var(--bg-soft, #FDFEFD); }
}

/* タブバーがヘッダー内のドックとして表示されるPC幅では、下部固定タブバー用の余白確保は不要になる */
@media (min-width: 900px) {
	body:has(.header-area .tab-bar).has-tab-bar { padding-bottom: 0; }
}