/* ════════════════════════════════════════════════════════════════
   fs-theme.css — 表示の色（色の着せ替え・2026-10-21）
   ─ 左メニューの一番下の歯車「設定」→「表示色・壁紙の変更」で 9 パターンから選ぶ。選んだ色は cookie fs_theme に覚え、
     サーバーが最初から <body data-theme="…"> を付けて描く（web_app/core/themes.py・base.html・/static/js/fs-theme.js）。
   ─ ここで変えるのは、fs-color.css の body.fs-theme が決める色の変数（--fs-*）だけ。
     pf- の部品・Bootstrap の主ボタンなどは、fs-color.css がこの変数から読み替えるので、ここに書かなくても変わる。
   ─ 「標準」は画面には何も書かない（data-theme を付けない＝今の見た目のまま）。
   ─ 書いてはいけないもの（tests/test_theme_switch.py が見張る）:
       ・成功・警告・エラー・情報の色（--bs-success / warning / danger / info とその仲間）。バッジ（有効＝緑・管理者＝黄・
         ロック＝赤）・お知らせ枠の意味を変えないため
       ・工程表の色（計画＝青・実績＝赤・変更後＝緑・変更前＝紫・注意＝琥珀）。工程表の画面は、いつも標準
   ─ 柄は画面の地（すき間＝body の地）だけ。カード・表・入力欄・上の白い帯・小窓は、それぞれ自分の地（--fs-surface）で塗るので無地。
   ─ 「白地」（--fs-surface）は、今まっ白な所（カード・上の帯・表の地など）に使う。
     濃い地の上の白い文字は --fs-on-dark（いつでも白）で、白地とは分けてある。
   ─ 指示の色（左メニュー・ボタン・白地・すき間・差し色）から、ほかの変数を同じ割合で作った:
       押した時＝ボタンに黒 18%、うす色＝ボタン 8%＋白、うす色の線＝ボタン 25%＋白、
       左メニューの見出しの文字＝左メニュー 24%＋白、左メニューのアイコンの文字＝左メニュー 13%＋白（標準の割合と同じ）。
     文字の見やすさ（ふつうの文字 4.5 以上・大きい文字とアイコン 3 以上）は tests/test_theme_switch.py が
     この CSS の値から計算して確かめる（柄はいちばん濃い所で計算）。値を変えたらテストを流す。
   ════════════════════════════════════════════════════════════════ */

/* ───────── 色の変数（パターンごと）─────────
   「body.fs-theme[data-theme=…]」は画面の色、「.fs-sw[data-theme=…]」はメニューの見本の絵の色（同じ値を 1 か所で持つ）。
   見本の絵は今の画面の色を受け継がないよう、どのパターンも全部の変数を書く。 */
/* 標準（standard・落ち着いた）── 画面には何も書かない（今の見た目のまま）。下は見本の絵のためだけの値（fs-color.css と同じ値） */
.fs-sw[data-theme="standard"] {
  --fs-side: #151E8A;
  --fs-logo: #1925AA;
  --fs-logo-2: #131D86;
  --fs-logo-rgb: 25, 37, 170;
  --fs-tint: #EEF0FB;
  --fs-tint-line: #C9CDF0;
  --fs-side-cap: #C9CDF0;
  --fs-side-ink: #DDE0F7;
  --fs-side-mark: #FFFFFF;
  --fs-side-top: none;
  --fs-surface: #FFFFFF;
  --fs-bg: #F5F6F9;
  --fs-bg-pattern: none;
  --fs-bg-pattern-size: auto;
}

/* グレー（gray・落ち着いた） */
body.fs-theme[data-theme="gray"],
.fs-sw[data-theme="gray"] {
  --fs-side: #2E3238;
  --fs-logo: #3D4450;
  --fs-logo-2: #323842;
  --fs-logo-rgb: 61, 68, 80;
  --fs-tint: #EFF0F1;
  --fs-tint-line: #CED0D3;
  --fs-side-cap: #CDCECF;
  --fs-side-ink: #E4E4E5;
  --fs-side-mark: #FFFFFF;
  --fs-side-top: none;
  --fs-surface: #F4F5F7;
  --fs-bg: #E4E6EA;
  --fs-bg-pattern: none;
  --fs-bg-pattern-size: auto;
}

