/* =====================================================================
   rheo for Salesforce — 基底スタイル
   ---------------------------------------------------------------------
   読み込み順: tokens.css → base.css → components.css → pages/<画面>.css
   （管理系3画面はこの後に app-base.css を挟む。理由は同ファイル冒頭を参照）

   ここに置いてよいのは「移行前の 4 画面すべてで宣言が完全に一致していた
   ルール」だけ。1 画面でも違う値を持つものは app-base.css か
   pages/<画面>.css へ置く（そうしないと移行時に見た目が変わる）。

   ★ 意図的に置いていないもの ★
     * { margin: 0 }         … index.html には無い
     body { font-size }      … index.html には無い（他3画面は 14px）
     button { padding/font-size } … index.html には無い
     label { display:block } … index.html には無い（8 箇所の label が動く）
     input / select / textarea の基本形 … index と他3画面でセレクタも
                                          font-size も違う
   ===================================================================== */

/* ── リセット ── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: var(--font-sans);
    background: var(--app-bg);
    color: var(--text);
}

/* ── ボタン（ピル型アウトライン） ── */
button {
    font-family: inherit;
    cursor: pointer;
    background: transparent;
    color: rgba(255,255,255,0.80);
    border: 1.5px solid rgba(255,255,255,0.30);
    border-radius: var(--r-pill);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
button:hover:not(:disabled) {
    background: rgba(255,255,255,1);
    color: #181a1f;
    border-color: rgba(255,255,255,1);
}
button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── ボタンのバリエーション ──
       未使用の画面では単にクラスが当たらないだけで影響しない。 */
.btn-primary {
    color: #fff; border-color: rgba(255,255,255,0.7);
    box-shadow: 0 0 14px rgba(94,129,172,0.3); font-weight: 600;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 22px rgba(255,255,255,0.2); }

.btn-danger-outline { color: var(--err); border-color: rgba(242,139,130,0.4); }
.btn-danger-outline:hover:not(:disabled) {
    background: rgba(220,50,50,0.85); color: #fff; border-color: rgba(220,50,50,0.85);
}

.btn-small { padding: 3px 12px; font-size: 11.5px; }
.btn-icon  { padding: 3px 10px; font-size: 12px; line-height: 1.3; }

.btn-flat {
    background: var(--bg-light); border: 1px solid var(--panel-border);
    box-shadow: var(--nm-flat); color: var(--text); border-radius: 10px;
}
.btn-flat:hover:not(:disabled) {
    background: var(--bg-light); color: #fff; border-color: var(--panel-border-light);
    box-shadow: var(--nm-flat), 0 0 12px rgba(255,255,255,0.08);
}

/* ── スクロールバー ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }

/* ── 空状態の注記（共通部分のみ。余白は画面側で付ける
       … index は margin-top:2rem、他3画面は padding:1.6rem 0） ── */
.empty-note { color: var(--text-dim); font-size: 0.85rem; text-align: center; }

/* =====================================================================
   Tailwind Play CDN 置換ユーティリティ
   ---------------------------------------------------------------------
   cdn.tailwindcss.com の削除に伴い、index.html が実使用していた 14 個
   だけを同名・同一宣言で定義する。ここへの追加は禁止
   （増やすなら素の CSS を pages/<画面>.css に書くこと）。

   ★ .hidden は必ずこのブロックの最後、他のすべての display 系より後ろに
     置くこと ★
     index.html の #loginOverlay は class="... flex ... hidden" と両方を
     持ち、Tailwind の生成順（.flex より .hidden が後ろ）で hidden が勝つ
     ことに依存していた。順序を崩すとログイン画面が出っぱなしになる。
   ===================================================================== */
.fixed          { position: fixed; }
.absolute       { position: absolute; }
.inset-0        { inset: 0; }
.inset-y-0      { top: 0; bottom: 0; }
.left-0         { left: 0; }
.flex           { display: flex; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.gap-2          { gap: 0.5rem; }          /* Tailwind 既定値。px ではなく rem */
.flex-1         { flex: 1 1 0%; }
.flex-shrink-0  { flex-shrink: 0; }
.min-w-0        { min-width: 0; }
.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hidden         { display: none !important; }