/* ════════════════════════════════════════════════════════════════
   fs-color.css — 新しい共通デザインの「色」（デザインの決まり 確定版・第2版）
   ─ ロゴの青＋墨・灰・白。元: docs/design_proposals/brand/brand.css ＋ brand-d.css（おすすめ案）の色の部分
     （デザイン枝 claude/wizardly-clarke-ufi5kc）。大きさは fs-size.css。
   ─ 効くのは <body class="fs-theme"> の画面だけ。目印の無い画面（今ある機能の画面）は
     1 つも変わらない。目印は base.html が画面の型（fs_mode）で付ける。
   ─ 読み込み順: bootstrap → fs-color → style.css → pf.css → fs-shell → fs-size
   ─ 決まり（docs/design_proposals/brand/design-rules-v2.html）:
       ロゴの青（#1925AA）は「画面の枠」（左メニュー・主ボタン・見出しの線・チャットのボタン）と
       小さなアイコンだけ。「画面の中身」（札・バッジ・数字・表の見出し・面の塗り）は墨・灰・白。
       工程表の 5 色・Bootstrap 標準の青・古金（旧案の差し色）は使わない。
       成功・警告・エラーは色だけで伝えない。必ずアイコン＋言葉。
   ─ 旧案（墨紺 #172235 ＋古金 #C9A24A）は 2026-10-02 にやめた。
   ─ 変更の一覧: docs/DESIGN_SHARED_PARTS.md
   ════════════════════════════════════════════════════════════════ */

/* 書体はサーバーに置く（Google から読まない）。使うのは fs-theme の画面だけなので、
   古い見た目の画面ではダウンロードされない。作り方は static/fonts/noto-sans-jp/README.md */
@font-face {
  font-family: "Noto Sans JP"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/noto-sans-jp/NotoSansJP-Regular-subset.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/noto-sans-jp/NotoSansJP-Bold-subset.woff2") format("woff2");
}