/* 濃紺＋生成り（navy-kinari・落ち着いた） */
body.fs-theme[data-theme="navy-kinari"],
.fs-sw[data-theme="navy-kinari"] {
  --fs-side: #17233D;
  --fs-logo: #22355E;
  --fs-logo-2: #1C2B4D;
  --fs-logo-rgb: 34, 53, 94;
  --fs-tint: #EDEFF2;
  --fs-tint-line: #C8CCD7;
  --fs-side-cap: #C7CAD0;
  --fs-side-ink: #E1E2E6;
  --fs-side-mark: #FFFFFF;
  --fs-side-top: none;
  --fs-surface: #FAF7F0;
  --fs-bg: #EEEAE1;
  --fs-bg-pattern: none;
  --fs-bg-pattern-size: auto;
}

/* やわらかい（soft・ふつう） */
body.fs-theme[data-theme="soft"],
.fs-sw[data-theme="soft"] {
  --fs-side: #3B4A86;
  --fs-logo: #4B5BC4;
  --fs-logo-2: #3E4BA1;
  --fs-logo-rgb: 75, 91, 196;
  --fs-tint: #F1F2FA;
  --fs-tint-line: #D2D6F0;
  --fs-side-cap: #D0D4E2;
  --fs-side-ink: #E6E7EF;
  --fs-side-mark: #FFFFFF;
  --fs-side-top: none;
  --fs-surface: #F3F6FB;
  --fs-bg: #E2E9F3;
  --fs-bg-pattern: none;
  --fs-bg-pattern-size: auto;
}

