/* ═══ SASHITE 本体の CSS（tehai-app.css を同じフォルダの 8 枚に分けたうちの 6/8・工程2 CSS・2026-09-28）═══
   デザインリファイン：リスト枠・シフト見出し・スタッフの札・割当欄・案件カード・小ボタン／大ボタン・テキスト入力・移動時間チェック・モーダルの土台・枠名〔午前〕・職人手配側の状態の札・枠の不一致の帯
   ★中身は tehai-app.css の 2720〜3500 行目を **そのまま** 移したもの（1 文字も変えていない）。
   ★順番が大事（カスケード）：functions.php が 00 → 07 の順に読む（deps で固定）。@import はしない。モックも同じ順（tehai/tests/harness/render_*.php）。
   ★1 枚でも欠けると functions.php は旧 tehai-app.css（1 枚）に戻して読む（fallback）。旧ファイルは 1 週間置いてから、fallback の行と一緒に消す。 ═══ */
/* ── ここから本文（tehai-app.css の 2720〜3500 行目・移しただけ）── */
/* ================================================================
   デザインリファイン
   構造・クラス名・ID・シフト色（青/橙/紫）は完全維持
   ================================================================ */

:root {
    --morning: #1e90ff;
    --afternoon: #ff8c00;
    --night: #8b008b;
    --morning-light: #ddf3ff;
    --afternoon-light: #fff4e0;
    --night-light: #f3e5f5;
    /* 時間枠を可変にする準備（2026-09-11・マサさん指定の色）。職人手配の6種：終日／午前／午後／夕方／夜間／深夜 */
    --allday: #2c867d;       --allday-light: #dff0ed;     /* 終日：サシテのロゴの緑（2026-09-12 マサさん指定） */
    --evening: #d9481c;      --evening-light: #fde6de;    /* 夕方：朱色 */
    --midnight: #1f2a5a;     --midnight-light: #e3e6f2;   /* 深夜：濃紺 */
    /* 名前の入れ物（スタッフの札・掴んでいる最中の影・案件の割当欄）の角丸。
       ★3か所で別々に指定していてズレていたので、ここ1つにまとめた（2026-09-12）。
         案件一覧側の小さいほうに合わせている。 */
    --name-radius: 5px;
    /* 名前の左の余白と、色チップの右の余白。
       札（スタッフ一覧）・割当欄（案件一覧）・掴んでいる最中の影で共通にする。
       ★ここを 3か所で別々に書いていたので、右が 8px と 4px、左が 5px と 8px でズレていた（2026-09-12）。
       ★JS側 staffMarkSize().edge は --chip-edge と同じ値にすること。片方だけ変えるとまたズレる。 */
    --name-pad-x: 5px;
    --chip-edge: 4px;
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.09);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.11);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.13);
    --ease: 0.2s ease;
}

/* ── リスト枠（黒border → ソフトに） ── */
#projectList,
#morningStaffList,
#afternoonStaffList,
#nightStaffList {
    border: 1px solid #d4d9e3;
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
}

/* スクロールバーはグローバル統一ルールで管理（ファイル先頭参照） */

