/* =====================================================================
   rheo for Salesforce — 共通コンポーネント
   ---------------------------------------------------------------------
   読み込み順: tokens.css → base.css → (app-base.css) → components.css
               → pages/<画面>.css

   ヘッダー / パネル / タブ / モーダル / トースト / ログインオーバーレイ。
   使わない画面ではクラスが当たらないだけなので、全画面が読み込んでよい。

   画面固有の上書き（index.html の .topbar など）は pages/<画面>.css 側に
   置くこと。このファイルは「移行前に複数画面で同一だったもの」を集約する。
   ===================================================================== */

/* =====================================================================
   ヘッダー
   ---------------------------------------------------------------------
   .topbar 本体は管理系 3 画面の値。index.html は余白・gap・折り返しが
   違うので pages/index.css で上書きする。
   ===================================================================== */
.topbar {
    display: flex; align-items: center; gap: 12px; padding: 12px 22px;
    border-bottom: 1px solid var(--panel-border); background: rgba(16,18,24,0.35);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    min-height: 54px;
}
.topbar .brand { display: flex; align-items: center; gap: 9px; }
.topbar .brand svg { height: 16px; width: auto; fill: #fff; display: block; }
.topbar .brand .brand-sub {
    font-size: 10px; font-weight: 600; letter-spacing: 0.18em; color: var(--accent);
    text-transform: uppercase; white-space: nowrap; padding-top: 2px;
}
.topbar .page-title {
    font-size: 13px; font-weight: 600; color: #fff; letter-spacing: 0.06em;
    padding: 4px 14px; border: 1px solid rgba(94,129,172,0.4); border-radius: var(--r-pill);
    background: rgba(94,129,172,0.14);
}
.topbar-spacer { flex: 1; }
.topbar .user-label { font-size: 12px; color: var(--text-muted); }
.topbar a.back-link {
    font-size: 12px; color: #8fb4e3; text-decoration: underline; text-underline-offset: 3px;
}
.topbar a.back-link:hover { color: #a9c6ec; }

/* =====================================================================
   パネル
   ===================================================================== */
.panel {
    background: var(--panel-bg-solid); border: 1px solid var(--panel-border-light);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
    padding: 20px 22px;
}
.panel h2 { font-size: 15px; font-weight: 600; color: #fff; }
.panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 6px; flex-wrap: wrap;
}
.panel-note { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.6; }

/* =====================================================================
   タブバー（admin / settings）
   ===================================================================== */
.tab-bar {
    display: flex; gap: 0; padding: 3px; background: var(--bg-deep);
    border-radius: var(--r-pill); box-shadow: var(--nm-inset); width: fit-content;
    margin-bottom: 20px;
}
.tab-btn {
    padding: 7px 22px; font-size: 13px; border: 1.5px solid transparent;
    color: rgba(255,255,255,0.45); background: transparent; border-radius: var(--r-pill);
}
.tab-btn:hover:not(:disabled) {
    background: transparent; color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.2);
}
.tab-btn.tab-active {
    color: #fff; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    border-color: transparent; box-shadow: 0 0 12px var(--accent-glow); font-weight: 500;
}
.tab-btn.tab-active:hover { color: #fff; }

/* =====================================================================
   モーダル（ガラス調）— 全画面共通の唯一の実装
   ---------------------------------------------------------------------
   移行前は 3 系統が並立していた:
     .glass-overlay  … index / admin（この 2 つは 1 文字も違わず一致）
     .modal-*        … dashboard
     .kn-modal-*     … settings
   本 PR で .glass-overlay / .glass-dialog に一本化した。サイズ指定
   （width / height / max-width）だけは画面ごとに違うので、ここには置かず
   pages/<画面>.css の修飾クラスに残している。

   ★ 統一に伴う意図的な見た目の変化（dashboard の 2 モーダルのみ）★
     スクリムの濃さ rgba(8,9,12,0.72) → var(--scrim)（0.65）
     背面のぼかし なし → blur(var(--scrim-blur))
   settings（0.65 + blur 6px）と index/admin は移行前と同一。
   ===================================================================== */
.glass-overlay {
    position: fixed; inset: 0; background: var(--scrim);
    backdrop-filter: blur(var(--scrim-blur)); -webkit-backdrop-filter: blur(var(--scrim-blur));
    display: flex; align-items: center; justify-content: center; z-index: var(--z-modal);
}
.glass-dialog {
    background: var(--panel-bg-solid);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--panel-border-light); border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.07);
}
.glass-dialog h2 { color: #fff; }
.glass-dialog h3, .glass-dialog label { color: var(--text-muted); }

/* ── ダイアログのサブパーツ（head / title / close / body / foot） ──
   移行前の dashboard .modal-head/-title/-close/-body と
   settings .kn-modal-head/-title/-foot を統合したもの。

   ★ ここに置いたのは「2 画面で宣言が一致していた分」だけ ★
     dashboard だけが持つ余白と省略表示、settings だけが持つ折り返しは
     pages/<画面>.css に残している。共通側に寄せると、もう一方の画面の
     見た目が変わってしまう。 */
.glass-dialog-head { display: flex; align-items: center; gap: 10px; }
.glass-dialog-title { font-size: 14px; font-weight: 600; color: #fff; }
.glass-dialog-close { flex: none; padding: 3px 10px; font-size: 13px; line-height: 1; }
.glass-dialog-body { flex: 1; min-height: 0; overflow: auto; }
.glass-dialog-foot { display: flex; align-items: center; gap: 10px; }

/* =====================================================================
   ログインオーバーレイ
   ---------------------------------------------------------------------
   移行前 index.html は #loginOverlay に背景しか持たず、配置は Tailwind の
   `fixed inset-0 flex items-center justify-center` と inline の z-index:60
   で行っていた。ここでは管理系 3 画面と同じ ID ルールに一本化する。
   index.html の移行時は class から fixed/inset-0/flex/items-center/
   justify-center と style="z-index:60" を外すこと。
   ===================================================================== */
#loginOverlay {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    /* ★ 必ずモーダル（--z-modal / --z-modal-nested）より前面にすること ★
       理由と経緯は tokens.css のレイヤー節を参照。 */
    z-index: var(--z-login);
    background: var(--login-bg);
}
/* padding は移行前 index.html だけが inline で同じ値を持っていたので、
   ここへ集約しても 4 画面すべてで見た目は変わらない。 */
.login-panel { width: 380px; padding: 28px 26px; }

/* ── 認証フォームの排他表示 ──
   移行前は各フォームが inline style で display を切り替えていたが、
   共通 auth.js の showAuthForm() は classList.toggle('hidden') 方式。
   base.css の .hidden が display:none !important なので、レイアウトは
   ここで持ち、表示/非表示は .hidden だけで制御する。
   ★ フォームに inline style="display:..." を残さないこと ★
     残すと .hidden を外しても inline が勝ち、初回パスワード変更や
     パスワードリセットの画面が出なくなる。
   index.html の 4 フォームもこのセレクタで賄う（無い ID は単に一致しない）。 */
#loginForm, #newPasswordForm, #forgotRequestForm, #forgotConfirmForm {
    display: flex; flex-direction: column; gap: 12px;
}
.login-brand {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px;
}
.login-brand svg { height: 20px; width: auto; fill: #fff; }
.login-brand .brand-sub {
    font-size: 11px; font-weight: 600; letter-spacing: 0.22em; color: var(--accent);
    text-transform: uppercase; padding-top: 3px;
}

/* =====================================================================
   トースト
   ===================================================================== */
#toastArea {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
    font-size: 12.5px; padding: 9px 20px; border-radius: var(--r-pill);
    backdrop-filter: blur(10px); border: 1px solid rgba(129,199,132,0.35);
    background: rgba(30,50,35,0.85); color: var(--ok);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); max-width: 90vw;
}
.toast.toast-err {
    border-color: rgba(242,139,130,0.4); background: rgba(60,25,25,0.9); color: var(--err);
}

/* =====================================================================
   レスポンシブ（管理系 3 画面で共通だった分のみ。
   .xxx-main の余白は各 pages/<画面>.css 側に置く）
   ===================================================================== */
@media (max-width: 720px) {
    .panel { padding: 14px 12px; }
}