/* ページベース
       v6.47.5: max-width: 1300px を撤去（syukan の .page { max-width: none } と同期）。
       業務担当者 FB「コントロールバーが2行に折り返している」を構造的に解消。
       要素合計需要 約 1500px に対し旧 1300px (実領域 1268px) で約 200px 不足 → 折り返し発生していた。
       1920×1080 viewport で viewport いっぱい活用、コントロールバー 1 行収まりを保証。
       シフト表本体は width: 100% で適応、超過時 .shift-table-wrapper の overflow-x: auto で
       横スクロール（v6.44.4 既設）。設計知見 #92 並列定義 + 新メタ教訓「コンテナ vs コンテンツ
       需要の整合性を仕様書範囲に含める」適用。 */
    .ss-wrap { margin: 0 auto; padding: 14px 16px 40px; }

    /* ツールバー
       v6.44.4 修正3: 業務担当者 FB「iframe 風内部スクロールを解消、ヘッダー sticky」への対応。
       現場選択・月切替・確定ボタン等の操作系を画面上部に固定し、シフト表本体は body スクロールで流す。
       margin/padding を上書きして ss-wrap の左右 padding を打ち消し、画面端まで sticky 背景を広げる。
       z-index: 10 で chip/モーダル(z:300+) との重なり順を確保。 */
    .ss-toolbar {
      display: flex; align-items: center; gap: 8px;
      flex-wrap: wrap;
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--color-bg, #fff);
      margin: -14px -16px 14px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--color-border, rgba(60,64,67,.10));
    }
    /* v6.47.3: 業務担当者 FB「現場プルダウン幅が選択現場名でコロコロ変わる」「高さが低い」を解消。
       DESIGN.md §2-9 認知単位3項目（44px統一/固定幅/syukan整合）に完全準拠。
       - flex:1 + max/min-width 200px 幅範囲 → flex:none + width:320px で完全固定
       - height: 36px → 44px（syukan の .pill-wrap と同値）
       - 長文現場名は内部 select の ellipsis で省略表示（コンテナにも overflow:hidden を追加で保険） */
    .ss-site-pill {
      display: flex; align-items: center; gap: 6px;
      background: var(--color-surface); border: 1px solid var(--color-border);
      box-shadow: var(--shadow-1); border-radius: 9999px;
      padding: 0 14px; height: 44px; flex: none; width: 320px;
      overflow: hidden;
    }
    /* v6.47.3: font-size 13px → 14px に syukan の .pill-wrap select 値と同期
       （DESIGN.md §2-9 認知単位3 「syukan 整合」）。 */
    .ss-site-pill select {
      border: none; background: transparent; color: var(--color-text);
      font-size: 14px; font-weight: 500; cursor: pointer; outline: none;
      padding: 0; flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-family: inherit;
    }

    /* ステータスバッジ（v6.9.1 で強調 + ドット追加 + 配色再設計） */
    /*   ・サイズ拡大（28px → 36px、フォント 12px → 13px）
         ・::before のドット表示で視認性向上（DESIGN.md §2-7 ステータスドット流儀）
         ・none と draft の配色を分離（業務感覚と整合：未作成=グレー / 作成中=アンバー）
         ・imported クラスは v5.8.0 で confirmed に統合済みのため削除 */
    /* v6.47.3: 高さ 36px → 44px（DESIGN.md §2-9 認知単位1、syukan 整合）。
       ボタン群と高さを揃え業務担当者の認知単位「全要素同じ高さ」を達成。
       v6.47.4: box-shadow: var(--shadow-1) を追加（DESIGN.md §2-9 認知単位4「視覚プロパティ syukan 整合」）。
       業務担当者未指摘だが、.ss-site-pill / .pill-wrap と同じ shadow-1 で整合性確保。 */
    .ss-status {
      height: 44px; padding: 0 16px; border-radius: 9999px;
      font-size: 13px; font-weight: 700;
      display: inline-flex; align-items: center; gap: 6px;
      box-shadow: var(--shadow-1);
    }
    .ss-status::before {
      content: ''; width: 8px; height: 8px; border-radius: 50%;
      background: currentColor; flex-shrink: 0;
    }
    .ss-status.none      { background: rgba(95,99,104,.10);  color: #5f6368; }
    .ss-status.draft     { background: rgba(242,153,0,.14);  color: #b06000; }
    .ss-status.submitted { background: rgba(26,115,232,.14); color: #1a73e8; }
    .ss-status.confirmed { background: rgba(24,128,56,.14);  color: #188038; }

    /* v6.9.1: 提出時刻 / 確定時刻の補助表示（バッジ右） */
    #statusMeta {
      font-size: 12px;
      color: var(--color-text-muted);
      margin-left: 4px;
      white-space: nowrap;
    }

    /* v6.9.1: 自動保存インジケータ */
    /*   セル変更時に「保存中...」→「✓ 保存しました」表示、2 秒後にフェードアウト */
    #saveIndicator {
      font-size: 12px;
      color: var(--color-text-muted);
      margin-left: 8px;
      transition: opacity 0.3s;
      min-width: 0;
      white-space: nowrap;
    }
    #saveIndicator.saving { color: var(--color-text-muted); }
    #saveIndicator.saved  { color: #188038; }
    #saveIndicator.fade-out { opacity: 0; }

    /* v6.9.1: 警告系ボタン（提出取消・確定解除の薄い赤色） */
    .ss-btn-warning {
      background: rgba(220,53,69,.12) !important;
      color: #b00020 !important;
      border-color: rgba(220,53,69,.20) !important;
    }
    .ss-btn-warning:hover {
      background: rgba(220,53,69,.20) !important;
    }

    /* v6.45.4: 確定 / 確定取消ボタンの幅を統一（業務担当者 FB、状態切替時のボタン位置・幅変化を解消）。
       両ボタンは is-hidden で排他表示されるため、視覚的には常にヘッダー右端に同幅のボタンが見える。
       ID セレクタ (1,0,0) は .gs-btn-primary / .ss-btn-warning (0,1,0) より強い → 確実に効く。
       v6.47.8.3: min-width 80px → 100px に拡大、確認依頼ボタン (btnOkRequest) も同幅に統一
       （業務担当者 FB「確定ボタンと確定取消ボタンでサイズが違う」解消）。
       真因: v6.45.4 で 80px 設定したが「確定取消」(4 文字) の自然幅 ~96px が min-width を超えて実 96px、
       「確定」(2 文字) は 80px で 16px 差。さらに btnSubmit=.gs-btn-primary (padding 0 20px) と
       btnUnsubmit=.gs-btn-pill (padding 0 18px) で基底クラスが異なり 4px 差も加わる。
       100px に拡大することで 3 ボタンとも完全固定（基底差 + ラベル長差を吸収）= 状態変化でレイアウト不変。
       DESIGN.md §2-9 認知単位 5「コロコロ動かない」+ v6.47.8.3 認知単位 7「状態遷移時の存在感が一貫」を達成。 */
    #btnSubmit,
    #btnUnsubmit,
    #btnOkRequest {
      min-width: 100px;
    }

    /* v6.47.0: ヘッダーボタンの固定幅統一（業務担当者 FB「ボタンの大きさを揃えて」）。
       対象: メンバー管理 / 作成・作成取消・作成中 / 前月 / 翌月。確認依頼 / 確定 / 確定取消 は #btnSubmit, #btnUnsubmit と
       同様にアクション系として独立サイズ（v6.45.4 維持）。Phase 1 で「メンバー管理」最長 6 文字 + padding を考慮し 110px 採用。
       date-range-pill (対象月ピル「2026年X月」) は内容に応じて自然幅、ss-header-btn のみ固定。
       v6.47.1: 業務担当者 FB「syukan のヘッダーボタンと見た目が違う」を解消。
         旧 `height: 36px !important` / `padding: 0 !important` を撤去し、共通 .gs-btn-pill 基底値
         （height: 44px / padding: 0 18px）に従う（syukan の .btn-pill.btn-lg と同じ 44px に統一）。
         gap: 6px + font-weight: 500 を追加して syukan と精密同期（設計知見 #92 並列定義の歪み修正）。
         width: 110px は v6.47.0「同幅」要望のため維持（width のみ !important 残置）。 */
    .ss-header-btn {
      width: 110px !important;
      gap: 6px;
      font-weight: 500;
      box-sizing: border-box;
    }
    .ss-header-btn:disabled {
      cursor: not-allowed;
    }
    /* v6.47.2: 「前月」「翌月」ボタンは2文字+SVGなので80pxが自然幅とした。
       設計知見 #114 拡張：業務担当者の認知単位 = 文字数に応じた自然幅。
       v6.47.5: 80px → 90px に拡大。v6.47.2 事前調査で padding を推測値 28px で計算したが
       実態は .gs-btn-pill 共通基底の 36px (0 18px ×2)、自然幅は 84px。80px は 4px 不足で
       flex container 内 SVG が flex-shrink で 12px → 10.8px に圧縮されていた
       （業務担当者 FB「矢印が小さく細い」の真因）。90px で内部領域 52px、需要 46px、
       余裕 6px を確保。設計知見「動的挙動（flex/grid）まで仕様書のカバー範囲に含める」適用。 */
    #btnPrevMonth,
    #btnNextMonth {
      width: 90px !important;
    }
    /* v6.47.5: 月送りボタン内 SVG の flex-shrink 圧縮を構造的に防止。
       flex container 内のデフォルト flex-shrink: 1 で SVG が縮められていた問題を解消。
       90px 化との二重防御で SVG 12px を確実保証。
       設計知見「flex container 内 SVG はデフォルトで flex-shrink: 0」適用。 */
    #btnPrevMonth svg,
    #btnNextMonth svg {
      flex-shrink: 0;
    }

    /* v6.47.0: btnInitialize の状態別色分け（renderHeaderActionButton で .is-create / .is-cancel / .is-in-progress 切替）。
       「作成」= 青（primary 系、操作可）/「作成取消」= 赤（danger 系、操作可）/「作成中」= オレンジ（状態表示、cursor:default）。
       ID セレクタ specificity (1,0,0) で .gs-btn-pill (0,1,0) より強い → 確実に色適用。 */
    #btnInitialize.is-create {
      background: #1a73e8 !important;
      color: #fff !important;
      border-color: #1a73e8 !important;
    }
    #btnInitialize.is-create:hover { background: #1557b0 !important; border-color: #1557b0 !important; }
    #btnInitialize.is-cancel {
      background: rgba(220,53,69,.12) !important;
      color: #b00020 !important;
      border-color: rgba(220,53,69,.20) !important;
    }
    #btnInitialize.is-cancel:hover { background: rgba(220,53,69,.20) !important; }
    #btnInitialize.is-in-progress {
      background: rgba(242,153,0,.14) !important;
      color: #b06000 !important;
      border-color: rgba(242,153,0,.20) !important;
      cursor: default !important;
    }
    #btnInitialize.is-in-progress:hover { background: rgba(242,153,0,.14) !important; }

    /* v6.47.8.3: btnInitialize の「確定済み」状態（submitted/confirmed）。
       業務担当者 FB「確定後にボタンが消えて緑ピルが右側に出現する」認知単位崩壊の解消（案 C）。
       業務担当者の認知単位「左端 = シフト表の状態」を維持するため、btnInitialize を非表示にせず
       青デザイン（is-create と同じ #1a73e8）+ disabled で「完了済み・操作不要」を視覚化。
       cursor: default で「クリック不要」を業務担当者に伝達（is-in-progress と同じ流儀）。
       DESIGN.md §2-9 認知単位 7「状態遷移時の存在感が一貫する」の正統な実装。
       ID セレクタ specificity (1,0,0) で .gs-btn-pill (0,1,0) より強い → 確実に色適用。 */
    #btnInitialize.is-confirmed {
      background: #1a73e8 !important;
      color: #fff !important;
      border-color: #1a73e8 !important;
      cursor: default !important;
    }
    #btnInitialize.is-confirmed:hover { background: #1a73e8 !important; border-color: #1a73e8 !important; }

    /* v6.9.1: 確定するボタンの無効状態（draft 時のグレー表示） */
    #btnConfirm:disabled {
      background: #dadce0 !important;
      color: #80868b !important;
      cursor: not-allowed !important;
      opacity: 1 !important;
    }

    .info-box {
      padding: 24px; background: var(--color-surface-2); border-radius: 16px;
      text-align: center; color: var(--color-text-muted); font-size: 14px;
      border: 1px solid var(--color-border);
    }

    /* シフト表
       v6.44.4 修正3: 業務担当者 FB「iframe 風内部スクロール解消」への対応。
       旧 v6.44.0 設計: overflow:auto + max-height:calc(100vh - 220px) で内部スクロール領域化していたが、
       週間予定表 (syukan) は body スクロールベースで設計されており、UI 認知統一の観点から site-shifts も
       body スクロールに統一する。横スクロールは超過時のみ wrapper 内に閉じる (overflow-x: auto)。
       max-height 撤去によりヘッダー sticky は .ss-toolbar 側で実現（thead th の sticky は撤去）。 */
    .shift-table-wrapper {
      overflow-x: auto;
    }
    table.shift-table {
      border-collapse: separate; border-spacing: 0; width: 100%;
    }
    /* v6.45.2: padding: 0 を削除（specificity 衝突解消）。
       旧 `padding: 0` (specificity 0,1,2) が `.assign-cell { padding: 10px }` (specificity 0,1,0) を上書きしていた真因。
       td/th 系の padding はそれぞれ個別ルールで指定済み（thead th=8px 10px / date-cell=7px 14px / total-cell=5px 10px / shift-cell=5px 2px / assign-cell=10px）。 */
    table.shift-table th, table.shift-table td {
      border-right: 0.5px solid var(--color-divider);
      border-bottom: 0.5px solid var(--color-divider);
      text-align: center;
      font-size: 12px;
    }
    /* 日付ヘッダ
       v6.44.4 修正3: thead th の sticky 撤去（旧 wrapper の overflow:auto に依存していた、ページスクロールでは
       .ss-toolbar との重なり懸念のため）。日付・スロット名は body スクロールで流れる（業務担当者の指示通り）。 */
    table.shift-table thead th {
      background: var(--color-surface-2); color: var(--color-text);
      font-weight: 600; padding: 8px 10px;
      min-width: 80px;
      border-bottom: 1px solid var(--color-border);
      font-size: 11px;
    }
    /* v6.44.4 修正3: thead 側の sticky は撤去。横スクロール時の左端固定は td.date-cell 側で実現（position:sticky left:0）。
       date-col の z-index 4 / left:0 は thead 全体の sticky 撤去に合わせて削除。 */
    table.shift-table thead th.date-col {
      min-width: 110px;
      border-right: 1px solid var(--color-border);
      color: var(--color-text-muted);
      text-align: left; padding: 10px 14px;
    }
    table.shift-table thead th.total-col {
      min-width: 70px;
      border-left: 1px solid var(--color-border);
      color: var(--color-text-muted);
    }
    /* ヘッダ内の社員名・番号 */
    table.shift-table thead th .emp-name { font-weight: 500; display: block; color: var(--color-text); }
    table.shift-table thead th .emp-no   { font-size: 10px; color: var(--color-text-faint); margin-top: 1px; display: block; }

    /* 日付セル（左固定） */
    table.shift-table td.date-cell {
      position: sticky; left: 0; z-index: 2;
      background: var(--color-surface-2);
      color: var(--color-text); font-weight: 500;
      padding: 7px 14px; text-align: left; white-space: nowrap;
      border-right: 1px solid var(--color-border);
      font-size: 12px;
    }
    /* 人数セル（右固定） */
    table.shift-table td.total-cell {
      position: sticky; right: 0; z-index: 2;
      background: var(--color-surface-2);
      color: var(--color-text-faint); font-weight: 500;
      padding: 5px 10px;
      border-left: 1px solid var(--color-border);
      font-size: 12px;
    }
    /* データセル */
    table.shift-table td.shift-cell {
      min-width: 80px; height: 34px; cursor: pointer;
      user-select: none; transition: background 150ms;
      vertical-align: middle; padding: 5px 2px;
    }
    table.shift-table td.shift-cell:hover { background: var(--color-surface-3); }
    table.shift-table td.shift-cell.on {
      background: rgba(26,115,232,.10);
    }
    .dot {
      display: inline-block; width: 16px; height: 16px; border-radius: 50%;
      background: #1a73e8; vertical-align: middle;
    }

    /* 土日・今日 */
    tr.sat td.date-cell { color: #1a73e8; }
    tr.sun td.date-cell { background: rgba(197,34,31,.04); color: #c5221f; }
    tr.sat td.shift-cell { background: rgba(26,115,232,.03); }
    tr.sun td.shift-cell { background: rgba(197,34,31,.03); }
    tr.sat td.shift-cell.on { background: rgba(26,115,232,.16); }
    tr.sun td.shift-cell.on { background: rgba(197,34,31,.10); }
    tr.sun td.total-cell { background: rgba(197,34,31,.04); color: #c5221f; }
    /* v6.45.3 → v6.45.4: 現場シフト表で土日の行全体（assign-cell 含む）にカレンダー的な色分けを付与。
       v6.45.4 でトーンダウン（業務担当者 FB「もう少し薄く」、土曜 #e3f2fd → #f0f7fc / 日曜 #fce4ec → #fdeff3）。
       既存の tr.sat/sun td.date-cell / td.shift-cell ルールは社員シフト表（別画面）で使われる td 種別への個別指定。
       本ルールは specificity (0,2,1) で同 specificity、ソース順序で後勝ち。
       chip 自体（.site-shift-user / .ss-chip-empty）は子要素で独自 background を持つため影響なし。 */
    tr.sat td { background: #f0f7fc; }   /* 土曜: さらに薄い青 */
    tr.sun td { background: #fdeff3; }   /* 日曜: さらに薄いピンク */

    tr.today td.date-cell { background: rgba(26,115,232,.10); color: #1a73e8; font-weight: 600; }
    tr.today td.shift-cell { background: rgba(26,115,232,.06); }
    tr.today td.shift-cell.on { background: rgba(26,115,232,.22); }
    tr.today td.total-cell { background: rgba(26,115,232,.10); color: #1a73e8; }

    /* 集計行（薄グレー） */
    tr.summary-row td {
      background: #f1f3f4 !important;
      color: var(--color-text) !important;
      font-weight: 600; font-size: 12px;
      padding: 9px 12px; text-align: center;
      position: sticky; bottom: 0; z-index: 2;
      border-top: 1px solid var(--color-border);
    }
    tr.summary-row td.date-cell {
      left: 0; z-index: 3; text-align: left; padding-left: 14px;
      border-right: 1px solid var(--color-border);
    }
    tr.summary-row td.total-cell {
      right: 0; z-index: 3;
      border-left: 1px solid var(--color-border); border-right: none;
    }

    /* 確認モーダル */
    .confirm-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.55);
      display: none; align-items: center; justify-content: center;
      z-index: 300; padding: 20px;
    }
    .confirm-overlay.active { display: flex; }
    .confirm-box {
      background: #fff; border-radius: 12px; padding: 28px 24px;
      max-width: 420px; width: 100%; box-shadow: var(--shadow-lg);
    }
    .confirm-title { font-size: 16px; font-weight: 700; color: var(--navy-dark); margin-bottom: 10px; }
    .confirm-msg { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin-bottom: 20px; white-space: pre-wrap; }
    .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

    /* トースト */
    /* v6.47.8.2 hotfix: pointer-events: none 追加（業務担当者試験運用 FB「トースト消失後にボタンが反応しない」を解消）。
       opacity: 0 で視覚的に消えても position: fixed; z-index: 500 で右上に DOM 残存し、ヘッダー右上の
       確定/確定取消/確認依頼ボタンのクリック判定を吸っていた。syukan.css/settings.css/dashboard.css の
       同パターンには pointer-events: none あり（v6.44.0 並列定義時のコピー漏れ、設計知見 #93）。
       .toast.show 側に pointer-events: auto は追加しない（業務担当者は通常トーストをクリックしない、syukan 流儀と一致）。 */
    .toast {
      position: fixed; top: 80px; right: 20px; z-index: 500;
      padding: 12px 18px; border-radius: var(--radius-sm);
      color: #fff; font-size: 14px; font-weight: 500;
      box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-10px);
      transition: opacity 0.25s, transform 0.25s;
      pointer-events: none;
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast.success { background: var(--success); }
    .toast.error   { background: var(--danger); }
    .toast.warning { background: #e67e22; }

    @media (max-width: 600px) {
      .toolbar { flex-direction: column; align-items: stretch; }
      .toolbar select { min-width: 0; width: 100%; }
      .toolbar .group { justify-content: space-between; }
      .container { padding-bottom: 80px; }
      .action-bar { padding: 10px 12px; }
      .action-bar .btn { flex: 1; }
      table.shift-table td.shift-cell { min-width: 44px; height: 42px; }
      /* v6.44.4 修正3: .shift-table-wrapper の max-height 撤去（body スクロール統一）。 */
    }

/* ============================================================
   v6.43.1: per-user 時間表示 + 時計アイコン + マスタ差分の薄黄色強調
   セル(.rc-names) 内に各スタッフを .site-shift-user で縦並び表示。
   v6.43.2 で chip 化する際の足場（ラッパー構造を維持）。
   ============================================================ */
/* ============================================================
   v6.44.0: 業務担当者の認知を週間予定表（syukan）と揃える UI 改修
   - チップは縦積み（1 行目: 名前 + 時計 + ×、2 行目: 時間）
   - チップ幅 100px 固定、3 個まで横並び・4 個以上は折り返し
   - 「+ 配置」chip = syukan.css .chip-empty (v6.42.17/19) を並列定義
   - 旧 .site-shift-slot__count-pill（充足ピル）は撤去
   ============================================================ */
/* v6.45.0: chip エリアを grid ベースに刷新（旧 flex + flex-wrap で生じていた chip 縦伸び / 横並び不能の根本解決）。
   grid item は明示 width/height が確実に効くため、stretch 仕様の罠を受けない。
   列数は親 td の data-col-type 属性で切り替え（narrow=1列 / wide=2列）。 */
.rc-names {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.assign-cell[data-col-type="narrow"] .rc-names {
  grid-template-columns: 100px;
}
.assign-cell[data-col-type="wide"] .rc-names {
  grid-template-columns: repeat(2, 100px);
}
/* v6.45.0: 両 chip（配置済み .site-shift-user / + 配置 .ss-chip-empty）に共通の .chip クラス。
   サイズ・形状（100×42px box / border-radius / 内部 flex column / centers / padding / font-size / line-height）を一元管理。
   grid item として配置されるため、明示 width/height が確実に効き、flex 仕様の stretch 罠を受けない（設計知見 §1.2/§8.1）。
   v6.44.5 → v6.44.7 で chip 縦伸び / 横並び不能を 3 回追跡して論理確定できなかった原因（共通スタイルの非対称指定 + flex-wrap の stretch 仕様）を構造的に解決。 */
.chip {
  width: 100px;
  height: 42px;
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.2;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
/* v6.43.2 → v6.45.0: .site-shift-user の見た目スタイル（背景・枠線・cursor）のみ残置。
   サイズ・形状（width 100px / height 42px / padding / border-radius / display flex column 等）は .chip 共通クラスに移管（設計知見「共通スタイルは共通クラスに集約」）。
   v6.44.7 で追加した height: 42px / line-height: 1.2 は .chip に移管済（v6.45.0 で grid item となり stretch 仕様の影響を受けないため安全装置としても機能）。 */
/* v6.73.1: base を不透明な白（syukan .chip base = var(--color-surface) と同値）に変更。
   旧 rgba(60,64,67,.05) は半透明の灰で、(1) 未確認チップが白く見えない (2) 週末セル色（tr.sat #f0f7fc / tr.sun #fdeff3）が
   透けて灰がかる、という「週間予定表と見え方が違う」原因だった（業務担当者 FB）。syukan は白地の job カード上に
   チップが乗るため、現場シフト表でもチップ下地を白で確定させて見え方を揃える。 */
.site-shift-user {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-divider, rgba(60,64,67,.12));
  color: var(--color-text, #202124);
  cursor: pointer;
  user-select: none;
  transition: background var(--tr, 180ms);
}
/* chip 4色: syukan.css L830-843 .chip[data-ok=...] の並列定義（設計知見 #92・rgba 値を完全一致）。
   v6.73.1: 不透明な白(background-color)の上に syukan と同値の半透明色(background-image linear-gradient)を重ねて
   「色 on 白」に合成する。これにより data-ok の rgba 値は syukan と完全一致のまま、週末セル色（tr.sun #fdeff3 等）が
   透けて混色するのを防ぎ、syukan の白地での見え方と一致する（5/31 = 日曜でも緑が薄く濁らない）。
   半透明値を直接 background に置くと週末セル色と混ざるため、白下地への合成が必須。 */
.site-shift-user[data-ok="pending"] {
  background-color: var(--color-surface, #fff);
  background-image: linear-gradient(rgba(242, 153, 0, 0.12), rgba(242, 153, 0, 0.12));
  border-color: var(--color-divider, rgba(60,64,67,.12));
}
.site-shift-user[data-ok="ok"] {
  background-color: var(--color-surface, #fff);
  background-image: linear-gradient(rgba(24, 128, 56, 0.12), rgba(24, 128, 56, 0.12));
  border-color: rgba(24, 128, 56, 0.30);
}
.site-shift-user[data-ok="ng"] {
  background-color: var(--color-surface, #fff);
  background-image: linear-gradient(rgba(197, 34, 31, 0.12), rgba(197, 34, 31, 0.12));
  border-color: rgba(197, 34, 31, 0.30);
}
/* 時間マスタ差分: 左ボーダー（4色 background と独立、設計知見 #93）。 */
.site-shift-user--time-modified {
  border-left: 3px solid #fbbf24;
}
/* v6.44.0 → v6.45.0 縦積み chip の 1 行目（名前 + ✓/×）/ 2 行目（時間 + 🕐）
   v6.45.0: 🕐 を row1 → row2 に移動した。row2 は flex 化しない（v6.44.6 修正 2 で flex 化 → 内部 content 38→43px に増えた副作用を回避）。
   row1 の justify-content は space-between → center に変更（名前と ✓ が中央寄りに配置、設計仕様書 §4.8）。 */
.ss-chip-row1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  font-weight: 500;
  font-size: 11px;
}
.ss-chip-row2 {
  font-size: 10px;
  color: var(--color-text-muted, #5f6368);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.site-shift-user__name {
  font-size: 11px;
  font-weight: 500;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
/* 旧 .site-shift-user__time は使わない（.ss-chip-row2 に集約）。互換のため残す。 */
.site-shift-user__time { font-size: 10px; color: #5f6368; font-variant-numeric: tabular-nums; }
/* v6.43.2 → v6.44.0: 個別確定/解除ボタン（14×14 に縮小、chip の 1 行目右側に配置） */
.site-shift-user__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(60,64,67,.4);
  color: #5f6368;
  opacity: 0.7;
  flex-shrink: 0;
}
.site-shift-user__action:hover { opacity: 1; }
.site-shift-user__action--confirm:hover { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.site-shift-user__action--unconfirm:hover { background: #f29900; border-color: #f29900; color: #fff; }
/* v6.44.0 → v6.45.0 Lucide 風時計 SVG ボタン（14×14、SVG 10×10 stroke-currentColor）。
   v6.45.0: inline-flex → inline-block + vertical-align: middle に変更（時間テキストと並ぶため）。
   .ss-chip-row2 内で time-text の右に inline 配置される。 */
.site-shift-user__clock {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted, #5f6368);
  opacity: 0.75;
  margin-left: 4px;
  line-height: 0;       /* SVG の baseline ずれ防止（inline-block 内の SVG 安全策） */
}
.site-shift-user__clock svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.site-shift-user__clock:hover { background: rgba(26,115,232,.08); color: #1a73e8; opacity: 1; }
/* v6.45.0: 🕐 と並ぶ時間テキスト wrap（inline 配置、time-text 単体への装飾 hook も将来追加可能） */
.site-shift-user__time-text {
  display: inline;
  vertical-align: middle;
}

/* v6.44.0 → v6.45.0 「+ 配置」チップ = syukan.css L873-921 .chip-empty (v6.42.17/19) の値ベースに並列定義（設計知見 #92）。
   サイズ・形状（width 100 / height 42 / padding / border-radius / display flex column 等）は .chip 共通クラスで管理。
   ここでは見た目（破線ボーダー / 背景 / 文字色）のみ残置。 */
.ss-chip-empty {
  background: #fce4ec;
  /* v6.45.0: 2px dashed → v6.45.3: 1.5px dashed（業務担当者 FB、より繊細に） */
  border: 1.5px dashed #ec407a;
  color: #880e4f;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  transition: background var(--tr, 180ms), border-color var(--tr, 180ms), border-style var(--tr, 180ms);
}
.ss-chip-empty:hover {
  background: #f8bbd0;
  border-color: #ec407a;
  border-style: solid;
}
[data-theme="dark"] .ss-chip-empty {
  background: rgba(252, 228, 236, 0.15);
  border-color: #f48fb1;
  color: #f8bbd0;
}
/* v6.78.5 ①: 確定済み・未解除日（cellLocked）の「+配置」chip は表示するが無効化（グレーアウト・押せない）。
   人数ピル v6.77.3 の「disabled だが表示」と同思想。pointer-events:none でクリック無効（hover も無効化）。
   emptyChip クリックハンドラの isLockedDate ガードと併せた多層防御。site-shifts 専用（#92）。 */
.ss-chip-empty--locked,
.ss-chip-empty--locked:hover {
  background: rgba(60, 64, 67, 0.05);
  border: 1.5px dashed rgba(60, 64, 67, 0.25);
  color: #9aa0a6;
  cursor: default;
  pointer-events: none;
  opacity: 0.6;
}
[data-theme="dark"] .ss-chip-empty--locked,
[data-theme="dark"] .ss-chip-empty--locked:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: #80868b;
}

/* v6.44.0 人数入力ピル（旧 rc-input は CSS のみで pill ラッパー化、HTML 構造は ss-num-pill > input）。
   末尾「名」の表示は ::after で付与。focus 時は青枠 + 薄青光輪。 */
.ss-num-pill {
  display: inline-flex;
  align-items: center;
  /* v6.44.6 修正1: width を 64px に固定（旧 v6.44.5 までは指定なしで auto-sizing → content により 60-70px 揺らぐ）。
     calcSlotWidth の前提（pill 60px 想定）と実機の乖離が「2 個横並びが縦積みになる」真因だった。
     内訳: border 2 + padding 14 + input 24 + ::after (margin 10 + "名" 11-14px) = 61-64px
     固定 64px で calcSlotWidth の内訳と一致（16 cell padding + 64 pill + 8 gap + chip 100 × N + chip gap）。 */
  width: 64px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  border-radius: 9999px;
  padding: 2px 4px 2px 10px;
  height: 26px;
  box-sizing: border-box;
  transition: border-color 180ms, box-shadow 180ms;
}
.ss-num-pill input {
  width: 24px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  color: var(--color-text, #202124);
  padding: 0;
}
.ss-num-pill::after {
  content: "名";
  font-size: 11px;
  color: var(--color-text-muted, #5f6368);
  margin: 0 8px 0 2px;
}
.ss-num-pill:focus-within {
  border-color: var(--color-primary, #1a73e8);
  box-shadow: 0 0 0 2px rgba(26,115,232,.18);
}

/* v6.44.0 期間ピル + 不足数赤丸バッジ = syukan.css L91-126 + L2047- の並列定義（設計知見 #92）。
   site-shifts.css スコープのみで適用される（site-shifts.html のみ this CSS をリンクするため衝突なし）。
   v6.47.3: 高さ 36px → 44px に syukan 完全同期（DESIGN.md §2-9 認知単位1+3）。
   .date-range-text の min-width: 95px / text-align: center は syukan に存在しないため撤去
   （業務担当者の認知単位「コロコロ動かない」は親 .pill-wrap.date-range-pill の自然幅で十分達成）。
   v6.47.4: box-shadow: var(--shadow-1) を補完（DESIGN.md §2-9 認知単位4「視覚プロパティ syukan 整合」）。
   v6.44.0 並列定義時に syukan.css L91-101 の 9 プロパティ中 box-shadow 1 つだけコピー漏れしていた
   （8/9=89% コピー精度の罠、新メタ教訓「並列定義時は宣言ブロックを一括コピー」）。
   業務担当者 FB「月ピルに影がない」を解消、syukan と視覚プロパティ完全整合へ。 */
.pill-wrap {
  height: 44px;
  border-radius: 9999px;
  padding: 0 16px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-1);
}
.pill-wrap.date-range-pill {
  height: 44px;
  padding: 0 18px;
  position: relative;
}
.date-range-text {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.date-range-pill .unfilled-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px 2px;
  background: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* v6.44.0 警告モーダル「配置人数の方が多くなります」 */
.ss-overcrowd-modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: 440px;
  background: #fff;
}
.ss-overcrowd-modal::backdrop { background: rgba(0, 0, 0, 0.45); }
.ss-overcrowd-content { padding: 22px 24px 18px; }
.ss-overcrowd-content h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-overcrowd-content h3 svg { stroke: #f29900; flex-shrink: 0; }
.ss-overcrowd-msg {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: var(--color-text, #202124);
  line-height: 1.7;
}
.ss-overcrowd-actions {
  display: flex;
  justify-content: flex-end;
}
.ss-overcrowd-actions button {
  padding: 8px 22px;
  border-radius: 9999px;
  cursor: pointer;
  border: none;
  background: #1a73e8;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}
.ss-overcrowd-actions button:hover { background: #1557b0; }

/* v6.44.2: 提出時の重複警告モーダル（同日他現場配置の一覧、警告のみで提出ブロックしない）。
   .ss-overcrowd-modal の構造を完全並列定義（設計知見 #92）+ リスト + フッター 2 ボタン。
   モーダル中央配置は site-shifts.css 末尾の `dialog { position:fixed; ... }` で自動適用される。 */
.ss-duplicate-modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: 520px;
  max-width: 90vw;
  background: #fff;
}
.ss-duplicate-modal::backdrop { background: rgba(0, 0, 0, 0.45); }
.ss-duplicate-content { padding: 22px 24px 18px; }
.ss-duplicate-content h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-duplicate-content h3 svg { stroke: #f29900; flex-shrink: 0; }
.ss-duplicate-lead {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--color-text, #202124);
  line-height: 1.6;
}
.ss-duplicate-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-divider, rgba(60,64,67,.14));
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: #fafbfc;
}
.ss-duplicate-list .ss-dup-row {
  padding: 8px 0;
  border-bottom: 1px solid rgba(60,64,67,.08);
  font-size: 12px;
  line-height: 1.5;
}
.ss-duplicate-list .ss-dup-row:last-child { border-bottom: none; }
.ss-duplicate-list .ss-dup-head {
  font-weight: 600;
  color: var(--color-text, #202124);
  margin-bottom: 4px;
}
.ss-duplicate-list .ss-dup-line {
  display: flex;
  gap: 6px;
  color: var(--color-text-muted, #5f6368);
}
.ss-duplicate-list .ss-dup-line__label {
  flex-shrink: 0;
  width: 40px;
  color: #5f6368;
}
.ss-duplicate-list .ss-dup-line__body {
  flex: 1;
  color: var(--color-text, #202124);
}
.ss-duplicate-summary {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #202124);
}
.ss-duplicate-note {
  margin: 0 0 16px 0;
  font-size: 11px;
  color: var(--color-text-muted, #5f6368);
}
.ss-duplicate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ss-duplicate-actions button {
  padding: 8px 22px;
  border-radius: 9999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(60,64,67,.20);
  background: #fff;
  color: var(--color-text, #202124);
}
.ss-duplicate-actions button.gs-btn-primary {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}
.ss-duplicate-actions button.gs-btn-primary:hover { background: #1557b0; border-color: #1557b0; }
.ss-duplicate-actions button:not(.gs-btn-primary):hover { background: var(--color-surface-2, rgba(60,64,67,.05)); }

/* v6.44.0 → v6.44.1 → v6.44.2 → v6.45.0: シフト表のスロット列幅を切替。
   v6.44.x までは JS が `style.width` を inline 設定（232 / 294px）。
   v6.45.0 で `data-col-type` 属性ベースに刷新（narrow=232px / wide=294px、CSS で管理）→ JS インライン style 撤去、メンテナンス性向上。
   wide=294px の根拠: chip 100×2 + chip gap 6 + ピル 64 + cell↔ピル gap 8 + 左右 padding 16 = 294px。
   日付列は従来通り 120px 固定。 */
table.shift-table { width: auto; }
/* v6.45.2: 旧 `table.shift-table th.col-slot, td.assign-cell { min-width: 232px }` を削除（specificity 衝突解消）。
   v6.45.0/v6.45.1 で `data-col-type` 属性方式に移行済み（narrow=192px / wide=298px）のため min-width 指定は不要。
   旧ルール (specificity 0,2,2) が新ルール `.assign-cell[data-col-type="narrow"]` (specificity 0,2,0) を上書きしていた真因。 */
table.shift-table th.date-col,
table.shift-table td.date-cell { width: 120px; min-width: 120px; }

/* v6.45.0: assign-cell の列幅切替（data-col-type ベース）+ 共通の cell padding（旧 JS インライン指定の CSS 移管）。 */
.assign-cell {
  /* v6.45.0 padding: 10px 8px → v6.45.1: 10px に統一（業務担当者 FB、上下左右どこでも余白 10px）。 */
  padding: 10px;
  font-size: 12px;
  line-height: 1.4;
}
/* v6.45.0 → v6.45.1: 列幅を業務担当者 FB に基づき再調整。
   narrow: 232 → 192px（chip 1 個 + 人数ピル + 左右 padding 10px で過不足ない最小幅、管制G など全枠 1 名の列がスッキリ）
     内訳: padding 10 + ピル 64 + gap 8 + chip 100 + padding 10 = 192px
   wide: 294 → 298px（chip 2 個並び + 人数ピル + 左右 padding 10px で過不足ない幅）
     内訳: padding 10 + ピル 64 + gap 8 + chip 100 + grid gap 6 + chip 100 + padding 10 = 298px */
.assign-cell[data-col-type="narrow"] { width: 192px; }
.assign-cell[data-col-type="wide"]   { width: 298px; }
/* th 側も列幅同期（td と幅一致させないとヘッダーとデータ列がズレる）。 */
th.col-slot[data-col-type="narrow"] { width: 192px; }
th.col-slot[data-col-type="wide"]   { width: 298px; }

/* v6.44.2 → v6.45.0 → v6.45.3: スロットセル内を横並び（人数ピル左固定 + chip エリア grid）。
   v6.45.0 で chip エリア (.rc-names) を grid 化したため、ここでは flex container として人数ピルとの並びだけ管理。
   v6.45.3: align-items center → flex-start に変更（複数行 chip でも人数ピルが 1 列目 chip と上端揃え、業務担当者 FB）。
   旧 `.ss-cell-flex .rc-names` の flex/flex-wrap/align-items ルールは削除（.rc-names 本体の grid 定義に集約）。 */
.ss-cell-flex {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ss-cell-flex .ss-num-pill {
  flex-shrink: 0;
}

/* 時間変更モーダル（<dialog id="ssTimeEditModal">） */
.time-edit-modal {
  border: none;
  border-radius: 8px;
  padding: 0;
  width: 360px;
  background: #fff;
}
.time-edit-modal::backdrop { background: rgba(0, 0, 0, 0.4); }
.time-edit-modal__content { padding: 22px; }
.time-edit-modal__content h3 { margin: 0 0 12px 0; font-size: 16px; }
.time-edit-modal__master {
  margin: 0 0 16px 0;
  padding: 8px 12px;
  background: #f1f3f4;
  border-radius: 4px;
  font-size: 13px;
  color: #5f6368;
}
.time-edit-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.time-edit-modal__form label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.time-edit-modal__form input[type="time"] {
  padding: 6px 10px;
  border: 1px solid rgba(60,64,67,.2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
}
.time-edit-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.time-edit-modal__actions button {
  padding: 8px 16px;
  border-radius: 9999px;
  cursor: pointer;
  border: 1px solid rgba(60,64,67,.2);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
}
#ssResetToMasterBtn { margin-right: auto; }

/* ============================================================
   v6.43.5: OK 確認依頼ボタン（コントロールバー + 日付セル ✈ アイコン + モーダル）
   ============================================================ */

/* コントロールバー「確認依頼」ボタン（白背景 + 薄グレー枠 + 青文字、hover で薄青背景 + 青枠） */
#btnOkRequest {
  background: #fff;
  border: 1px solid rgba(60,64,67,.14);
}
#btnOkRequest:hover {
  background: rgba(26,115,232,.08);
  border-color: #1a73e8;
}

/* 日付セル横の ✈ アイコン（円形 28×28、黒/グレー文字）
   v6.44.1: syukan の確認依頼ボタン（.btn-date-action）と認知統一のため、青 (#1a73e8) → 黒/グレー (text-muted) に変更。
   設計知見 #92 並列定義（syukan.css L259-282 の .btn-date-action は currentColor 継承で var(--color-text) = #202124）。
   円形 28×28 + 中央 SVG の見た目バランスで text-muted (#5f6368) を採用。 */
.ss-plane-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(60,64,67,.14);
  background: #fff;
  color: var(--color-text-muted, #5f6368);
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  vertical-align: middle;
  transition: all 0.15s;
}
.ss-plane-btn:hover {
  background: var(--color-surface-2, rgba(60,64,67,.05));
  border-color: rgba(60,64,67,.20);
  color: var(--color-text, #202124);
}
.ss-plane-btn:active { transform: scale(0.95); }
.ss-plane-btn.is-disabled {
  border-color: rgba(60,64,67,.10);
  color: #80868b;
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.ss-plane-btn svg { width: 14px; height: 14px; }

/* OK 確認モーダル */
.ss-ok-confirm-modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: 440px;
  background: #fff;
}
.ss-ok-confirm-modal::backdrop { background: rgba(0, 0, 0, 0.45); }
.ss-ok-modal-content { padding: 22px 24px 18px; }
.ss-ok-modal-content h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-ok-modal-content h3 svg { stroke: #1a73e8; flex-shrink: 0; }
.ss-ok-modal-body-text {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #5f6368;
  line-height: 1.6;
}
.ss-ok-modal-info {
  background: #f8fafd;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(60,64,67,.10);
}
.ss-ok-info-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
}
.ss-ok-info-row > span:first-child { color: #5f6368; }
.ss-ok-info-row > span:last-child { color: #202124; font-weight: 500; }
.ss-ok-modal-note {
  margin: 0 0 16px 0;
  font-size: 12px;
  color: #80868b;
}
.ss-ok-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ss-ok-modal-actions button {
  padding: 8px 18px;
  border-radius: 9999px;
  cursor: pointer;
  border: 1px solid rgba(60,64,67,.20);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
}
.ss-ok-modal-actions button.gs-btn-primary {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}
.ss-ok-modal-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   v6.44.1: site-shifts 配下の全 <dialog> を画面中央に表示。
   現状（v6.44.0）の各 dialog 個別ルール（.ss-overcrowd-modal / .ss-ok-confirm-modal / .time-edit-modal）には
   position / top / left / margin 指定がなく、UA デフォルトの margin: auto が ancestor の transform 等で
   壊れると左上に張り付く症状が出ていた。本ルールで明示的に画面中央固定（CSS ソース順序末尾配置）。
   スコープ: site-shifts.css のみ（syukan / haichi 等の dialog には影響しない）。
   メンバー選択ポップオーバー（.ss-pop は <div>）は対象外、既存の event 起点配置を温存。
   ============================================================ */
dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* ==========================================================================
   v6.47.7: 時間帯ヘッダー直接クリック編集 + 「+ 時間帯追加」+ 夜勤バッジ + 編集モーダル
   設計知見 #92 並列定義（sites.js モーダル UI と並列）+ #114 業務担当者の認知単位
   + #122 多層防御（disabled）+ §2-9 ヘッダーバー仕様（ピル型 border-radius: 9999px）
   ========================================================================== */

/* 時間帯ヘッダー: クリック可能であることを視覚化 */
.shift-table thead th.col-slot.is-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.shift-table thead th.col-slot.is-clickable:hover {
  background: var(--color-surface-3, #f1f3f4);
}
.shift-table thead th.col-slot.is-clickable:active {
  background: var(--color-surface-2, #e8eaed);
}
/* ヘッダー内のラベル + 夜勤バッジ並び */
.shift-table thead th.col-slot .ss-slot-head-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  width: 100%;
}

/* 夜勤バッジ（紫 ramp purple 50 / purple 800、UI サンプル v2 確定）
   時間帯ヘッダー + モーダル両方で利用、設計知見 #92 並列定義 */
.ss-night-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  padding: 1px 6px;
  background: #EEEDFE;  /* purple 50 */
  color: #3C3489;       /* purple 800 */
  border-radius: 9999px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.ss-night-badge svg {
  stroke: #3C3489;
  flex-shrink: 0;
}
/* 「(翌日)」テキスト（日跨ぎ時に時刻末尾に表示） */
.ss-overnight-suffix {
  color: var(--color-text-muted, #5f6368);
  margin-left: 4px;
  font-size: 10px;
}

/* 「+ 時間帯追加」th セル（ヘッダー右端、業務担当者の認知単位 = 時間帯は横方向に並ぶ） */
.shift-table thead th.col-add-slot {
  text-align: center;
  padding: 6px;
  width: 110px;
  vertical-align: middle;
  background: var(--color-surface-2, #f8fafd);
  border-left: 1px dashed var(--color-border, rgba(60,64,67,.14));
}
.ss-add-slot-btn {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  gap: 4px !important;
  color: #1a73e8;
  border-color: #1a73e8 !important;
}
.ss-add-slot-btn .ss-add-slot-icon {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.ss-add-slot-btn .ss-add-slot-label {
  font-size: 11px;
  font-weight: 500;
}

/* ==========================================================================
   時間帯 編集/追加 モーダル（slotEditModal）
   sites.html のモーダル UI を並列定義（設計知見 #92）、site-shifts スコープで独立
   ========================================================================== */
.ss-slot-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ss-slot-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.ss-slot-modal-box {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  overflow: hidden;
  font-family: 'Noto Sans JP', sans-serif;
}
.ss-slot-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border, rgba(60,64,67,.10));
}
.ss-slot-modal-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #202124);
  margin: 0;
}
.ss-slot-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-muted, #5f6368);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.ss-slot-modal-close:hover {
  background: var(--color-surface-2, #f1f3f4);
}
.ss-slot-modal-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ss-slot-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ss-slot-form-row label {
  font-size: 12px;
  color: var(--color-text-muted, #5f6368);
  font-weight: 500;
}
.ss-slot-form-row input[type="text"],
.ss-slot-form-row input[type="time"],
.ss-slot-form-row input[type="number"] {
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ss-slot-form-row input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26,115,232,.12);
}
/* v6.49.0: 人数フィールド inline 配置（数値入力 + 単位ラベル「名」を横並び） */
.ss-slot-form-row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-slot-form-row-inline input[type="number"] {
  width: 90px;
}
.ss-slot-form-hint {
  font-size: 12px;
  color: var(--color-text-muted, #5f6368);
}
.ss-slot-form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ss-slot-form-row-2col > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 日跨ぎ行（チェック ON 時に紫背景強調） */
.ss-slot-overnight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-surface-2, #f8fafd);
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  transition: background 0.15s, border-color 0.15s;
}
.ss-slot-overnight-row.is-overnight {
  background: #EEEDFE;  /* purple 50 */
  border-color: #AFA9EC; /* purple 200 */
}
.ss-slot-overnight-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text, #202124);
  cursor: pointer;
}
.ss-slot-overnight-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.ss-slot-overnight-row.is-overnight .ss-slot-overnight-label {
  color: #3C3489;  /* purple 800 */
  font-weight: 500;
}

/* 配置中スタッフ情報メッセージ（編集モード + 配置中 1 件以上） */
.ss-slot-assigned-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(26,115,232,.08);
  border: 1px solid rgba(26,115,232,.20);
  font-size: 12px;
  color: #1565c0;
}
.ss-slot-assigned-info svg {
  stroke: #1565c0;
  flex-shrink: 0;
}
.ss-slot-assigned-info strong {
  font-weight: 600;
  color: #0d47a1;
}

/* モーダルフッター（削除ボタンは左、保存・キャンセルは右） */
.ss-slot-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: var(--color-surface-2, #f8fafd);
  border-top: 1px solid var(--color-border, rgba(60,64,67,.10));
  gap: 12px;
}
.ss-slot-modal-footer-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* 削除ボタン（赤系警告色） */
.ss-slot-delete-btn {
  background: rgba(220,53,69,.10) !important;
  color: #b00020 !important;
  border-color: rgba(220,53,69,.24) !important;
  height: 36px !important;
  padding: 0 16px !important;
}
.ss-slot-delete-btn:hover:not(.is-disabled):not(:disabled) {
  background: rgba(220,53,69,.18) !important;
}
.ss-slot-delete-btn.is-disabled,
.ss-slot-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  background: rgba(220,53,69,.06) !important;
}

/* モーダル内 gs-btn-pill / gs-btn-primary の高さ統一（DESIGN.md §2-9 規定だが、モーダルは少し小さめ） */
.ss-slot-modal-footer .gs-btn-pill,
.ss-slot-modal-footer .gs-btn-primary {
  height: 36px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
}

/* ==========================================================================
   v6.47.8 Phase G: 時間帯ヘッダー D&D 並び替え
   syukan.js L1780-1850 のネイティブ HTML5 D&D パターン並列定義（設計知見 #92）
   ========================================================================== */

/* col-slot を relative にしてハンドル絶対配置の基点に */
.shift-table thead th.col-slot {
  position: relative;
  padding-left: 18px !important;  /* ハンドル幅 + マージン分の左パディング確保 */
}

/* D&D ハンドル（左端、編集モード時のみ表示） */
.ss-slot-handle {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  cursor: grab;
  color: var(--color-text-faint, #80868b);
  padding: 2px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  user-select: none;
  -webkit-user-drag: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ss-slot-handle:hover {
  color: var(--color-text, #202124);
  background: var(--color-surface-2, #f8fafd);
}
.ss-slot-handle:active {
  cursor: grabbing;
}
.ss-slot-handle svg {
  display: block;
  pointer-events: none;  /* ハンドル svg 自体は dragstart 対象外（親 th が draggable） */
}

/* ドラッグ中の元要素（半透明、Q2 シンプル方式） */
.shift-table thead th.col-slot.is-dragging {
  opacity: 0.4;
  background: var(--color-surface-2, #f8fafd);
}

/* ドロップ先の細い線（左 = before、右 = after、Q2 シンプル方式） */
.shift-table thead th.col-slot.drag-over-before {
  box-shadow: inset 3px 0 0 0 var(--color-primary, #1a73e8);
}
.shift-table thead th.col-slot.drag-over-after {
  box-shadow: inset -3px 0 0 0 var(--color-primary, #1a73e8);
}

/* ==========================================================================
   v6.48.0.2 FB-2/FB-3/FB-5: 日付セル縦レイアウト + 日単位「解除」/「確定」ボタン
   業務担当者 FB「右クリックは隠れた機能、業務担当者試験運用に不適」への対応。
   信介氏判断 Q1/Q2: 1 ボタンで状態切替（ロック中=「解除」/解除中=「確定」）。
   信介氏判断 Q4: 確定は安全な操作のためモーダル無し即実行。
   v6.48.0.1 の .ss-ctx-menu / cursor: context-menu は撤去。
   ========================================================================== */

/* 日付セルを縦並びレイアウトに（FB-5: 日付テキスト ↑ / 紙飛行機 + ボタン ↓）。
   既存 td.date-cell の sticky left:0 / padding: 7px 14px / text-align: left は完全保護、
   内部の .date-text / .date-actions を block レベルで縦並びにするアプローチ。 */
.shift-table td.date-cell {
  vertical-align: top;
}
.shift-table td.date-cell .date-text {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 6px;
}
.shift-table td.date-cell .date-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* 日単位「解除」/「確定」ボタン（信介氏判断 Q1/Q2: 1 ボタンで状態切替） */
.cell-btn {
  height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.cell-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 「解除」ボタン: ロック中の日（赤系、警告寄り） */
.cell-btn-release {
  border-color: #fca5a5;
  color: #dc2626;
}
.cell-btn-release:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #f87171;
}

/* 「確定」ボタン: 解除中の日（青系、再確定促進） */
.cell-btn-confirm {
  border-color: #93c5fd;
  color: #2563eb;
  background: #eff6ff;
}
.cell-btn-confirm:hover:not(:disabled) {
  background: #dbeafe;
  border-color: #60a5fa;
}

/* ==========================================================================
   v6.47.8.1 Phase 3: 共通 confirmModal（#confirmModal）の z-index を
   site-shifts 上だけ 2000+ に引き上げる。
   背景:
     ・.ss-slot-modal（時間帯 編集/追加モーダル、L1071）は z-index: 1100
     ・syukan.css L1153 の `#confirmModal.modal-overlay { z-index: 1100 }` も同値
     ・両者が同 z-index で開かれると、DOM 出現順依存になり「削除確認」が
       編集モーダルの**下**に隠れる業務担当者試験運用 FB（バグ 3+4）の真因
   解決:
     ・site-shifts.css の末尾（ソース順序勝ち、設計知見 #96）+ 複合セレクタ
       (#confirmModal.modal-overlay) で詳細度を底上げ + `!important` で確実上書き
     ・syukan / haichi / sites など他画面には site-shifts.css は読み込まれないため副作用ゼロ
     ・編集モーダル `.ss-slot-modal { z-index: 1100 }` は維持
   設計知見:
     ・#96「CSS 詳細度の罠」: ソース順序 + 複合セレクタの二重防御
     ・#114「業務担当者の認知単位」: モーダル → 確認 → モーダル の自然な重なり順
     ・#122「多層防御」: z-index 階層を業務的な「重要度」と一致させる
   ========================================================================== */
#confirmModal.modal-overlay,
.modal-overlay#confirmModal {
  z-index: 2000 !important;
}