/* ── シフトヘッダー h4（色付き帯に） ── */
.morningDataCount h4,
.morningStaffList h4 {
    background: var(--morning);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.afternoonDataCount h4,
.afternoonStaffList h4 {
    background: var(--afternoon);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.nightDataCount h4,
.nightStaffList h4 {
    background: var(--night);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ── スタッフバッジ li ──
   ★ここは既定3枠だけを名指しした**古い指定**。IDを含むので、あとから足した
     .frame-staff li.staff-item（枠に依存しない指定）より**強い**。
     2026-09-12：角丸を 8px 直書きしていたため、--name-radius で統一したつもりが
     3枠の会員だけ効かなかった。角丸はここでも変数を見る。
     影の色は枠ごとに違うので、ここは残す（新しい枠は --frame-shadow が持つ）。 */
#morningStaffList li,
.ops-morningStaffList li {
    border-radius: var(--name-radius, 5px);
    font-weight: 700;   /* 欄（置いた札）と同じ太さに（2026-09-30 マサさん。前は 600 で細く見えた） */
    box-shadow: 0 2px 6px rgba(30,144,255,0.28);
}

#afternoonStaffList li {
    border-radius: var(--name-radius, 5px);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(255,140,0,0.28);
}

#nightStaffList li {
    border-radius: var(--name-radius, 5px);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(139,0,139,0.28);
}

/* ── 案件スロット input（空欄をよりクリアに） ── */
.morning-members-container input {
    background-color: var(--morning-light);
    border: 1.5px solid #a8d8f5;
}

.afternoon-members-container input {
    background-color: var(--afternoon-light);
    border: 1.5px solid #f0d090;
}

.night-members-container input {
    background-color: var(--night-light);
    border: 1.5px solid #c8a0c8;
}

/* 割当済み（プレートを置いたような凸デザイン） */
.morning-members-container input.assigned {
    background-color: var(--morning);
    box-shadow: 0 3px 7px rgba(30,100,220,0.35), 0 1px 2px rgba(0,0,0,0.15);
    border: none;
    font-weight: 700;
    transform: translateY(-1px);
}

.afternoon-members-container input.assigned {
    background-color: var(--afternoon);
    box-shadow: 0 3px 7px rgba(200,100,0,0.35), 0 1px 2px rgba(0,0,0,0.15);
    border: none;
    font-weight: 700;
    transform: translateY(-1px);
}

.night-members-container input.assigned {
    background-color: var(--night);
    box-shadow: 0 3px 7px rgba(120,0,140,0.35), 0 1px 2px rgba(0,0,0,0.15);
    border: none;
    font-weight: 700;
    transform: translateY(-1px);
}

/* ── 案件入力欄ドラッグ＆ドロップ ── */
.projectList-container input.assigned {
    cursor: grab;
}
/* 長い名前は「…」で詰める（一覧の札と同じ見え方。選んで編集している間は全文が見える）2026-09-30 */
.projectList-container input[data-shift] { text-overflow: ellipsis; }
.projectList-container input.assigned:active {
    cursor: grabbing;
}
/* ── 応援（外注）の仮配置 ──
   値が「応援：」で始まる枠。ふつうの割当（濃い色・白文字）より薄い色＋破線＋濃い文字で、
   「仮」であることが一目で分かるようにする。職人手配には送られない見立て専用の枠。
   #projectList input.assigned は color/border に !important が付いているので、ID を含めて上書きする。 */
#projectList input.assigned.support {
    color: #1f2937 !important;
    border: 1.5px dashed rgba(31, 41, 55, 0.45) !important;
    font-weight: 600;
    box-shadow: none;
    transform: none;
}
.morning-members-container   input.assigned.support { background-color: #c9e6ff; border-color: #1e90ff !important; }
.afternoon-members-container input.assigned.support { background-color: #ffe4bf; border-color: #ff8c00 !important; }
.night-members-container     input.assigned.support { background-color: #e9d3ec; border-color: #8b008b !important; }

/* 割当欄をドラッグしている間は、ページのどこも文字選択できないようにする（青いハイライト防止） */
body.tehai-input-dragging,
body.tehai-input-dragging * {
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* iPhone：割当欄を長押ししたときの「自動入力／選択」の吹き出しを出さない（2026-09-28 マサさん）。
   欄は readonly で、名前は札を押して入れるので、文字の選択も自動入力も要らない。selectProjectInput も指の端末では focus しない */
.projectList-container input[data-shift] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.projectList-container input.dragging-input {
    opacity: 0.35;
    cursor: grabbing;
}
.projectList-container input.drop-target-input {
    outline: 2px dashed rgba(255, 255, 255, 0.85);
    outline-offset: 1px;
    background-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-2px);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* ── 案件カード ── */
.project-item {
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-xs);
}

/* ── セクション見出し ── */
.projectList-header h2,
.staffList-header h2 {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1a2a3a;
}

/* ── 小ボタン（▲▼・編集・クリア・削除） ── */
.move-up, .move-down {
    background-color: #8a9db5;
    border-radius: 6px;
    transition: background-color var(--ease), transform var(--ease);
}
.move-up:hover, .move-down:hover {
    background-color: #4a6a8a;
    transform: scale(1.12);
}

.edit-button {
    background-color: #4a6fa5;
    border-radius: 6px;
    transition: background-color var(--ease);
}
.edit-button:hover { background-color: #3a5a8a; }

.clear-staff {
    background-color: #3a9a5a;
    border-radius: 6px;
    transition: background-color var(--ease);
}
.clear-staff:hover { background-color: #2a7a44; }

.delete-project {
    background-color: #d94040;
    border-radius: 6px;
    transition: background-color var(--ease);
}
.delete-project:hover { background-color: #b83030; }

/* ── 一覧クリア／削除ボタン ── */
#clearProjectAssignments {
    background-color: #edf1f8;
    color: #3a5a8a;
    border: 1px solid #b8c8de;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    transition: background-color var(--ease);
}
#clearProjectAssignments:hover {
    background-color: #cddaee;
    color: #1a3a6a;
}

#clearProjects, #clearStaffList {
    background-color: #faeaea;
    color: #a03030;
    border: 1px solid #e0b0b0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    transition: background-color var(--ease);
}
#clearProjects:hover, #clearStaffList:hover {
    background-color: #f0c8c8;
    color: #801818;
}

/* ── 案件追加・一括追加・スタッフ追加ボタン（共通デザイン） ── */
button.addProject,
#bulkAddButton,
#bulkAddStaffButton,
#addMorningStaff,
#addAfternoonStaff,
#addNightStaff,
#addAlldayStaff,
#addEveningStaff,
#addMidnightStaff,
#masterAddMorningStaff,
#masterAddAfternoonStaff,
#masterAddNightStaff,
#masterAddAlldayStaff,
#masterAddEveningStaff,
#masterAddMidnightStaff {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #3a4a5a;
    background-color: #eef1f7;
    border: 1px solid #c4cdd8;
    transition: background-color var(--ease), box-shadow var(--ease);
}
button.addProject:hover,
#bulkAddButton:hover,
#bulkAddStaffButton:hover,
#addMorningStaff:hover,
#addAfternoonStaff:hover,
#addNightStaff:hover,
#addAlldayStaff:hover,
#addEveningStaff:hover,
#addMidnightStaff:hover,
#masterAddMorningStaff:hover,
#masterAddAfternoonStaff:hover,
#masterAddNightStaff:hover,
#masterAddAlldayStaff:hover,
#masterAddEveningStaff:hover,
#masterAddMidnightStaff:hover {
    background-color: #dde3ef;
    box-shadow: var(--shadow-xs);
}