/* 濃紺＋金（navy-gold・ふつう） */
body.fs-theme[data-theme="navy-gold"],
.fs-sw[data-theme="navy-gold"] {
  --fs-side: #14213D;
  --fs-logo: #1E2F55;
  --fs-logo-2: #192746;
  --fs-logo-rgb: 30, 47, 85;
  --fs-tint: #EDEEF1;
  --fs-tint-line: #C7CBD4;
  --fs-side-cap: #C7CAD0;
  --fs-side-ink: #E0E2E6;
  --fs-side-mark: #C9A227;
  --fs-side-top: linear-gradient(#C9A227, #C9A227);
  --fs-surface: #FBF5E6;
  --fs-bg: #EFE7D3;
  --fs-bg-pattern: none;
  --fs-bg-pattern-size: auto;
}

/* 方眼（grid・ふつう） */
body.fs-theme[data-theme="grid"],
.fs-sw[data-theme="grid"] {
  --fs-side: #151E8A;
  --fs-logo: #1925AA;
  --fs-logo-2: #131D86;
  --fs-logo-rgb: 25, 37, 170;
  --fs-tint: #EEF0FB;
  --fs-tint-line: #C9CDF0;
  --fs-side-cap: #C9CDF0;
  --fs-side-ink: #DDE0F7;
  --fs-side-mark: #FFFFFF;
  --fs-side-top: none;
  --fs-surface: #FFFFFF;
  --fs-bg: #F5F6F9;
  --fs-bg-pattern: linear-gradient(rgba(31, 36, 51, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 36, 51, .08) 1px, transparent 1px);
  --fs-bg-pattern-size: 20px 20px;
}

/* 青海波（seigaiha・少し派手） */
body.fs-theme[data-theme="seigaiha"],
.fs-sw[data-theme="seigaiha"] {
  --fs-side: #123A5C;
  --fs-logo: #1A5A85;
  --fs-logo-2: #154A6D;
  --fs-logo-rgb: 26, 90, 133;
  --fs-tint: #EDF2F5;
  --fs-tint-line: #C6D6E0;
  --fs-side-cap: #C6D0D8;
  --fs-side-ink: #E0E5EA;
  --fs-side-mark: #FFFFFF;
  --fs-side-top: none;
  --fs-surface: #FFFFFF;
  --fs-bg: #E6EEF5;
  --fs-bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='none' stroke='%231A5A85' stroke-opacity='.10'%3E%3Cpath d='M0 20a20 20 0 0 1 40 0M6 20a14 14 0 0 1 28 0M12 20a8 8 0 0 1 16 0'/%3E%3Cpath d='M-20 10a20 20 0 0 1 40 0M-14 10a14 14 0 0 1 28 0M-8 10a8 8 0 0 1 16 0M20 10a20 20 0 0 1 40 0M26 10a14 14 0 0 1 28 0M32 10a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");
  --fs-bg-pattern-size: 40px 20px;
}

/* 現場（genba・少し派手） */
body.fs-theme[data-theme="genba"],
.fs-sw[data-theme="genba"] {
  --fs-side: #25282D;
  --fs-logo: #2F3540;
  --fs-logo-2: #272B34;
  --fs-logo-rgb: 47, 53, 64;
  --fs-tint: #EEEFF0;
  --fs-tint-line: #CBCCCF;
  --fs-side-cap: #CBCBCD;
  --fs-side-ink: #E3E3E4;
  --fs-side-mark: #FFFFFF;
  --fs-side-top: repeating-linear-gradient(135deg, #F2C200 0 8px, #1F1F1F 8px 16px);
  --fs-surface: #FFFFFF;
  --fs-bg: #E8E9EB;
  --fs-bg-pattern: repeating-linear-gradient(45deg, rgba(37, 40, 45, .06) 0 1px, transparent 1px 14px);
  --fs-bg-pattern-size: auto;
}

/* 夕暮れ（yugure・少し派手） */
body.fs-theme[data-theme="yugure"],
.fs-sw[data-theme="yugure"] {
  --fs-side: #3F3270;
  --fs-logo: #4A3A86;
  --fs-logo-2: #3D306E;
  --fs-logo-rgb: 74, 58, 134;
  --fs-tint: #F1EFF5;
  --fs-tint-line: #D2CEE1;
  --fs-side-cap: #D1CEDD;
  --fs-side-ink: #E6E4EC;
  --fs-side-mark: #F0A060;
  --fs-side-top: none;
  --fs-surface: #FCFBFE;
  --fs-bg: #EEEBF4;
  --fs-bg-pattern: radial-gradient(rgba(74, 58, 134, .10) 1.2px, transparent 1.7px);
  --fs-bg-pattern-size: 16px 16px;
}


/* ───────── 画面への効かせ方（標準＝data-theme なしの画面には効かない）───────── */
/* 柄：画面の地（すき間）だけ */
body.fs-theme[data-theme] {
  background-image: var(--fs-bg-pattern);
  background-size: var(--fs-bg-pattern-size);
}
/* 左メニューの上の細い線（濃紺＋金＝金・現場＝黄黒の縞）。線の無いパターンは none */
body.fs-theme[data-theme] .l1-side {
  background-image: var(--fs-side-top);
  background-repeat: no-repeat;
  background-size: 100% 4px;
}
/* 左メニューの「今いる画面」の印（左の線）。標準は白（fs-shell.css）。濃紺＋金＝金・夕暮れ＝だいだい */
body.fs-theme[data-theme] .l1-nav a.on { box-shadow: inset 4px 0 0 var(--fs-side-mark); }

/* ───────── 歯車「設定」（左メニューの一番下・版数の上・2026-10-22 に「表示の色」から）─────────
   押せる大きさは 48px。左メニューを畳んだときはアイコンだけ（名前は吹き出し・fs-side.js）。 */
.l1-foot .l1-set { margin-top: 8px; }
.l1-foot .l1-set:first-child { margin-top: 0; }   /* 一番上のとき（2026-10-24 に上の「困ったら Factory君」をやめた）はすき間を付けない */
.l1-foot .btn-set {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px;
  background: transparent; border: 0; border-radius: 8px; color: var(--fs-on-dark); font-size: 1rem; line-height: 1.3; text-align: left;
}
.l1-foot .btn-set .bi { color: var(--fs-side-ink); font-size: 1.1875rem; flex-shrink: 0; }
.l1-foot .btn-set:hover, .l1-foot .btn-set[aria-expanded="true"] { background: rgba(255,255,255,.08); color: var(--fs-on-dark); }
.l1-foot .btn-set:focus-visible { outline: 3px solid var(--fs-on-dark); outline-offset: -3px; }
@media (min-width: 1400px) {
  .l1-mini .l1-foot .btn-set { justify-content: center; width: 48px; padding: 0; margin: 0 auto; }
}

/* ───────── 設定のメニュー（項目の一覧 → 項目の中身に入れ替わる・fs-settings.js）─────────
   地は小窓と同じ白地（--fs-surface・無地）。一覧は小さく、中身（9 パターン）を出している間は 372px。 */
/* 開いている間だけ、左メニューを本文と上の白い帯（1030）より手前に（fs-settings.js が付け外し）。小窓（1055）よりは奥 */
.l1-side.is-set-open { z-index: 1031; }
.l1-set-menu { width: 280px; padding: 10px; border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(16,40,90,.45); }
.l1-set-menu.is-panel { width: 372px; padding: 10px 14px 12px; }
.l1-set-head { font-size: 1rem; font-weight: 700; color: var(--fs-ink); padding: 2px 4px 6px; }
.l1-set-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 10px;
  background: transparent; border: 0; border-radius: 8px; color: var(--fs-ink); font-size: 1rem; font-weight: 700; text-align: left;
}
.l1-set-item .bi { color: var(--fs-muted); font-size: 1.125rem; }
.l1-set-item .ch { margin-left: auto; font-size: .875rem; }
.l1-set-item:hover { background: var(--fs-soft); }
.l1-set-item:focus-visible, .l1-set-back:focus-visible { outline: 3px solid var(--fs-logo); outline-offset: 2px; }
.l1-set-back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px 0 2px; margin: 0 0 2px -2px;
  background: transparent; border: 0; border-radius: 6px; color: var(--fs-muted); font-size: .875rem; font-weight: 700;
}
.l1-set-back:hover { background: var(--fs-soft); color: var(--fs-ink); }
.l1-set-panel .l1-set-head { padding: 0; }

