/* =========================================================
   coreflow-desk-mhs.css ─ MHS（1日）の見た目
   ---------------------------------------------------------
   🔴🔴 **本体はここ（CoreFlowアプリ\_shared）だけ。** アプリの中にあるのは配られた写し。
      直す時は必ずここを直して `sync-shared.ps1` を走らせる。
      FlowDesk では `desk-mhs.css`、FlowGo では `css\coreflow-desk-mhs.css`。

   🗣 ゆうた 2026-09-19「mhsの表示を作成」（FlowGo にスケジュールのタブを足す）
      → もとは FlowDesk の desk.css の中。FlowGo にも同じ物を出すので引っ越した。
      中身を作るのは `coreflow-desk-mhs.js`（FDMhs）。ここは見た目だけ。

   ⚠ **色は決めていない。借りる側が用意する。**（ほかの共通CSSと同じ約束）
      使う名前＝ --t1 --t2 --t3 --s1 --s2 --s3 --s3-hi --hair --hair2 --hair3
                --fd --fd-hi --fd-ink --fd-soft --fd-line --todo --warn --urgent --good
                --win --tip --shadow --num --fs
   ========================================================= */

.fd-mhs { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* ✅ v1.9.0 完了通知（MHS の TODO）の印と、その場で報告する窓 */
.mh-todo { flex: none; width: 11px; height: 11px; border-radius: 3px; display: inline-grid; place-items: center; }
.mh-todo.open { box-shadow: inset 0 0 0 1.5px var(--fd); }
.mh-todo.over { box-shadow: inset 0 0 0 1.5px var(--todo); background: color-mix(in srgb, var(--todo) 18%, transparent); }
.mh-todo.reported { background: var(--todo); border-radius: 50%; width: 9px; height: 9px; }
.mh-todo.done { color: var(--t3); }
.mh-todo.done svg { width: 10px; height: 10px; }
.mh-ev[data-mh-todo] .l1, .mh-chip[data-mh-todo] { cursor: pointer; }
/* 🔴 v1.9.1 押した予定のすぐ下（入らなければ上）＝ top は desk-mhs.js の placeSheet が決める。矢印で予定を指す */
.mh-sheet::before { content: ''; position: absolute; left: calc(var(--ax, 50%) - 7px); top: -7px; width: 14px; height: 14px; background: var(--menu, var(--card, var(--s1))); transform: rotate(45deg); box-shadow: -1px -1px 0 0 var(--hair2); border-radius: 2px 0 0 0; }
.mh-sheet.up::before { top: auto; bottom: -7px; box-shadow: 1px 1px 0 0 var(--hair2); border-radius: 0 0 2px 0; }
.mh-sheet.noarrow::before { display: none; }
.mh-sheet { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 30; background: var(--menu, var(--card, var(--s1))); border-radius: 12px; padding: 12px 14px 12px; box-shadow: 0 0 0 1px var(--hair2), 0 18px 40px var(--shadow-lg); animation: mhSheet .14s ease-out; }
@keyframes mhSheet { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mh-sh-h { display: flex; align-items: flex-start; gap: 10px; }
.mh-sh-bar { flex: none; width: 3px; align-self: stretch; border-radius: 2px; background: var(--c); }
.mh-sh-t { flex: 1; min-width: 0; }
.mh-sh-t b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.mh-sh-t small { font-size: 11.5px; color: var(--t3); }
.mh-sheet p { margin: 8px 0 0; font-size: 12.5px; color: var(--t2); line-height: 1.7; }
.mh-sheet p b { color: var(--t1); }
.mh-sheet p small { color: var(--t3); }
.mh-sh-memo { display: block; width: 100%; height: 34px; margin-top: 8px; border: 0; border-radius: 8px; background: var(--s1); color: var(--t1); font: inherit; font-size: 12.5px; padding: 0 10px; box-shadow: inset 0 0 0 1px var(--hair2); outline: none; }
.mh-sh-memo:focus { box-shadow: inset 0 0 0 1.5px var(--fd); }
.mh-sheet p.mh-sh-err { margin-top: 8px; color: var(--urgent); font-size: 12px; line-height: 1.5; }
.mh-sh-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mh-sh-link { margin-left: auto; border: 0; background: none; color: var(--t3); font-size: 11.5px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.mh-sh-link:hover { color: var(--t1); background: var(--s2); }
.mh-top { flex: none; display: flex; align-items: center; gap: 2px; padding: 8px 10px 8px 8px; }
.mh-date { border: 0; background: none; display: flex; align-items: baseline; gap: 6px; padding: 3px 6px; border-radius: 7px; cursor: pointer; min-width: 0; }
.mh-date:hover { background: var(--s1); }
.mh-date b { font: 600 17px var(--num); white-space: nowrap; }
.mh-date b small { font: 600 13px var(--fs); margin-left: 1px; }
.mh-date .hol { font-size: 11px; color: var(--urgent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 🔴 2026-09-20 日付＝カレンダーを開くボタン。「今日へ」は別のボタン（.mh-back）に分けた
   🗣 ゆうた「日付をクリックでカレンダー」「今日へは独立したリンクとして生きる感じ」 */
.mh-date .mh-ci { display: inline-flex; color: var(--t3); align-self: center; }
.mh-date:hover .mh-ci { color: var(--t1); }
.mh-back { flex: none; border: 0; background: none; color: var(--t3); font: inherit; font-size: 10.5px; font-weight: 600; white-space: nowrap;
           box-shadow: inset 0 0 0 1px var(--hair2); border-radius: 5px; padding: 3px 7px; margin-left: 4px; cursor: pointer; }
.mh-back:hover { color: var(--t1); background: var(--s2); }
.mh-mt { font: 600 15px var(--num); padding: 0 4px; white-space: nowrap; }
.mh-x { margin-left: 4px; }

/* 🔃 個人 → 全体 → Today と、押すたびに入れ替わる1つのスイッチ
   🗣 ゆうた「クリックするごと表示が入れかわるようなスイッチに」 */
.mh-sw { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; border: 0; cursor: pointer;
         background: var(--s1); color: var(--t2); font: inherit; font-size: 11.5px; font-weight: 600;
         padding: 4px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--hair2); }
.mh-sw:hover { background: var(--s2); color: var(--t1); }
.mh-sw i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--t3); }
.mh-sw.sc-me i { background: var(--fd); }
.mh-sw.sc-all i { background: #4b9df0; }
.mh-sw.sc-today i { background: var(--todo); }
.mh-sw.sc-today { color: var(--t1); }

/* 🌅 当日ビュー（入庫返車・来店・納車・車検・全体/部署）  2026-09-20
   🗣 ゆうた「設定で当日ビューを1カラムか3カラム表示にするか選ばせる。どちらのパターンも
      入庫返車・来店・納車・車検・全体or部署予定を入れる。入庫返車は3カラムならガチモンの MHS の当日ビューに寄せる」
   🔴 **札・バッジの色は MHS の当日ビュー（index.html）から写した値そのまま。**
      面（地）の名前だけ FlowDesk 側に置き換えてある（--bg2→--s1／--bg3→--s2／--border→--hair2）。
      ⚠ MHS が色を変えたら、ここも合わせる（写した値なので自動では追えない）。 */
.mh-tscroll { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px 14px; border-top: 1px solid var(--hair); }
.mh-today { display: flex; flex-direction: column; gap: 9px; }
.mo-duty { display: flex; flex-wrap: wrap; gap: 5px; }
/* 🗣 ゆうた 2026-09-20「3カラムの当番の位置をメインの BOX の中に」
   → さらに「入庫返車の計数の逆側の右端に」＝件数チップと同じ段の右の端 */
.mo-dutybox { padding: 8px 10px; }
.mo-dutybox .mo-chip { background: var(--s2); }
.mo-duty.right { margin-left: auto; justify-content: flex-end; align-items: center; }
/* 🗣 ゆうた「1カラム表示の場合は当番は一番下に表示」 */
.mo-duty.bottom { margin-top: 2px; }
.mo-duty.right .mo-chip { background: var(--s2); font-size: 11.5px; padding: 5px 10px; }
.mo-chip { font-size: 11px; font-weight: 600; color: var(--t2); background: var(--s1); border-radius: 6px; padding: 3px 9px; box-shadow: inset 2px 0 0 var(--c, var(--hair2)), inset 0 0 0 1px var(--hair); }
.mo-chip b { color: var(--t1); }
.mo-chip.none { color: var(--t3); box-shadow: inset 0 0 0 1px var(--hair2); }
.mo-g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 9px; align-items: start; }
.mo-g4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
/* 🗣 ゆうた「1カラムの方は 整備・車販・受付・デザインは2カラムにしないで1段ずつ」 */
.mo-g4.one { grid-template-columns: minmax(0, 1fr); gap: 0; }
.mo-sec { background: var(--s1); border-radius: 11px; padding: 9px 11px 10px; box-shadow: inset 0 0 0 1px var(--hair); }
.mo-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 7px; }
.mo-h svg { color: var(--t3); }
.mo-h em { margin-left: auto; font: 800 13px var(--num); font-style: normal; color: var(--t2); }
.mo-cnt { font-size: 11.5px; font-weight: 700; color: var(--t2); margin-bottom: 5px; }
.mo-sub { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--t3); margin: 8px 0 3px; border-top: 1px solid var(--hair); padding-top: 7px; }
.mo-dh { font-size: 11px; font-weight: 700; color: var(--t2); margin: 6px 0 3px; }
.mo-r { border-left: 3px solid var(--c, var(--hair2)); border-radius: 0 7px 7px 0; background: var(--s2); padding: 5px 9px; margin-top: 4px; cursor: pointer; }
.mo-r:hover { background: var(--s3); }
.mo-r .r1 { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
/* ⚠ 名前は .mo-tm（.tm はタイマーのカード、.pl はタスクボードのカードの名前。
   そのまま使うと、時刻やナンバーにカードの箱が付いてしまう（ゆうた 2026-09-20「各イベントの時間にBOXが入ってる」） */
.mo-r .r1 .mo-tm { flex: none; font: 700 11.5px var(--num); color: var(--t2); font-variant-numeric: tabular-nums; }
.mo-r .r1 b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mo-r .r1 .dn { flex: none; font-size: 10px; font-weight: 700; color: var(--good); }
.mo-r .r2 { font-size: 11px; color: var(--t3); margin-top: 1px; line-height: 1.4; }
.mo-none { font-size: 11.5px; color: var(--t3); padding: 2px 0; }
.mo-r.has-todo { cursor: pointer; }
.mo-r .r1 .mh-todo { margin-right: 1px; }
/* 完了の窓を、その行のすぐ下に出す（日ビューは浮かせる・ここは行の下に置く） */
.mo-sheet { position: relative; margin: 4px 0 6px; }
.mo-sheet .mh-sheet { position: static; left: auto; right: auto; top: auto; animation: none; }
.mo-sheet .mh-sheet::before { display: none; }

/* 🗓 カレンダーの日を押した時のポップ（その日の全件）
   🗣 ゆうた 2026-09-20「一度ポップ表示で全件をサクッと見れる機能。MHS のマスターカレンダーと同じ挙動。
      欄外を触ると閉じる。『あれ？この日だったかな？違うか。』に対応したい」 */
/* 🔴 2026-09-20（ゆうた報告 ①「枠の背景が透明」②「右の見切れる位置に開いてから中央に戻る」
   ③「FlowGo で出なくなった」④「FlowDesk で二回パパっと出る」）
   ⇒ ・置き場は **画面に対して固定（fixed）**。列の中で absolute にすると、
        列が画面より長い時に**画面の外（下）で真ん中**になり、出ていないように見える（FlowGo）
     ・真ん中に寄せるのは**包む枠**の仕事（transform で寄せると出てくる動きと喧嘩して、ズレて開く）
     ・**出てくる動きは付けない**。描き直すたびに animation が鳴り直して「パパッ」と2回光る
     ・地の色は、色を決めていない画面でも透けないように控えを付ける */
.mh-pop-bd { position: fixed; inset: 0; z-index: 60; background: var(--scrim, rgba(6, 8, 10, .6)); }
.mh-pop-wrap { position: fixed; inset: 0; z-index: 61; display: flex; align-items: center; justify-content: center; padding: 14px; pointer-events: none; }
.mh-pop { pointer-events: auto; width: min(420px, 100%); max-height: 100%; display: flex; flex-direction: column;
  background: var(--menu, var(--card, var(--s1))); border-radius: 14px;
  box-shadow: 0 0 0 1px var(--hair2), 0 24px 60px var(--shadow-lg, var(--shadow, rgba(0, 0, 0, .5))); }
/* ⚠ 古い画面（包む枠を出さない版）が新しい見た目を掴んだ時の受け皿 */
.fd-mhs > .mh-pop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: calc(100% - 28px); }
.mh-pop-h { flex: none; display: flex; align-items: baseline; gap: 8px; padding: 12px 10px 10px 14px; border-bottom: 1px solid var(--hair); }
.mh-pop-h b { font: 700 18px var(--num); }
.mh-pop-h b small { font: 600 13px var(--fs); margin-left: 1px; }
.mh-pop-h .hol { font-size: 11.5px; color: var(--urgent); }
.mh-pop-h em { margin-left: auto; font: 700 12px var(--num); font-style: normal; color: var(--t3); }
.mh-pop-h .fd-ib { align-self: center; }
.mh-pop-b { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px 10px; }
.mh-pop-f { flex: none; display: flex; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--hair); }