/* ── スタッフ登録エリア h3・ラベルを他と統一 ── */
.staff-content h3 {
    font-size: 14px;
    color: #555;
    font-weight: normal;
    margin: 8px 0 6px;
}
.staff-content .form-row label {
    font-size: 14px;
    color: #555;
    min-width: 2.5em;
    flex-shrink: 0;
}

/* ── リスト選択 select：案件登録フォームのドロップダウン ── */
#masterCustomerSelect,
#masterProjectSelect {
    background-color: #eef3fc;
    border: 1.5px solid #8aafd8;
    color: #1e3a5f;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
#masterCustomerSelect:hover,
#masterProjectSelect:hover {
    background-color: #dde9f8;
    border-color: #5a8fc8;
}
#masterCustomerSelect:focus,
#masterProjectSelect:focus {
    background-color: #fff;
    border-color: #2c6fad;
    box-shadow: 0 0 0 3px rgba(44,111,173,0.15);
}

/* ── スタッフ登録 select：手打ち input と同じ見た目に揃える ── */
#masterMorningStaff,
#masterAfternoonStaff,
#masterNightStaff {
    background-color: #fff;
    border: 1.5px solid #c8d0dc;
    color: #333;
    font-weight: normal;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#masterMorningStaff:hover,
#masterAfternoonStaff:hover,
#masterNightStaff:hover {
    border-color: #5a8fc8;
}
#masterMorningStaff:focus,
#masterAfternoonStaff:focus,
#masterNightStaff:focus {
    background-color: #fff;
    border-color: #5a8fc8;
    box-shadow: 0 0 0 3px rgba(90,143,200,0.14);
}
#masterMorningStaff:disabled,
#masterAfternoonStaff:disabled,
#masterNightStaff:disabled {
    background: #f4f6f9;
    color: #aaa;
    cursor: not-allowed;
}