/* ───────── 表示色・壁紙の変更（小さな見本の絵＋名前を 3 列・中身は _theme_picker.html）─────────
   今選んでいるものは墨の太い枠＋チェックの印。 */
.l1-theme-hint { font-size: .875rem; color: var(--fs-muted); margin: 2px 0 4px; }
.l1-theme-cap { font-size: .875rem; font-weight: 700; color: var(--fs-muted); margin: 10px 2px 6px; }
.l1-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.l1-theme-opt {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  min-height: 44px; padding: 5px 5px 4px; background: transparent; border: 1px solid var(--fs-border); border-radius: 8px;
  color: var(--fs-ink); font-size: .875rem; font-weight: 700; line-height: 1.3; text-align: center;
}
.l1-theme-opt:hover { background: var(--fs-soft); }
.l1-theme-opt:focus-visible { outline: 3px solid var(--fs-logo); outline-offset: 2px; }
.l1-theme-opt[aria-pressed="true"] { border: 2px solid var(--fs-ink); padding: 4px 4px 3px; }
.l1-theme-opt .ck { display: none; position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--fs-ink); color: var(--fs-on-dark); font-size: .8125rem; line-height: 22px; text-align: center; }
.l1-theme-opt[aria-pressed="true"] .ck { display: block; }
.l1-theme-note { font-size: .875rem; color: var(--fs-ink); margin: 10px 0 0; padding: 6px 8px; border: 1px solid #9CA1AF; border-radius: 6px; }

/* 見本の絵：すき間（柄つき）・左メニュー（上の線・今いる画面の印）・上の白い帯・カード・ボタン */
.fs-sw {
  position: relative; display: block; height: 52px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(31, 36, 51, .18);
  background-color: var(--fs-bg); background-image: var(--fs-bg-pattern); background-size: var(--fs-bg-pattern-size);
}
.fs-sw .sw-side { position: absolute; left: 0; top: 0; bottom: 0; width: 18px;
  background-color: var(--fs-side); background-image: var(--fs-side-top); background-repeat: no-repeat; background-size: 100% 4px; }
.fs-sw .sw-side::after { content: ""; position: absolute; left: 0; top: 16px; width: 3px; height: 9px; background: var(--fs-side-mark); }
.fs-sw .sw-top { position: absolute; left: 18px; right: 0; top: 0; height: 10px; background: var(--fs-surface); border-bottom: 1px solid rgba(31, 36, 51, .12); }
.fs-sw .sw-card { position: absolute; left: 26px; right: 8px; top: 17px; bottom: 7px; background: var(--fs-surface); border: 1px solid rgba(31, 36, 51, .12); border-radius: 3px; }
.fs-sw .sw-btn { position: absolute; right: 13px; bottom: 12px; width: 20px; height: 8px; background: var(--fs-logo); border-radius: 2px; }