body.fs-theme {
  --fs-logo: #1925AA;      /* ロゴの青（会社の色）：枠と小さなアイコンだけ */
  --fs-logo-2: #131D86;    /* 押した時 */
  --fs-side: #151E8A;      /* 左メニューの地（ロゴの青より少し暗い藍） */
  --fs-tint: #EEF0FB;      /* 青のうす色：アイコンの地（数字の段・業務スキルのカード）だけ */
  --fs-logo-rgb: 25, 37, 170; /* ロゴの青を数字 3 つで（すき通しの色 rgba() に使う。--fs-logo と必ず同じ色） */
  --fs-tint-line: #C9CDF0; /* 青のうす色の線（青のうす色の地の枠） */
  --fs-side-cap: #C9CDF0;  /* 左メニューの見出し（連絡・業務・管理）と版数の文字 */
  --fs-side-ink: #DDE0F7;  /* 左メニューのアイコン・準備中の文字 */
  --fs-ink: #1F2433;       /* 文字（墨） */
  --fs-muted: #5A6070;     /* 補足の文字 */
  --fs-bg: #F5F6F9;        /* 画面の地 */
  --fs-surface: #FFFFFF;   /* 中身の面（カード・上の白い帯・表・入力欄・小窓の地） */
  --fs-soft: #F1F2F6;      /* 淡い地（休みの日・区切り・表の見出し） */
  --fs-border: #E2E4EC;    /* 枠線 */
  --fs-on-dark: #FFFFFF;   /* いつでも白い文字（濃い地の上の文字・印）。白地（--fs-surface）とは別で、着せ替えでも白のまま */

  --bs-body-font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --bs-body-color: var(--fs-ink);
  --bs-body-bg: var(--fs-bg);
  --bs-border-color: var(--fs-border);
  --bs-primary: var(--fs-logo); --bs-primary-rgb: var(--fs-logo-rgb);
  --bs-success: #1F7A44; --bs-success-rgb: 31, 122, 68;
  --bs-warning: #8A5300; --bs-warning-rgb: 138, 83, 0;
  --bs-danger: #B3261E;  --bs-danger-rgb: 179, 38, 30;
  --bs-link-color: var(--fs-ink); --bs-link-hover-color: var(--fs-ink);
  --bs-link-color-rgb: 31, 36, 51; --bs-link-hover-color-rgb: 31, 36, 51;
  --bs-secondary-color: var(--fs-muted);
  --bs-border-radius: 8px; --bs-border-radius-lg: 12px;
  --bs-focus-ring-color: rgba(var(--fs-logo-rgb), .25);
  /* Bootstrap 標準の青のうす色（アコーディオンの開いた見出し・お知らせ枠 primary など）→ 青のうす色 */
  --bs-primary-bg-subtle: var(--fs-tint); --bs-primary-border-subtle: var(--fs-tint-line); --bs-primary-text-emphasis: var(--fs-logo-2);
  /* 水色（info）は使わない。お知らせ（情報）は墨（決まり 7.）。bg-info / text-info / border-info が墨になる */
  --bs-info: #1F2433; --bs-info-rgb: 31, 36, 51;
  --bs-info-bg-subtle: #F1F2F6; --bs-info-border-subtle: #C3C7D3; --bs-info-text-emphasis: #1F2433;

  /* 外枠（白い帯 72px ＋本文の上下の余白 20px＋32px）の高さ。画面の高さぴったりに作った画面
     （ユーザー管理など）が calc(100vh - var(--fs-chrome-h, 104px)) で使う。104px は今までの
     土台（黒い帯 56px＋上下の余白 48px）の値で、目印の無い画面ではそちらになる。
     ⚠ fs-shell.css の .l1-gtop の高さ・.pf-stage の余白を変えたら、ここも変える。 */
  --fs-chrome-h: 124px;
  /* 白い帯だけの高さ。帯の下に貼り付ける部品（position: sticky）の top に使う。 */
  --fs-top-h: 72px;

  /* style.css の body（背景 #f4f6f9・書体）は直接指定なので、変数だけでは勝てない。ここで直接指定する。 */
  font-family: var(--bs-body-font-family);
  background-color: var(--fs-bg);
  color: var(--fs-ink);

  /* pf.css の色（明るい青系）を、同じ名前のまま第2版の色に読み替える。
     pf- の部品（カード・見出しなど）はテンプレートを触らずに新しい色になる。
     枠に当たるもの（紺のパネル）は左メニューの藍、中身に当たるものは墨・灰。
     ⚠ pf.css の青（#2563a8・#2b7de9）は工程表の「計画＝青」に近いので、新デザインの画面では使わない。 */
  --pf-navy-900: var(--fs-logo-2);
  --pf-navy-800: var(--fs-side);
  --pf-navy-700: var(--fs-side);
  --pf-navy-600: var(--fs-logo);
  --pf-sky-500: #5A6070;   --pf-sky-400: #9CA1AF;  --pf-sky-50: #F1F2F6;
  --pf-blue-600: var(--fs-logo);  --pf-blue-500: var(--fs-logo); --pf-blue-50: var(--fs-tint);
  --pf-cyan-500: #1F2433;  --pf-cyan-50: #F1F2F6;
  --pf-indigo-500: #1F2433; --pf-indigo-50: #F1F2F6;
  --pf-slate-500: #5A6070; --pf-slate-50: #F1F2F6;
  --pf-green-50: #EEF6F0;  --pf-green-600: #1F7A44;
  --pf-ink: #1F2433;
  --pf-ink-soft: #5A6070;
  --pf-ink-faint: #5A6070;
  --pf-line: #E2E4EC;
  --pf-line-soft: #EEF0F4;
  --pf-danger: #B3261E;
  --pf-radius: 12px;
  /* pf- の紙の面は中身の面の色（--fs-surface）。--pf-white は「いつでも白」のまま読み替えない
     （pf.css は濃い地の上の白い文字にも --pf-white を使うため）。pf- のカードの面は下の .pf-card で白地に向ける（2026-10-22） */
  --pf-paper: var(--fs-surface);
}