/* ── 大ボタン（自動割当・保存・メール） ── */
.tehai-app-page .autoAssignButton {
    background: linear-gradient(135deg, #1460b0 0%, #1e90ff 100%);
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 14px rgba(20,96,176,0.32);
    transition: box-shadow var(--ease), transform var(--ease), filter var(--ease);
}
.tehai-app-page .autoAssignButton:hover {
    box-shadow: 0 6px 20px rgba(20,96,176,0.42);
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.tehai-app-page .saveButton {
    background: linear-gradient(135deg, #8b1a1a 0%, #c0392b 100%);
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 14px rgba(139,26,26,0.32);
    transition: box-shadow var(--ease), transform var(--ease), filter var(--ease);
}
.tehai-app-page .saveButton:hover {
    box-shadow: 0 6px 20px rgba(139,26,26,0.42);
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.tehai-app-page .sendEmail {
    background: linear-gradient(135deg, #6a2c00 0%, #b85800 100%);
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 14px rgba(106,44,0,0.28);
    transition: box-shadow var(--ease), transform var(--ease), filter var(--ease);
}
.tehai-app-page .sendEmail:hover {
    box-shadow: 0 6px 20px rgba(106,44,0,0.38);
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* ── トグルボタン ── */
#toggleButton {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(200,30,30,0.22);
    transition: background-color var(--ease), transform var(--ease);
}
#toggleButton:hover { transform: translateY(-1px); }

#mobileToggleButton {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(30,100,200,0.22);
    transition: background-color var(--ease), transform var(--ease);
}
#mobileToggleButton:hover { transform: translateY(-1px); }

/* ── 編集ポップアップ（上書き不要・上部で定義済み） ── */

/* ================================================================
   フォームエリア リファイン（シンプル版）
   ================================================================ */

/* テキスト入力・数値入力・日付入力 共通：border と focus だけ整える */
#planDate,
#customerName, #projectName, #projectAddress, #projectMemo,
#morningStaff, #afternoonStaff, #nightStaff,
#alldayStaff, #eveningStaff, #midnightStaff,
#morningMembers, #afternoonMembers, #nightMembers,
#alldayMembers, #eveningMembers, #midnightMembers {
    border: 1.5px solid #c8d0dc;
    border-radius: 8px;
    background: #fff;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
#planDate:focus,
#customerName:focus, #projectName:focus, #projectAddress:focus, #projectMemo:focus,
#morningStaff:focus, #afternoonStaff:focus, #nightStaff:focus,
#alldayStaff:focus, #eveningStaff:focus, #midnightStaff:focus,
#morningMembers:focus, #afternoonMembers:focus, #nightMembers:focus,
#alldayMembers:focus, #eveningMembers:focus, #midnightMembers:focus {
    border-color: #5a8fc8;
    box-shadow: 0 0 0 3px rgba(90,143,200,0.14);
}


/* テキストエリア（一括登録） */
#bulkInput, #bulkStaffInput {
    border: 1.5px solid #c8d0dc;
    border-radius: 8px;
    background: #fff;
    outline: none;
    line-height: 1.6;
    transition: border-color var(--ease), box-shadow var(--ease);
    resize: vertical;
}
#bulkInput:focus, #bulkStaffInput:focus {
    border-color: #5a8fc8;
    box-shadow: 0 0 0 3px rgba(90,143,200,0.14);
}

/* ================================================================
   移動時間チェック
   ================================================================ */
/* travelCheckButton は autoAssignButton のスタイルを継承し、色だけ上書き */
#travelCheckButton {
    background: linear-gradient(135deg, #1e7a3a 0%, #27ae60 100%) !important;
    box-shadow: 0 4px 14px rgba(30,122,58,0.32) !important;
}
#travelCheckButton:hover {
    background: linear-gradient(135deg, #1e7a3a 0%, #27ae60 100%) !important;
    box-shadow: 0 6px 20px rgba(30,122,58,0.42) !important;
}

/* 再表示ボタン（移動時間チェックと同系の深緑） */
#travelReshowButton {
    background: linear-gradient(135deg, #145228 0%, #1e7a3a 100%) !important;
    box-shadow: 0 4px 14px rgba(20,82,40,0.32) !important;
}
#travelReshowButton:hover {
    background: linear-gradient(135deg, #145228 0%, #1e7a3a 100%) !important;
    box-shadow: 0 6px 20px rgba(20,82,40,0.42) !important;
}

/* モーダルオーバーレイ */
.travel-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.travel-modal-window {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.28);
    width: 90vw;
    max-width: 1000px;
    height: 80vh;
    display: flex;
    flex-direction: column;
}
@media (max-width: 660px) {
    .travel-modal-window {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
    }
}
.travel-modal-window .travel-result-body {
    overflow-y: auto;
    flex: 1;
}