/* 🔧 車検の行＝MHS の板と同じ並び・同じ札。3カラムの時だけ真ん中で2列に切る */
.mo-shk-list.two { column-count: 2; column-gap: 20px; column-rule: 1px solid var(--hair); }
.mo-shk[data-mh-shk] { cursor: pointer; }
.mo-shk[data-mh-shk]:hover { background: color-mix(in srgb, var(--todo) 10%, transparent); border-radius: 6px; }
.mo-shk { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 12.5px; padding: 5px 2px; border-top: 1px solid var(--hair-faint); break-inside: avoid; }
.mo-shk:first-child { border-top: 0; }
.mo-shk.done { opacity: .55; }
.mo-shk .k { font-size: 10.5px; font-weight: 800; color: #1c1300; background: #e6c34d; border-radius: 5px; padding: 1px 7px; }
.mo-shk .k.re { background: #f97316; color: #1b0d00; }
.mo-shk .ap { flex: 0 0 32px; text-align: center; font: 800 10.5px var(--num); border-radius: 6px; padding: 1px 0; }
.mo-shk .ap.am { color: #a78bfa; background: rgba(124, 58, 237, .16); }
.mo-shk .ap.pm { color: #e879f9; background: rgba(192, 38, 211, .16); }
.mo-shk .nm { font-weight: 700; white-space: nowrap; }
.mo-shk .nm small { font-size: 10.5px; font-weight: 500; color: var(--t3); margin-left: 2px; }
.mo-shk .car { font-weight: 700; }
.mo-shk .mo-pl { font: 700 11.5px var(--num); color: var(--t2); background: var(--s2); box-shadow: inset 0 0 0 1px var(--hair2); border-radius: 5px; padding: 0 6px; }
.mo-shk .st { font-size: 11.5px; font-weight: 700; color: #7fdcb4; background: rgba(38, 162, 105, .18); border-radius: 5px; padding: 0 6px; }
.mo-shk .st.st2 { background: none; box-shadow: inset 0 0 0 1px rgba(127, 220, 180, .5); }
.mo-shk .of { font-size: 11.5px; font-weight: 700; color: #9dc0f8; background: rgba(59, 130, 246, .16); border-radius: 5px; padding: 0 6px; }
.mo-shk .rd { font: 800 11.5px var(--num); color: #e6c34d; background: rgba(230, 195, 77, .16); border-radius: 5px; padding: 0 6px; }
.mo-shk .tbd { font-size: 10.5px; color: var(--t3); border: 1px dashed var(--hair2); border-radius: 5px; padding: 0 5px; }
.mo-shk .mk { margin-left: auto; font-size: 10.5px; font-weight: 800; border-radius: 5px; padding: 1px 6px; }
.mo-shk .mk.done { color: #7fdcb4; background: rgba(38, 162, 105, .18); }
.mo-shk .mk.re { color: #f3a4b5; background: rgba(239, 68, 68, .16); }
.mo-shk .mk.rp { color: #9dc0f8; background: rgba(59, 130, 246, .16); }

/* 🚙 納車＝CarFlow の納車予定カード（写真・メーカー車種・時刻・KM番号・お客様名） */
.mo-dcards { display: flex; gap: 8px; flex-wrap: wrap; }
.mo-dcard { width: 124px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--hair2); border-radius: 9px; overflow: hidden; }
.mo-dcard .ph { height: 66px; display: grid; place-items: center; color: var(--t3); background: var(--s3) center/cover no-repeat; }
.mo-dcard .bd { padding: 6px 8px; }
.mo-dcard .t { font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-dcard .m { font-size: 11.5px; font-weight: 700; color: var(--fd); margin-top: 2px; }
.mo-dcard .n { font-size: 10.5px; color: var(--t3); margin-top: 1px; }
.mo-dcard .cus { padding: 5px 8px; background: var(--s3); border-top: 1px solid var(--hair); font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 🚚 3カラムの入庫・返車＝MHS の当日ビューそのまま（行の形も札の色も同じ） */
.pit-counts { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.count-chip { display: flex; align-items: baseline; gap: 6px; border: 1px solid var(--hair2); border-radius: 10px; padding: 6px 14px; }
.count-chip.in { background: rgba(29, 185, 122, .10); border-color: #1db97a; }
.count-chip.out { background: rgba(59, 130, 246, .10); border-color: #3b82f6; }
.count-chip .num { font: 800 22px/1 var(--num); }
.count-chip.in .num { color: #1db97a; }
.count-chip.out .num { color: #3b82f6; }
.count-chip .lbl { font-size: 11px; font-weight: 700; color: var(--t2); }
.count-chip .rem { font: 800 12px var(--num); color: var(--fd); margin-left: 2px; }
.today-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 12px; align-items: start; }
.today-col { background: var(--s1); border: 1px solid var(--hair2); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.today-col-head { padding: 9px 13px; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--hair2); }
.today-col-head .ic { font-size: 16px; }
.today-col-head .cnt { margin-left: auto; font: 700 11px var(--num); background: var(--s2); padding: 2px 10px; border-radius: 10px; color: var(--t2); }
.today-col-head.intake { color: #1db97a; }
.today-col-head.return { color: #3b82f6; }
.today-empty { padding: 26px 16px; text-align: center; color: var(--t3); font-size: 12px; }
.today-row { display: grid; grid-template-columns: 62px 22px minmax(0, 1fr) 190px; gap: 10px; padding: 0 12px 0 14px; height: 56px;
  border-bottom: 1px solid var(--hair2); border-left: 6px solid var(--team); align-items: center; overflow: hidden; cursor: pointer; }
.today-row:hover { background: var(--s2); }
.today-row.tr-done { opacity: .4; }
.today-row.is-retpend { background: rgba(131, 144, 166, .10); --team: var(--t3); border-left-style: dashed; }
.today-row.is-retpend .tr-customer, .today-row.is-retpend .tr-carname, .today-row.is-retpend .tr-time { color: var(--t3); }
.tr-time { font: 800 15px var(--num); color: var(--t1); white-space: nowrap; }
.tr-time.is-range { font-size: 12.5px; line-height: 1.14; }
.tr-time.is-range .tt-l { display: block; }
.tr-time.is-range .tt-sep { font-size: 9.5px; line-height: 1; color: var(--t3); font-weight: 700; }
.tr-front { writing-mode: vertical-rl; text-orientation: upright; font-size: 11px; font-weight: 800; color: #fff; border-radius: 5px; padding: 3px 1px;
  text-align: center; letter-spacing: 1px; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 34px; }
.tr-front.empty { background: transparent; }
.tr-main { min-width: 0; }
.tr-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tr-customer { font-size: 16px; font-weight: 800; white-space: nowrap; }
.tr-carname { font-size: 15px; font-weight: 700; white-space: nowrap; }
.tr-plateline { display: flex; align-items: center; gap: 8px; margin-top: 1px; min-width: 0; }
.tr-plate { flex: none; font-size: 12px; color: var(--t2); }
.tr-note { flex: 1; min-width: 0; font-size: 12px; font-weight: 800; color: var(--fd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-tags { display: grid; grid-template-columns: 64px 44px 78px; gap: 6px; align-items: center; justify-content: end; }
.tr-tag-slot { display: flex; gap: 3px; align-items: center; justify-content: flex-end; min-width: 0; }
.tag-drop { width: 100%; height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 14px; }
.tag-drop-wait { background: #64748b; }
.tag-drop-sameDay { background: #f59e0b; }
.tag-drop-drop { background: #10b981; }
.tag-work { width: 100%; height: 26px; border: 1px solid; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; overflow: hidden; }
.tag-work.long { font-size: 11px; }
.tag-side { font-size: 10.5px; font-weight: 700; padding: 3px 6px; border-radius: 5px; background: var(--s2); color: var(--t2); border: 1px solid var(--hair2); white-space: nowrap; }
.tag-side.consult { background: rgba(234, 179, 8, .15); color: #a16207; border-color: #eab308; }
.tag-side.loaner { background: rgba(245, 158, 11, .12); color: #b45309; border-color: #f59e0b; }
.tag-side.wash { background: rgba(59, 130, 246, .1); color: #2563eb; border-color: #3b82f6; }
.ret-pend { display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; white-space: nowrap;
  padding: 3px 6px; border-radius: 5px; background: rgba(131, 144, 166, .18); color: #8390a6; border: 1px solid #8390a6; }
.tod-break { background: repeating-linear-gradient(45deg, rgba(110, 140, 180, .16), rgba(110, 140, 180, .16) 10px, rgba(110, 140, 180, .05) 10px, rgba(110, 140, 180, .05) 20px);
  border-top: 1px dashed #6b87a8; border-bottom: 1px dashed #6b87a8; }
.tod-break-bar { color: #9fb6d4; font-size: 12px; font-weight: 800; text-align: center; padding: 5px 0; background: rgba(110, 140, 180, .14); }
/* 明るい地の時は、MHS と同じく字を濃くする */
:root[data-theme="light"] .tod-break-bar { color: #3a5273; }
:root[data-theme="light"] .mo-shk .k { color: #1c1300; }

.mh-row { flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 7px 12px 7px 10px; border-top: 1px solid var(--hair); }
.mh-lab { font-size: 10.5px; font-weight: 600; color: var(--t3); text-align: right; padding-top: 4px; line-height: 1.3; }
.mh-chips { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mh-scroll { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px 10px 10px; border-top: 1px solid var(--hair); }
.mh-grid { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 8px; }
.mh-hours { position: relative; }
.mh-hours span { position: absolute; right: 0; transform: translateY(-50%); font: 500 10.5px var(--num); color: var(--t3); font-variant-numeric: tabular-nums; }
.mh-lane { position: relative; border-left: 1px solid var(--hair); }
.mh-lane .hl { position: absolute; left: 0; right: 0; height: 1px; background: var(--hair); }
.mh-lane .hl.half { background: var(--hair-faint); }
.mh-lane .closed { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--stripe) 0 6px, transparent 6px 12px); }
.mh-ev { position: absolute; border-radius: 6px; background: var(--s2); padding: 4px 8px 4px 10px; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--hair); }
.mh-ev::before, .mh-chip::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.mh-ev:hover { background: var(--s3); }
.mh-ev .l1 { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; }
.mh-ev .l1 .who, .mh-chip .who { color: var(--t2); flex: none; }
.mh-ev .l1 .t, .mh-chip .t { overflow: hidden; text-overflow: ellipsis; }
.mh-ev .l2 { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 500 11px var(--num); color: var(--t3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mh-ev.short { padding-block: 2px; }
.mh-ev.short .l2 { display: none; }
.mh-ev.mine { background: var(--ev-mine); }
.mh-ev.tent { background: transparent; box-shadow: inset 0 0 0 1px var(--hair2); }
.mh-ev.done .t { text-decoration: line-through; color: var(--t2); }
.mh-pill { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 0 5px; line-height: 15px; flex: none; color: var(--t2); box-shadow: inset 0 0 0 1px var(--hair2); }
.mh-chip { position: relative; display: flex; align-items: center; gap: 6px; border-radius: 6px; background: var(--s2); padding: 4px 8px 4px 10px; font-size: 12px; font-weight: 600; overflow: hidden; white-space: nowrap; cursor: pointer; }
.mh-chip .ap { margin-left: auto; font: 500 11px var(--num); color: var(--t3); flex: none; }
.mh-faces { display: flex; align-items: center; }
.mh-face { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; background: #475569 center/cover no-repeat; box-shadow: 0 0 0 1.5px var(--win); flex: none; }
.mh-faces .mh-face + .mh-face { margin-left: -4px; }
.mh-now { position: absolute; left: -5px; right: 0; height: 0; border-top: 1.5px solid var(--t1); z-index: 3; pointer-events: none; }
.mh-now::before { content: ''; position: absolute; left: 0; top: -4.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--t1); }
.mh-now span { position: absolute; left: -49px; top: -8px; font: 700 10.5px var(--num); color: var(--t1); background: var(--win); padding: 0 3px; font-variant-numeric: tabular-nums; }
.mh-off { background: var(--s1); align-items: center; }
.mh-off .mh-lab { padding-top: 0; }
.mh-offlist { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.mh-offp { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); }
.mh-offp .mh-face { width: 22px; height: 22px; font-size: 10.5px; box-shadow: none; }
.mh-none { font-size: 11.5px; color: var(--t3); padding-top: 3px; }

/* 明るい地の時の直し（暗い地の前提で決めていた所） */
:root[data-theme="light"] .fd-card, :root[data-theme="light"] .mh-ev { box-shadow: inset 0 0 0 1px var(--hair), 0 1px 2px rgba(16, 24, 32, .05); }

/* =========================================================
   🗓 月ビュー（マスターカレンダー）  2026-09-19
   🗣 ゆうた「スケジュールタブをもう一回押すと月ビューに変わる」
   ⚠ 1日ぶんは「色の点＋先頭の1件」まで。狭いので全部は出さない（押すと日ビューへ）。
   ========================================================= */
.mh-mwd { flex: none; display: grid; grid-template-columns: repeat(7, 1fr); padding: 2px 6px 4px; }
.mh-mwd span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--t3); }
.mh-mwd .sun { color: #f2556c; }
.mh-mwd .sat { color: #4b9df0; }

.mh-mgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(58px, 1fr); gap: 2px; padding: 0 6px 6px; overflow: auto; }
.mh-mday {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  background: var(--s1); border: 0; border-radius: 7px; padding: 4px 4px 3px;
  color: var(--t1); font-family: inherit; text-align: left; cursor: pointer; overflow: hidden;
  min-height: 52px;
}
.mh-mday:hover { background: var(--s2); }
.mh-mday.out { opacity: .38; }
.mh-mday.today { box-shadow: inset 0 0 0 1.5px var(--fd); }
.mh-mday.closed { background: var(--hair-faint); }
/* 🔴 2026-09-20 1日の中身を MHS のマスターカレンダーと同じ帯で出す
   🗣 ゆうた「イベント内容が削られ過ぎて、日付を選ぶ以外の使い方ができない」 */
.mh-mday .dn { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.mh-mday .n { font: 700 12px var(--num); line-height: 1.1; }
.mh-mday.sun .n { color: #f2556c; }
.mh-mday.sat .n { color: #4b9df0; }
.mh-mday .hol { font-size: 9px; color: #f2556c; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-mday .cl { font-size: 9px; font-weight: 700; color: var(--t3); box-shadow: inset 0 0 0 1px var(--hair2); border-radius: 3px; padding: 0 3px; line-height: 12px; }
.mh-mday .ev { display: block; font-style: normal; font-size: 10px; line-height: 14px; height: 14px; border-radius: 3px; padding: 0 4px;
               background: color-mix(in srgb, var(--c) 20%, var(--s2)); box-shadow: inset 2px 0 0 var(--c); color: var(--t1);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.mh-mday .ev b { font: 700 9.5px var(--num); margin-right: 3px; color: var(--t2); }
.mh-mgrid.slim .mh-mday .ev { font-size: 9.5px; padding: 0 3px; }
.mh-mday .ev.done { color: var(--t3); text-decoration: line-through; }
.mh-mday .more { font: 600 9.5px var(--num); font-style: normal; color: var(--t3); padding-left: 3px; text-align: left; }
.mh-mnote { flex: none; font-size: 11px; color: var(--t3); text-align: center; padding: 4px 0 8px; }

/* =========================================================
   🔔 通知を開いた時の中身（MHS の予定）  2026-09-22
   🗣 ゆうた「通知の MHS の普通のスケジュールを展開仕様に。メンバーと、詳細、完了通知ができるように」
   ⚠ 色は決めない＝借りる側（FlowDesk / FlowGo）の色をそのまま使う。
      ここは「並べ方」だけ。窓（.mh-sheet）ではないので、影も角も付けない。
   ========================================================= */
.mhx { display: flex; flex-direction: column; gap: 10px; }
.mhx-h { display: flex; align-items: flex-start; gap: 8px; }
.mhx-bar { width: 3px; align-self: stretch; min-height: 30px; border-radius: 2px; background: var(--c, var(--t3)); flex: none; }
.mhx-t { flex: 1; min-width: 0; }
.mhx-t b { display: block; font-size: 13px; font-weight: 700; line-height: 1.4; }
.mhx-t small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--t3); }
.mhx-dn { flex: none; font-size: 10.5px; font-weight: 700; color: var(--t3); background: var(--s2); border-radius: 5px; padding: 2px 6px; }
.mhx-ls { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px 10px; }
.mhx-l { min-width: 0; }
.mhx-l em { display: block; font-style: normal; font-size: 10.5px; color: var(--t3); }
.mhx-l b { display: block; font-size: 12px; font-weight: 600; line-height: 1.5; word-break: break-word; }
/* 📎 MHS v1.84.0 予定の資料 */
.mhx-files { margin-top: 8px; }
.mhx-files em { display: block; font-style: normal; font-size: 10.5px; color: var(--t3); margin-bottom: 3px; }
.mhx-files > div { display: flex; flex-wrap: wrap; gap: 6px; }
.mhx-file { display: inline-flex; align-items: center; gap: 5px; max-width: 220px; padding: 4px 9px; border: 1px solid var(--line, rgba(127,127,127,.3)); border-radius: 8px; font-size: 12px; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhx-file:hover { border-color: currentColor; }
.mhx-fk { flex: none; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: rgba(55,138,221,.16); color: #378ADD; }
.mhx-fk.pdf { background: rgba(220,38,38,.14); color: #dc2626; }
/* 📎 資料の中身の窓（MHS の詳細・CoreBoard と同じ形） */
#mhx-fileview { position: fixed; inset: 0; z-index: 100500; background: rgba(6,10,14,.90); display: none; flex-direction: column; padding: 18px 22px 22px; }
#mhx-fileview.open { display: flex; }
#mhx-fileview .fh { display: flex; align-items: center; gap: 10px; color: #e6edf3; font-size: 14px; font-weight: 700; padding-bottom: 12px; min-width: 0; }
#mhx-fileview .fh .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#mhx-fileview .fh .sp { flex: 1; }
#mhx-fileview .fh a, #mhx-fileview .fh button { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2); color: #e6edf3; border-radius: 9px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; text-decoration: none; white-space: nowrap; font-family: inherit; }
#mhx-fileview .fh a:hover, #mhx-fileview .fh button:hover { background: rgba(255,255,255,.2); }
#mhx-fileview .fb { flex: 1; min-height: 0; background: #0f1318; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: auto; display: flex; align-items: center; justify-content: center; }
#mhx-fileview .fb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
#mhx-fileview .fb iframe { width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 760px) { #mhx-fileview { padding: 10px; } #mhx-fileview .fh { flex-wrap: wrap; font-size: 13px; } }
/* 👥 メンバー＝顔と名前。何人でも全部出す（誰と出るかを見る物なので省かない） */
.mhx-who { display: flex; flex-wrap: wrap; gap: 6px; }
.mhx-p { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; background: var(--s2); border-radius: 999px; padding: 3px 9px 3px 3px; }
.mhx-p i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background-size: cover; background-position: center; flex: none; }
.mhx-none { font-size: 11.5px; color: var(--t3); }
/* ✅ 完了の報告＝日ビューの窓とまったく同じ言葉・同じ決まり（部品は1本） */
.mhx-act { border-top: 1px solid var(--hair); padding-top: 10px; }
.mhx-act p { margin: 0; font-size: 12px; line-height: 1.6; }
.mhx-act p.mhx-note { color: var(--t3); }
.mhx-memo { display: block; width: 100%; height: 34px; margin-top: 8px; border: 0; border-radius: 8px; background: var(--s1); color: var(--t1); font: inherit; font-size: 12.5px; padding: 0 10px; box-shadow: inset 0 0 0 1px var(--hair2); outline: none; }
.mhx-memo:focus { box-shadow: inset 0 0 0 1.5px var(--fd); }
.mhx-err { margin-top: 8px !important; color: var(--urgent); font-size: 12px; }
.mhx-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* =========================================================
   🎂 お祝い（誕生日・入社節目）を開いた時  2026-09-24
   🗣 ゆうた「共に開くとでっかくアバター表示とお祝いムードが演出されるような感じで」
   ⚠ 色はここで決めない＝借りる側の色をそのまま使う。華やかさは大きさと並べ方で出す。
   ========================================================= */
.mhc { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 18px 14px 16px; border-radius: 14px; background: var(--s2); }
.mhc.bday { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #e0218a 20%, transparent), transparent 70%), var(--s2); }
.mhc.anniv { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #f0a81e 22%, transparent), transparent 70%), var(--s2); }
.mhc-deco { position: absolute; top: 6px; left: 0; right: 0; font-size: 15px; letter-spacing: 12px; opacity: .35; pointer-events: none; }
.mhc-av { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin-top: 10px;
  font-size: 36px; font-weight: 800; color: #fff; background-size: cover; background-position: center;
  /* ⚠ 輪の色はお祝いの色に合わせる（誕生日＝桃／入社節目＝金）。画面の主色（--fd）を使うと、どちらも同じ緑になる */
  box-shadow: 0 0 0 3px var(--card, var(--s1)), 0 0 0 6px color-mix(in srgb, var(--cel, var(--fd)) 55%, transparent), 0 10px 24px var(--shadow-lg, rgba(0,0,0,.35)); }
.mhc.bday { --cel: #e0218a; }
.mhc.anniv { --cel: #f0a81e; }
.mhc-nm { font-size: 18px; font-weight: 800; line-height: 1.3; }
.mhc-nm span { font-size: 13px; font-weight: 600; color: var(--t2); margin-left: 2px; }
.mhc-lb { font-size: 14px; font-weight: 700; }
.mhc-sub { font-size: 12px; color: var(--t3); }

/* =========================================================
   🛌 2026-09-29 シフト（月ビューの切り替え「シフト」）＝MHS のシフトカレンダー「表」と同じ見た目
   ========================================================= */
.mh-sw.sc-shift i { background: #f3a4b5; }
.shv-scroll { --shv-line: var(--hair2, rgba(127,127,127,.2)); --shv-strong: var(--hair3, rgba(127,127,127,.34));
  margin: 0 6px 6px; overflow: auto; border: 1px solid var(--shv-strong); border-radius: 10px; flex: 1 1 auto; min-height: 0; max-height: 100%; -webkit-overflow-scrolling: touch; background: var(--s1); }
.shv-grid { display: inline-block; min-width: 100%; }
.shv-row { display: flex; border-bottom: 1px solid var(--shv-line); }
.shv-row.former { opacity: .55; }
/* 見出しの行（日付）＝上に貼り付け。左上の「メンバー」は上にも左にも貼り付け */
.shv-head { position: sticky; top: 0; z-index: 3; color: var(--t2); background: var(--s2); border-bottom: 1px solid var(--shv-strong); }
.shv-head .shv-c { background: var(--s2); font-weight: 700; }
.shv-name { width: 92px; min-width: 92px; box-sizing: border-box; padding: 3px 6px; display: flex; align-items: center; gap: 5px; position: sticky; left: 0; z-index: 2;
  background: var(--s1); color: var(--t1); font-size: 11.5px; font-weight: 600; border-right: 1px solid var(--shv-strong); overflow: hidden; }
.shv-head .shv-name { z-index: 4; background: var(--s2); color: var(--t2); }
.shv-name .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shv-name .mh-face { width: 18px; height: 18px; font-size: 9px; flex: none; }
.shv-c { width: 28px; min-width: 28px; box-sizing: border-box; text-align: center; font-size: 10.5px; padding: 3px 0; border-right: 1px solid var(--shv-line); line-height: 1.25; color: var(--t2); }
/* 土日・定休の列（見出しも中身も同じ色の筋） */
.shv-c.sat { background: rgba(96,165,250,.08); } .shv-head .shv-c.sat { color: #60a5fa; background: rgba(96,165,250,.14); }
.shv-c.sun { background: rgba(239,68,68,.07); } .shv-head .shv-c.sun { color: #ef4444; background: rgba(239,68,68,.13); }
.shv-c.closed { background: repeating-linear-gradient(135deg, rgba(127,127,127,.10) 0 4px, transparent 4px 8px); }
.shv-head .shv-c.closed { background: rgba(127,127,127,.22); }
.shv-w { font-size: 9px; font-weight: 600; opacity: .85; }
/* 今日の列＝見出しは塗り、中身は薄い帯 */
.shv-c.today { background: var(--fd-soft, rgba(52,199,122,.14)); }
.shv-head .shv-c.today { background: var(--fd, #34c77a); color: var(--fd-ink, #06140c); }
.shv-head .shv-c.today .shv-w { opacity: 1; }
/* 休み＝赤（どの列の色より上に出す） */
.shv-c.off { background: rgba(242,85,108,.26); color: var(--urgent, #f2556c); font-weight: 800; }
.shv-c.off.today { box-shadow: inset 0 0 0 1.5px var(--fd, #34c77a); }
/* 部・課の見出し＝行いっぱいの帯。文字（.lab）だけ左に貼り付け＝横に送っても消えない */
.shv-grp, .shv-subgrp { border-bottom: 1px solid var(--shv-line); }
.shv-grp { background: var(--s3); }
.shv-subgrp { background: var(--s2); }
.shv-grp .lab, .shv-subgrp .lab { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.shv-grp .lab { padding: 4px 8px; font-size: 11px; font-weight: 800; color: var(--t1); }
.shv-subgrp .lab { padding: 3px 8px 3px 16px; font-size: 10.5px; font-weight: 700; color: var(--t2); }
.shv-grp .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.shv-subgrp .dot2 { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); flex: none; }