/* ── ボタンの色 ── 主ボタン＝ロゴの青（1 画面に 1 つ）、普通のボタン＝墨の線、取り消し＝灰、削除＝赤 */
.fs-theme .btn-primary { --bs-btn-bg: var(--fs-logo); --bs-btn-border-color: var(--fs-logo); --bs-btn-hover-bg: var(--fs-logo-2); --bs-btn-hover-border-color: var(--fs-logo-2); --bs-btn-active-bg: var(--fs-logo-2); --bs-btn-active-border-color: var(--fs-logo-2); --bs-btn-disabled-bg: #9CA1AF; --bs-btn-disabled-border-color: #9CA1AF; }
.fs-theme .btn-outline-primary { --bs-btn-color: var(--fs-logo); --bs-btn-border-color: var(--fs-logo); --bs-btn-hover-bg: var(--fs-logo); --bs-btn-hover-border-color: var(--fs-logo); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--fs-logo-2); --bs-btn-active-border-color: var(--fs-logo-2); }
.fs-theme .btn-outline-secondary { --bs-btn-color: #1F2433; --bs-btn-border-color: #B9BDCA; --bs-btn-hover-bg: #F1F2F6; --bs-btn-hover-color: #1F2433; --bs-btn-hover-border-color: #1F2433; --bs-btn-active-bg: #E4E6EE; --bs-btn-active-color: #1F2433; --bs-btn-active-border-color: #1F2433; }
.fs-theme .btn-light { --bs-btn-bg: #F1F2F6; --bs-btn-border-color: #F1F2F6; --bs-btn-hover-bg: #E4E6EE; --bs-btn-hover-border-color: #E4E6EE; --bs-btn-color: #1F2433; }
.fs-theme .btn-danger { --bs-btn-bg: #B3261E; --bs-btn-border-color: #B3261E; --bs-btn-hover-bg: #921D17; --bs-btn-hover-border-color: #921D17; }
.fs-theme .btn:focus-visible { outline: 3px solid var(--fs-logo); outline-offset: 2px; }

/* ── 表・入力欄・お知らせ枠の色 ── 表の見出しは淡い灰＋墨（青で塗らない） */
.fs-theme .table { --bs-table-striped-bg: #F7F8FA; }
.fs-theme .table > thead th { background: #F1F2F6; color: #1F2433; border-color: #E2E4EC; }
/* 入力欄の枠は、白い地との比 3 以上（#8F94A3＝3.03）。以前の #C3C7D3 は 1.7 で、枠がほとんど見えなかった（2026-10-09） */
.fs-theme .form-control, .fs-theme .form-select, .fs-theme .input-group-text { border-color: #8F94A3; }
.fs-theme .form-control:focus, .fs-theme .form-select:focus { border-color: var(--fs-logo); box-shadow: 0 0 0 .2rem rgba(var(--fs-logo-rgb),.18); }
/* ── 中身の面は白（--fs-surface）。画面の地（--fs-bg）は外側だけ（2026-10-09）──
   Bootstrap 5.3 は、カード・小窓・ドロップダウン・表・入力欄などの地を「本文の地」（--bs-body-bg）から取る。
   本文の地を画面の地にしているので、そのままだと部品の地まで画面の地の色になる。部品ごとに白へ戻す。
   入力欄・選択欄は、その部品の中だけ「本文の地」を白に読みかえる（background を直に書かないので、
   使えない状態の灰や、画面ごとの色の指定はそのまま効く）。 */
.fs-theme .card { --bs-card-bg: var(--fs-surface); }
/* pf- のカード・数字のタイル・ツールカードの面（pf.css は --pf-white＝白で塗る。pf.css は変えずにここで白地へ） */
.fs-theme .pf-card, .fs-theme .pf-stat, .fs-theme .pf-tool-card { background-color: var(--fs-surface); }
.fs-theme .modal { --bs-modal-bg: var(--fs-surface); }
.fs-theme .dropdown-menu { --bs-dropdown-bg: var(--fs-surface); }
.fs-theme .table { --bs-table-bg: var(--fs-surface); }
.fs-theme .list-group { --bs-list-group-bg: var(--fs-surface); }
.fs-theme .accordion { --bs-accordion-bg: var(--fs-surface); }
.fs-theme .pagination { --bs-pagination-bg: var(--fs-surface); }
.fs-theme .form-control, .fs-theme .form-select { --bs-body-bg: var(--fs-surface); }
/* Bootstrap の「白い地」のクラスの代わり（白い所 W4・2026-10-22）。同じ強さ（!important）で、中身の面の色に */
.fs-theme .bg-surface { background-color: var(--fs-surface) !important; }

/* お知らせ枠：左に太い線＋アイコン＋言葉。お知らせ（情報）は墨。青は使わない */
.fs-theme .alert-success { --bs-alert-bg: #EEF6F0; --bs-alert-border-color: #1F7A44; --bs-alert-color: #134D2B; }
.fs-theme .alert-warning { --bs-alert-bg: #FFF6E5; --bs-alert-border-color: #B97500; --bs-alert-color: #5C3800; }
.fs-theme .alert-danger  { --bs-alert-bg: #FCEEED; --bs-alert-border-color: #B3261E; --bs-alert-color: #7A1A14; }
.fs-theme .alert-info    { --bs-alert-bg: var(--fs-surface); --bs-alert-border-color: #1F2433; --bs-alert-color: #1F2433; }

/* チェック欄・ラジオの「選んだ」色はロゴの青（Bootstrap 標準の青は使わない）。
   選ぶ前は白い地＋入力欄と同じ枠（#8F94A3・白との比 3.03） */
.fs-theme .form-check-input { --bs-form-check-bg: var(--fs-surface); border-color: #8F94A3; }
.fs-theme .form-check-input:checked { background-color: var(--fs-logo); border-color: var(--fs-logo); }
.fs-theme .form-check-input:focus { border-color: var(--fs-logo); box-shadow: 0 0 0 .2rem rgba(var(--fs-logo-rgb),.18); }

/* 状態のバッジ：白い地＋色の線＋アイコン＋言葉（面を塗らない） */
.fs-theme .sbadge { display: inline-flex; align-items: center; gap: 4px; font-size: .875rem; font-weight: 700; border-radius: 4px; padding: 1px 8px; white-space: nowrap; border: 1px solid currentColor; background: var(--fs-surface); line-height: 1.6; }
.fs-theme .sbadge.wait { color: var(--fs-logo); }
.fs-theme .sbadge.ok { color: #1F7A44; }
.fs-theme .sbadge.back { color: #8A5300; }
.fs-theme .sbadge.ng { color: #B3261E; }
/* 「見本」の印：まだ機能がない所に出している架空のデータに付ける（墨の文字・灰の線。2026-10-10）。
   ホームの札と枠（portal.html）と、右下のチャット（base.html）で使う。 */
.fs-theme .sbadge.sample { color: var(--fs-ink); border-color: #9CA1AF; }

/* ── 今ある画面に色を広げたときの手当て（STEP3）──────────────────
   今ある画面は Bootstrap の色のクラスを直接書いている。クラス名は変えず、ここで読み替える。 */

/* 警告色を濃い茶（#8A5300）にしたので、「黄色の地＋黒い文字」は読めなくなる → 白い文字に。
   水色をやめて墨にしたので、「水色の地＋黒い文字」も同じ → 白い文字に。
   うすく塗った地（bg-opacity-10 / 25 など）は地が明るいので、文字は今のまま。 */
.fs-theme .bg-warning.text-dark:not([class*="bg-opacity"]),
.fs-theme .bg-info.text-dark:not([class*="bg-opacity"]) { color: #fff !important; }

/* Bootstrap 標準の青（#0d6efd）が直接書かれている部品 → ロゴの青・墨に */
.fs-theme .nav-pills { --bs-nav-pills-link-active-bg: var(--fs-logo); }
.fs-theme .nav-tabs { --bs-nav-tabs-link-active-color: #1F2433; }
.fs-theme .progress { --bs-progress-bar-bg: var(--fs-logo); }
.fs-theme .dropdown-menu { --bs-dropdown-link-active-bg: var(--fs-logo); }
.fs-theme .list-group { --bs-list-group-active-bg: var(--fs-logo); --bs-list-group-active-border-color: var(--fs-logo); }
.fs-theme .pagination { --bs-pagination-active-bg: var(--fs-logo); --bs-pagination-active-border-color: var(--fs-logo); --bs-pagination-color: #1F2433; --bs-pagination-hover-color: #1F2433; --bs-pagination-focus-color: #1F2433; }
.fs-theme .table-primary { --bs-table-bg: var(--fs-tint); --bs-table-border-color: var(--fs-tint-line); --bs-table-color: #1F2433; }
.fs-theme .table-info { --bs-table-bg: #F1F2F6; --bs-table-border-color: #E2E4EC; --bs-table-color: #1F2433; }
.fs-theme .btn-info { --bs-btn-bg: #F1F2F6; --bs-btn-border-color: #B9BDCA; --bs-btn-color: #1F2433; --bs-btn-hover-bg: #E4E6EE; --bs-btn-hover-border-color: #1F2433; --bs-btn-hover-color: #1F2433; --bs-btn-active-bg: #E4E6EE; --bs-btn-active-color: #1F2433; }
.fs-theme .btn-outline-info { --bs-btn-color: #1F2433; --bs-btn-border-color: #B9BDCA; --bs-btn-hover-bg: #F1F2F6; --bs-btn-hover-color: #1F2433; --bs-btn-hover-border-color: #1F2433; --bs-btn-active-bg: #E4E6EE; --bs-btn-active-color: #1F2433; --bs-btn-active-border-color: #1F2433; }
/* style.css に直接書かれた Bootstrap 標準の青（処理中のバッジ・ファイルを重ねたときの枠） */
.fs-theme .badge-processing { background-color: var(--fs-logo); }
.fs-theme .upload-zone.drag-over { background-color: var(--fs-tint); border-color: var(--fs-logo) !important; }