/* ========================================
   topbar.css  -  PitFlow トップバー再構成 ＋ 4テーマ（リキッド）＋ 文字サイズ
   CarFlow のテーマ技法（--liquid-bg-image / backdrop-filter ガラス / zoom）に準拠。
   ======================================== */

/* ===== 文字サイズ（body の zoom で全体拡大） ===== */
:root[data-fontsize="lg"] body { zoom: 1.15; }
:root[data-fontsize="xl"] body { zoom: 1.30; }

/* ===== ③ ダーク・リキッド（既定ダーク配色＋ガラス） ===== */
:root[data-theme="dark-liquid"] {
  --bg:#0f1117;--bg1:#0f1117;--bg2:#1a1d27;--bg3:#222536;--bg4:#2a2e42;
  --border:#3a3f5e;--border2:#4d537a;
  --text:#e8ecf7;--text1:#e8ecf7;--text2:#b5bee0;--text3:#7e87b0;
  --green:#34d399;--blue:#60a5fa;--orange:#fbbf24;--red:#f87171;
  --brand:#2fb87c;--brand-deep:#1f7a4d;--brand-soft:rgba(52,211,153,.16);--accent:#2fb87c;
  --shadow-card:0 4px 16px rgba(0,0,0,.45);
  --liquid-bg-image: radial-gradient(circle at 15% 14%, #1f3a2f 0%, transparent 42%),
                     radial-gradient(circle at 86% 86%, #26314a 0%, transparent 46%),
                     linear-gradient(135deg, #14161e 0%, #0c0e13 100%);
  --panel-bg-overlay: rgba(255,255,255,0.10);
  --panel-blur: 16px;
  --panel-border-overlay: rgba(255,255,255,0.22);
  --panel-sheen: rgba(255,255,255,0.30);
}

/* ===== ④ ライト・リキッド（淡グリーン/パステル＋ガラス） ===== */
:root[data-theme="light-liquid"] {
  --bg:#f4f6f3;--bg1:#f4f6f3;--bg2:#ffffff;--bg3:#eef2ec;--bg4:#e3e8df;
  --border:#dde3d8;--border2:#c6cfbe;
  --text:#20261f;--text1:#20261f;--text2:#4a5346;--text3:#5c6556;
  --green:#0a7f5b;--blue:#2f7ad6;--orange:#b06a12;--red:#c0362f;
  --brand:#1f7a4d;--brand-deep:#155e3a;--brand-soft:rgba(31,122,77,.12);--accent:#1f7a4d;
  --shadow-card:0 4px 16px rgba(31,41,55,.08);
  --liquid-bg-image: radial-gradient(circle at 15% 14%, #d6efdc 0%, transparent 42%),
                     radial-gradient(circle at 86% 86%, #e3ecf7 0%, transparent 46%),
                     linear-gradient(135deg, #f6f9f4 0%, #fbfbf8 100%);
  --panel-bg-overlay: rgba(255,255,255,0.42);
  --panel-blur: 16px;
  --panel-border-overlay: rgba(255,255,255,0.85);
  --panel-sheen: rgba(255,255,255,0.6);
}

/* ===== リキッド共通：背景画像＋半透明ガラスパネル ===== */
:root[data-theme$="-liquid"] body {
  background: var(--liquid-bg-image), var(--bg) !important;
  background-attachment: fixed !important;
}
:root[data-theme$="-liquid"] #topbar,
:root[data-theme$="-liquid"] #sidebar,
:root[data-theme$="-liquid"] .md-box,
:root[data-theme$="-liquid"] .modal-box,
:root[data-theme$="-liquid"] .dash-card,
:root[data-theme$="-liquid"] .soon-card,
:root[data-theme$="-liquid"] .bn-card,
:root[data-theme$="-liquid"] .help-sidebar,
:root[data-theme$="-liquid"] .fusen {
  background: var(--panel-bg-overlay) !important;
  backdrop-filter: blur(var(--panel-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(180%);
  border-color: var(--panel-border-overlay) !important;
  box-shadow: inset 0 1px 0 var(--panel-sheen);
}
/* クローム（topbar/sidebar）は色を拾わず中立の暗さ/明るさに */
:root[data-theme="dark-liquid"] #topbar,
:root[data-theme="dark-liquid"] #sidebar { background: rgba(15,17,24,0.66) !important; }
:root[data-theme="light-liquid"] #topbar,
:root[data-theme="light-liquid"] #sidebar { background: rgba(248,250,247,0.72) !important; }

/* ===== トップバー要素（CarFlow準拠） ===== */
/* 畳むボタン（CarFlow .sidebar-toggle 準拠：透明＋枠） */
#topbar .tb-toggle {
  width: 34px; height: 34px; border-radius: var(--r);
  background: transparent; border: 1px solid var(--border); color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none;
}
#topbar .tb-toggle:hover { background: var(--bg3); color: var(--text); border-color: var(--text3); }

/* 文字サイズ 3分割 */
.tb-fontsize-group {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg3); flex: none;
}
.tb-fontsize-btn {
  width: 30px; display: flex; align-items: center; justify-content: center;
  color: var(--text2); border-right: 1px solid var(--border); line-height: 1;
}
.tb-fontsize-btn:last-child { border-right: none; }
.tb-fontsize-btn:hover { background: var(--bg4); color: var(--text); }
.tb-fontsize-btn.active { background: var(--brand); color: #fff; }
.tb-fontsize-btn span { pointer-events: none; }

/* テーマ循環 */
.tb-theme-cycle {
  width: 34px; height: 34px; border-radius: var(--r);
  background: var(--bg3); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none;
}
.tb-theme-cycle:hover { background: var(--bg4); border-color: var(--border2); }

/* 右：新規予約＋ユーザー群（margin-left:auto で右寄せ・CarFlow .topbar-user 準拠） */
.topbar-user { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
/* ＋新規予約はアバターの左隣。間隔を開ける（50px） */
.topbar-user .tb-newres { margin-right: 50px; }
.av {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--blue));
  color: #fff; font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none;
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.tb-username { font-size: 13px; color: var(--text2); white-space: nowrap; }

/* 同期ランプ（sync-pit.js が状態でクラスを付け替える）
   同期済み＝緑で脈打つ／同期中＝黄で点滅／受信＝青／オフライン・エラー＝赤／端末保存＝灰 */
.sync-indicator {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); user-select: none; white-space: nowrap; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.sync-indicator .sync-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: syncPulse 2.4s infinite; }

/* 同期済み（既定） */
.sync-indicator.sync-idle { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.32); color: #86efac; }

/* 同期中 */
.sync-indicator.sync-saving { background: rgba(234,179,8,.14); border-color: rgba(234,179,8,.42); color: #fde68a; }
.sync-indicator.sync-saving .sync-dot { background: #eab308; animation: syncBlink .7s infinite; }

/* 受信（他の人の変更が入った） */
.sync-indicator.sync-recv { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.42); color: #93c5fd; }
.sync-indicator.sync-recv .sync-dot { background: #3b82f6; animation: syncBlink .5s 2; }

/* オフライン・保存エラー */
.sync-indicator.sync-offline, .sync-indicator.sync-error { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); color: #fca5a5; }
.sync-indicator.sync-offline .sync-dot, .sync-indicator.sync-error .sync-dot { background: #ef4444; animation: none; }
.sync-indicator.sync-error .sync-dot { animation: syncBlink .9s infinite; }

/* サンプル（この端末だけ） */
.sync-indicator.sync-local { background: var(--bg3); border-color: var(--border); color: var(--text2); }
.sync-indicator.sync-local .sync-dot { background: #94a3b8; animation: none; }

@keyframes syncPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@keyframes syncBlink { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* ヘルプ（CarFlow .help-btn 準拠：丸） */
#topbar .help-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; flex: none;
}
#topbar .help-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ログアウト（CarFlow .btn-sm 準拠） */
#topbar .btn-sm { font-size: 11px; color: var(--text3); background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; cursor: pointer; font-family: inherit; flex: none; }
#topbar .btn-sm:hover { color: var(--text); border-color: var(--text3); background: var(--bg3); }

/* 狭い画面では名前・版を隠して詰める */
@media (max-width: 820px) {
  #topbar .ver { display: none; }
  .tb-username { display: none; }
}
@media (max-width: 640px) {
  .tb-fontsize-group { display: none; }
}

/* トースト */
.pf-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: rgba(0,0,0,.82); border: 1px solid var(--border2); color: #fff;
  font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 20px;
  z-index: 9998; opacity: 0; transition: opacity .22s; pointer-events: none; max-width: 92vw; text-align: center;
}
.pf-toast.show { opacity: 1; }