.travel-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c6fad 100%);
    color: #fff;
}
.travel-result-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.travel-result-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.8;
    line-height: 1;
}
.travel-result-close:hover { opacity: 1; }

.travel-result-body {
    padding: 12px 16px;
}

.travel-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 3px;
    background: #fafafa;
    flex-wrap: wrap;
}
.travel-row-alert70 {
    background: #fff5f5;
    border-left: 3px solid #e74c3c;
}
.travel-row-warn35 {
    background: #fef9e7;
    border-left: 3px solid #f39c12;
}
.travel-row-error {
    color: #aaa;
}
.travel-staff  { font-weight: 700; min-width: 80px; }
.travel-arrow  { color: #aaa; }
.travel-project { flex: 1; color: #444; min-width: 120px; }
/* 現場名のうしろに付く枠名〔午前〕。名前より一段小さく、色は控えめに（2026-09-12） */
.travel-frame  { font-size: 11px; color: #888; margin-left: 1px; }
.travel-time   { font-weight: 700; white-space: nowrap; }
.travel-row-alert70 .travel-time { color: #c0392b; }
.travel-row-warn35 .travel-time  { color: #b7770d; }
.travel-section-group {
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;
}
.travel-group-title {
    font-size: 13px;
    font-weight: 700;
    padding: 8px 12px;
    background: #2c3e50;
    color: #fff;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.travel-group-title::-webkit-details-marker { display: none; }
.travel-group-title::after {
    content: '▲';
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s;
}
details.travel-section-group:not([open]) .travel-group-title::after {
    transform: rotate(180deg);
}
.travel-group-error {
    background: #bbb;
    color: #fff;
}
.travel-map-btn {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #eaf2fb;
    color: #2c6fad;
    text-decoration: none;
    white-space: nowrap;
}
.travel-map-btn:hover { background: #d0e8f7; }
.travel-reused {
    font-size: 10px;
    font-weight: normal;
    background: #eee;
    color: #888;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
}
.travel-no-data, .travel-skipped {
    font-size: 12px;
    color: #aaa;
    margin: 6px 0 0;
}


/* 案件カードの割当欄も、名前は左寄せ。
   右端は色チップ（背景に描いてある）のために JS が padding-right を空ける。 */
#projectList .project-item input[data-shift],
.ops-projectList input[data-shift] {
    text-align: left; padding-left: var(--name-pad-x, 5px);
    border-radius: var(--name-radius, 5px);
}

/* 掴んでいる最中の札（本体を複製して作る）。
   ★.staffList-Container の外（bodyの直下）に置くので、札の形をここで持つ。
     ここが札本体（.staffList-Container li）とズレると、掴んだ瞬間に見た目が変わる。 */
.staff-ghost {
    padding: 2px var(--chip-edge, 4px) 2px var(--name-pad-x, 5px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--name-radius, 5px);
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    list-style: none;
}
@media (max-width: 660px) {
    .staff-ghost { font-size: 11px; gap: 3px; }
}

/* ══════════════════════════════════════════════════════════
   出勤可否の色チップ（2026-09-12 マサさん指定・B案）

   札の背景は「いま居る列の枠の色」。そこに**ほかにどの枠へ出られるか**を
   小さな色の四角で足す。枠の数ぶん必ず並べ、出られない枠は薄い灰にする。
   位置が固定されるので「左から2番目＝午前」と数えて読める。

   ★白い台に載せるのが肝。札の色の上に直接置くと、午前の列（青い札）に
     青いチップで見えなくなる。
   ★pointer-events:none。handleStaffListClick が event.target で名前を読むので、
     チップがクリックを吸うと名前が取れなくなる。
   ══════════════════════════════════════════════════════════ */
.staff-marks {
    display: inline-flex; gap: 2px; margin-left: auto; flex: 0 0 auto;
    background: #fff; border-radius: 3px; padding: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    pointer-events: none;
}
.staff-marks i { width: 5px; height: 11px; border-radius: 1.5px; display: block;
                 background: var(--c, #dfe4ea); }
.staff-marks i.off { background: #dfe4ea; }
/* 名前は詰めて、はみ出すぶんは「…」にする。チップは縮めない（そこが読みどころなので）。
   ★名前は span.staff-name（2026-09-30）。li は flex なので裸の文字だと折り返して札が 2 行になっていた。
     pointer-events:none＝クリック・長押し・ドラッグの的は li のまま（event.target で名前を読む所を壊さない） */
.staff-item > .staff-name  { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.staff-item > .staff-marks { margin-left: auto; }   /* 掴んでいる最中の複製にも効かせる */
/* 予測登録（？）は輪郭を点線にして「まだ確かでない」ことを出す */
.staff-marks.is-tentative { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9); }

/* 割当済み（札が灰色になる）ときは、チップからも色味を抜く。
   ただし出られる枠と出られない枠は濃さで残す。情報は消さない。 */
/* ★.staffList-Container で縛らない。掴んでいる最中の札（body直下の複製）にも効かせるため。 */
.staff-item.assigned .staff-marks     { background: #f2f4f7; }
.staff-item.assigned .staff-marks i     { background: #6b7381; }
.staff-item.assigned .staff-marks i.off { background: #d5dae1; }

/* スマホは札が 90px しかない。チップを詰めないと名前が読めなくなる。
   JS 側（staffMarkSize）も同じ幅に切り替えるので、札と割当欄の見た目はそろう。 */
@media (max-width: 660px) {
    /* ★JS側（staffMarkSize）と同じ値。片方だけ変えると札と割当欄で食い違う。
       横は詰めて名前の場所を空け、そのぶん縦を伸ばして読めるようにする。 */
    /* ★JS側 staffMarkSize().edge も 3。ここと食い違うと札と割当欄でチップの位置がズレる */
    :root { --chip-edge: 3px; }
    .staff-marks { gap: 1.5px; padding: 1.5px; border-radius: 2.5px; }
    .staff-marks i { width: 3px; height: 12px; border-radius: 1px; }
    .staffList-Container li { gap: 3px; }
}

/* 職人手配側の状態の札（2026-09-12）。
   ねらいは「確定しそこねた案件を見つける」こと。
   済んでいるもの（受注済・確定）は静かに、未のものだけ目立たせる。
   全部同じ強さにすると、探したいものが埋もれる。 */
.dock-status { display: inline-flex; gap: 4px; white-space: nowrap; vertical-align: middle; }

/* 広い画面：ボタンの列で、MAPボタンの左隣に右寄せ。
   ★MAPボタン自身にも margin-left:auto が付いている（tehai-app.css の .map-button）。
     そのままだと右寄せが2つになり、余った幅が半分ずつに分かれて
     札が列の真ん中あたりに浮く。札に右寄せを持たせ、MAPの auto は打ち消す。 */
.dock-status--pc { margin-left: auto; margin-right: 7px; }   /* 列のすき間5px ＋ 7px＝12px */
.project-header-buttons .dock-status--pc + .map-button { margin-left: 0; }
.dock-status--sp { display: none; }

/* 狭い画面（スマホ）：2026-10-02 から、札は PC と同じ上のボタン列へ（メニューのすぐ左。並びは tehai-app-07 の 660px の所）。
   前は「ボタン列が窮屈なので顧客名の行の右端」（--sp）だった。編集・クリア・削除・MAP がメニューに入って列が空いたので戻した（マサさん）。
   --sp の札は DOM には残るが、どの幅でも出さない。顧客名は今までどおり 1 行で「…」 */
@media (max-width: 660px) {
    .project-item .customer-name-container {
        display: flex; align-items: baseline; gap: 6px;
    }
    .project-item .customer-name-container .customer-name {
        flex: 1 1 auto; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}
.dock-status-chip {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.7;
}
/* ★色は職人手配オンラインの本家にそろえてある（2026-09-12 マサさん指定）。
   本家のCSS（company__…_biz_dezpt_parts.css）から拾った値：
     受注済・確定 … span.BgBlu  背景 #31a6dc ／ 文字 #fff
     未受注・未確 … span.BgRed  背景 #d11900 ／ 文字 #fff
   向こうを見てからこちらを見ても、同じ色で同じ意味になるようにする。 */
.dock-status-chip.is-done { background: #31a6dc; color: #fff; }
.dock-status-chip.is-todo { background: #d11900; color: #fff; }

/* いまの枠で開けない日の帯（2026-09-12）。
   ここが出ている日は保存を止めている。目立たないと意味が無いので赤で最上部に置く。 */
.frames-mismatch-bar {
    display: flex; flex-direction: column; gap: 3px;
    margin: 0 0 10px; padding: 10px 14px;
    background: #fff5f5; border: 1.5px solid #e74c3c; border-left-width: 5px;
    border-radius: 8px; font-size: 13px; line-height: 1.6; color: #7b241c;
}
.frames-mismatch-bar strong { color: #c0392b; }
.frames-mismatch-how { font-size: 12px; color: #a04a3f; }
/* 人は消えず「何人必要だったか」だけ失う日。止めないので赤ではなく黄色で出す */
.frames-mismatch-bar.is-note {
    background: #fef9e7; border-color: #f39c12; color: #7d5a10;
}
.frames-mismatch-bar.is-note strong { color: #b7770d; }


/* ── 相性・NG の印（2026-09-29 マサさん指定。判定は tehai-assign-guard.js・見せ方は tehai-app.js の CompatUI）──
   ① 置く前：選んでいる枠の案件に対する札の印。移動時間チェックの角の点（無地の丸）と見分けるため「!」入り */
.staffList-Container li.staff-item.is-compat-bad, .staffList-Container li.staff-item.is-compat-ng { position: relative; }
/* 印は「下線 4px」（白 1px＋色 3px。9/30 マサさん：6.5px だと PC の 25px の欄で文字の足に触れる）（2026-09-29 マサさん：内側の二重の輪は白のすき間でタブが小さく見える／外側の輪は選択の枠線と被る → 案4 の下線）。
   NG＝深い赤、相性＝濃い琥珀、重複＝スレート（灰青）。色の上に白の細線 1px を挟む＝枠の色（橙・紫）と近い色でも沈まない（案B・2026-09-29 マサさん）。
   選択の橙の枠線は外側なので重ならない。
   札（一覧）：カラーバーは子要素で元から手前。下線は欄と同じ「背景の層」で描く（inset の影だと端が角に沿って持ち上がり、欄と端の形が違って見えた。マサさん 9/29）。影は触らない */
/* :is(ID…) で重みを ID 並みに上げる。#morningStaffList li 等の ID の規則が勝って下線が出なかったため（2026-09-29） */
:is(#morningStaffList, #afternoonStaffList, #nightStaffList, .staffList-Container) li.staff-item.is-compat-bad { background-image: linear-gradient(#fff 0 1px, #b8860b 1px); }
:is(#morningStaffList, #afternoonStaffList, #nightStaffList, .staffList-Container) li.staff-item.is-compat-ng  { background-image: linear-gradient(#fff 0 1px, #c8102e 1px); }
:is(#morningStaffList, #afternoonStaffList, #nightStaffList, .staffList-Container) li.staff-item:is(.is-compat-bad, .is-compat-ng) { background-size: 100% 4px; background-position: left bottom; background-repeat: no-repeat; }
/* 欄：カラーバーは背景画像（paintInputMarks の SVG）。下線は --slot-line として渡し、JS が「バー, 下線」の 2 層で背景に描く＝バーが手前。
   バーが無い欄（背景が inline で決まっていない）には、ここで直接描く。box-shadow は触らない（置いた凸の影はそのまま） */
#projectList .project-item input.dup-slot   { --slot-line: linear-gradient(#fff 0 1px, #6b8db8 1px); }
#projectList .project-item input.compat-bad { --slot-line: linear-gradient(#fff 0 1px, #b8860b 1px); }
#projectList .project-item input.compat-ng  { --slot-line: linear-gradient(#fff 0 1px, #c8102e 1px); }
#projectList .project-item input.dup-slot, #projectList .project-item input.compat-bad, #projectList .project-item input.compat-ng {
    --slot-line-h: 4px; background-image: var(--slot-line); background-size: 100% var(--slot-line-h); background-position: left bottom; background-repeat: no-repeat; }
/* ② 置いた瞬間だけ、外側にほわっと（1.5 秒で止まる。読み込みでは光らない）。下線は背景なので、光は影だけで作る */
@keyframes compat-glow-bad { 0% { box-shadow: 0 3px 7px rgba(0,0,0,.2), 0 0 0 6px rgba(245,180,0,.4), 0 0 16px 6px rgba(245,180,0,.55); } 100% { box-shadow: 0 3px 7px rgba(0,0,0,.2), 0 0 0 0 rgba(245,180,0,0), 0 0 0 0 rgba(245,180,0,0); } }
@keyframes compat-glow-ng  { 0% { box-shadow: 0 3px 7px rgba(0,0,0,.2), 0 0 0 6px rgba(200,16,46,.35), 0 0 16px 6px rgba(200,16,46,.5); } 100% { box-shadow: 0 3px 7px rgba(0,0,0,.2), 0 0 0 0 rgba(179,38,30,0), 0 0 0 0 rgba(179,38,30,0); } }
#projectList .project-item input.compat-bad.compat-glow { animation: compat-glow-bad 1.5s ease-out 1; }
#projectList .project-item input.compat-ng.compat-glow  { animation: compat-glow-ng 1.5s ease-out 1; }
/* ③ 顧客名の横の札（顧客名の要素の外＝名前を読む所を汚さない） */
.project-item .customer-name-container { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.project-item .compat-badge { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; min-width: 0; margin: 0; padding: 2px 9px; border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; cursor: pointer; box-shadow: none; }
.project-item .compat-badge.is-bad { background: #fff3c4; color: #5a4300; border: 1px solid rgba(245,180,0,.7); }
.project-item .compat-badge.is-ng  { background: #fbe4e2; color: #8f1d17; border: 1px solid rgba(179,38,30,.5); }
.project-item .compat-badge.is-dup { background: #e8eef6; color: #2f4b6e; border: 1px solid rgba(91,127,166,.55); }
.project-item .compat-badge:hover { filter: brightness(.97); }
/* 理由の吹き出し（札を押したとき。外を押す・Esc・スクロールで閉じる） */
.compat-pop { position: fixed; z-index: 10060; max-width: 300px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e3c8a5; box-shadow: 0 8px 24px rgba(30,58,95,.18); font-size: 12.5px; line-height: 1.6; color: #3a4a5c; }
.compat-pop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.compat-pop b { color: #6b5000; }
.compat-pop li.is-ng b { color: #b3261e; }
.compat-pop li.is-dup b { color: #2f4b6e; }
.compat-pop small { display: block; margin-top: 6px; font-size: 11px; color: #8a94a6; }