/* ═══ SASHITE 本体の CSS（tehai-app.css を同じフォルダの 8 枚に分けたうちの 4/8・工程2 CSS・2026-09-28）═══
   登録フォームと一覧：案件／スタッフの登録コンテナ・一覧の横並び・MAP ボタン・トースト・スクロールの印・ロックオーバーレイ・ドラッグ並べ替え・移動時間のドット・選定理由・案件優先度・空き状況ボタン
   ★中身は tehai-app.css の 1588〜2455 行目を **そのまま** 移したもの（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 の 1588〜2455 行目・移しただけ）── */
/* form-containerとstaff-input-containerを横並びに表示 */
.form-and-staff-container {
    display: flex;
    align-items: stretch; /* 両列を同じ高さに */
    margin-top: 10px;
}

.form-container {
    width: 100%;
    box-sizing: border-box;
}

/* #projectForm と .staff-input-container を縦 flex にして
   内側コンテナが flex:1 で高さを埋められるようにする */
#projectForm {
    width: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.tehai-project {
    display: grid;
    grid-template-columns: 4.5em 1fr;
    align-content: start;
    column-gap: 8px;
    row-gap: 7px;
}

.tehai-project label {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 14px;
    color: #555;
}

.tehai-project input,
.tehai-project select {
    margin: 0;
    width: 90%;
    box-sizing: border-box;
    height: 34px;
    line-height: 1;
    padding: 0 10px;
}

.tehai-project {
    width: 60%;
}

.tehai-row {
    width: 40%;
    height: auto;
}

.staff-content {
    padding-top: 0;
}

.staff-input-container {
    width: 50%;
    margin-left: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.bulk-project-container {
    width: 100%;
    border-radius: 5px;
}

.bulk-staff-input {
    width: 100%;
    height: 230px;
    flex-shrink: 0;
    border-radius: 5px;
    padding: 5px 20px 20px 20px;
}

.bulk-staff-input textarea {
    width: 90%;
    height: 100px;
    padding: 5px;
    margin: 0 20px 10px 20px;
    border-radius: 5px;
    font-size: 14px;
}

/* tehai-projectとtehai-rowを横並びに表示 */
.tehai-content {
    display: flex;
}

/* 案件登録（個別）のコンテンツ領域を bulk-tehai-content に揃える */
.project-register.separate .tehai-content {
    padding: 5px 20px 20px 20px;
    min-height: 230px;
    align-items: flex-start;
}

.bulk-tehai-content {
    padding: 5px 20px 20px 20px;
    height: 230px;
}

.bulk-tehai-content textarea {
    width: 90%;
    height: 100px;
    padding: 5px;
    margin: 0 20px 10px 20px;
    border-radius: 5px;
    font-size: 14px;
}

/* ボタンのスタイル */
.form-buttons {
    display: flex;
    text-align: center;
}

/* 案件・スタッフ登録コンテナ共通：flex列・高さを親いっぱいに伸ばす */
.project-register.separate.form-container,
.project-register.collective.bulk-project-container,
.staff-register.separate.staff-Container,
.staff-register.collective.bulk-staff-Container {
    display: flex;
    flex-direction: column;
    flex: 1;           /* 親（#projectForm / .staff-input-container）の高さを埋める */
    min-height: 340px; /* 最低限の高さ保証 */
    margin-top: 20px;
}

/* 個別・一括ともにコンテナ底で揃える
   両コンテナは flex:1 で同じ高さになるため、margin-top:auto で完全一致 */
.project-register.separate.form-container > .form-buttons,
.project-register.collective.bulk-project-container > .form-buttons,
.staff-register.collective.bulk-staff-Container > .form-buttons {
    margin-top: auto;
    padding-top: 10px;
}

/* ================================================================
   モバイル補完ルール
   上記の PC 詳細定義（#projectForm, .staff-input-container,
   .tehai-content, .form-buttons）はここより前方に書かれており、
   モバイル媒体クエリ内の同じ詳細度のルールに「後勝ち」で
   上書きしてしまう。ここで再度上書きして確実にモバイル用にする。
   ================================================================ */
@media (max-width: 660px) {
    /* #projectForm / .staff-input-container を確実にblock化・幅100%に */
    #projectForm {
        display: block;
        width: 100%;
    }
    .staff-input-container {
        display: block;
        width: 100%;
        margin-left: 0;
    }
    /* tehai-content の min-height をモバイルで解除 */
    .project-register.separate .tehai-content {
        min-height: unset;
    }
    /* form-buttons: モバイルでも margin-top:auto で下端揃え */
    .project-register.separate.form-container > .form-buttons,
    .project-register.collective.bulk-project-container > .form-buttons,
    .staff-register.collective.bulk-staff-Container > .form-buttons {
        margin-top: auto;
    }
    /* 手配検討日テキスト入力：ベーススタイル（行875）より後に書いて確実に上書き。
       font-size に vw 単位を使い画面幅に合わせて自動スケール。
       clamp(最小, 基準vw, 最大) で上下限を設定。
       -webkit-text-size-adjust:none でブラウザの最小フォントサイズ設定を無効化 */
    .plan-date-text-input {
        font-size: clamp(10px, 3vw, 12px);
        width: 100px;
        padding: 0 4px;
        letter-spacing: 0;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }
}

.tehai-app-page .hidden {
    display: none !important;
}

#toggleButton {
    width: 200px;
    height: 40px;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    background-color: #f44336; /* 初期状態を赤色に */
    border: none;
    margin-left: auto; /* 右端に寄せる */
}

#toggleButton:hover {
    background-color: #d32f2f; /* 赤色のホバー時の色を変更 */
}

#mobileToggleButton {
    width: 200px;
    height: 40px;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    border: none;
    background-color: #2196F3; /* 初期状態は青色 */
}

#mobileToggleButton:hover {
    background-color: #1976D2; /* 青色のホバー時の色を変更 */
}

.form-buttons button {
    margin: 0 10px;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    color: black;
    background-color: gainsboro;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
}

.addProject {
    text-align: center;
    width: 100%;
}

#bulkAddButton {
    text-align: center;
    width: 100%;
}

#bulkAddStaffButton {
    text-align: center;
    width: 100%;
}

#clearProjects {
    color: black;
    background-color: rgb(230, 230, 230);
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
}

#clearStaffList {
    color: black;
    background-color: rgb(230, 230, 230);
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
}

.form-row button {
    width: 70px;
    color: black;
    background-color: gainsboro;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
}

/* projectList-containerとstaffList-Containerを横並びに表示 */
.project-and-staff-list-container {
    display: flex;
    margin-top: 20px;
}

.projectList-container {
    width: 50%; 
}



#projectList {
    max-width: 100%;
    border-radius: 5px;
    height: 70vh;
    height: 70svh;
    overflow-y: auto;
    border: 1px solid black;
    line-height: 1.5;
    overflow-x: hidden;
    padding: 7px;
    box-sizing: border-box;
}



.projectList-header {
    display: flex;
    justify-content: space-between; /* 中央揃え */
    align-items: center; /* 縦方向に中央揃え */
    position: relative; /* 絶対位置を使うために親要素をrelativeに */
    width: 100%; /* 親要素の幅を全体に */
}

#projectCount {
    margin: 0 20px; /* h2とclear-buttonの中間に余白を追加 */
    font-size: 14px;
    color: rgb(51, 51, 51);
}

.projectList-header h2 {
    margin: 0; /* 不要なマージンを削除 */
    padding: 0;
}

.staffList-header {
    display: flex;
    justify-content: flex-start; /* h2を左寄せ */
    align-items: center; /* 縦方向に中央揃え */
    position: relative; /* 絶対位置を使うために親要素をrelativeに */
    width: 100%; /* 親要素の幅を全体に */
}

.staffList-header h2 {
    margin: 0 0 0 5px; /* 不要なマージンを削除 */
    padding: 0;
}

.clear-button {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.clear-button button {
    padding: 5px 10px;
    cursor: pointer;
}

.projectList-DataCount {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 7px;
    box-sizing: border-box;
}

.morningDataCount, .afternoonDataCount, .nightDataCount {
    width: 30%;
    text-align: center;
}

.morningDataCount h4, .afternoonDataCount h4, .nightDataCount h4 {
    border: 1px solid #000000;
    height: 25px;
    width: 100%;
    margin: 0 auto;
    border-radius: 3px;
    text-align: center;
}

.morningDataCount p, .afternoonDataCount p, .nightDataCount p {
    height: 20px;
    font-size: 14px;
    margin: 5px 0;
    color: #333;
}


.staffList-Container {
    width: 50%;
    margin-left: 20px;
}

.staffList {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 7px;
    box-sizing: border-box;
}

.staffList h4 {
    border: 1px solid #000000;
    height: 25px;
    width: 100%;
    margin: 0 auto ;
    border-radius: 3px;
    text-align: center;
}


.morningStaffList, .afternoonStaffList, .nightStaffList {
    width: 30%; /* 各リストを30%の幅に */
    text-align: center;
}

.morningStaffList p,.afternoonStaffList p,.nightStaffList p {
    height: 20px;
    font-size: 14px;
    margin: 5px 0;
    color: #333;
}

#morningStaffList, #afternoonStaffList, #nightStaffList {
    text-align: center;
    width: 100%; /* 各リストを30%の幅に */
    border-radius: 5px;
    height: 70vh;
    height: 70svh;
    padding-bottom: 8px;
    overflow-y: auto;
    border: 1px solid black;
    line-height: 1.5;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* スクロールバーはグローバル統一ルールで管理 */



.staffList-Container li {
    position: relative;
    /* 2026-09-12 削除ボタンを廃止（右クリック／長押しへ移した）ので、
       ボタンのために空けていた padding-right:8px を外した。
       これが残っていたせいで、札の色チップだけ割当欄より 4px 内側に寄っていた。 */
}

br.sp-only { display: none; }

@media (max-width: 660px) {
    /* ボタン内の改行をスマホのみ有効化 */
    .clear-button button br.sp {
        display: inline;
    }
    br.sp-only {
        display: inline;
    }

    /* ヘッダー縦幅をスマホで広げる */
    .projectList-header,
    .staffList-header {
        padding-top: 10px;
        padding-bottom: 10px;
        min-height: 64px;
    }
}

@media (max-width: 600px) {
    /* 長押し中のフィードバック */
    .staffList-Container li.long-pressing {
        opacity: 0.6;
        transform: scale(0.95);
        transition: opacity 0.1s, transform 0.1s;
    }
}


label {
    flex-shrink: 0;
}

input[type="number"] {
    width: 60px;
}

.project-item {
    position: relative; /* inputに対して相対的にクリアボタンを配置する */
    user-select: none;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 5px;
}

.project-item h3 {
    margin: 0 0 2px 0;
}

.project-item h4 {
    margin: 10px 0 5px 0;
}

.project-header-buttons {
    display: flex;
    gap: 5px; /* ボタン間のスペースを調整 */
    align-items: center;
}


.move-up , .move-down {
    background-color: darkgray;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 10px;
    padding: 3px;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.move-up:hover , .move-down:hover  {
    background-color: darkcyan;
}

.edit-button {
    background-color: #4c66af; /* 緑色 */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 10px;
    padding: 3px;
    cursor: pointer;
    width: 42px;
    height: 24px;
}


/* MAPボタン */
.map-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 24px;
    padding: 0 8px;
    background: linear-gradient(135deg, #2c6fad 0%, #3a8bd4 100%);
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(44,111,173,0.30);
    transition: opacity 0.15s, box-shadow 0.15s;
    margin-left: auto; /* 右端へ押し出す */
}
.map-button::before {
    content: '▲';
    font-size: 8px;
    transform: rotate(0deg);
    opacity: 0.85;
}
.map-button:hover {
    opacity: 0.85;
    box-shadow: 0 2px 8px rgba(44,111,173,0.40);
}

.clear-staff {
    background-color: #4CAF50; /* 緑色 */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 10px;
    padding: 3px;
    cursor: pointer;
    width: 42px;
    height: 24px;
}


.delete-project {
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 10px;
    padding: 3px;
    cursor: pointer;
    width: 30px;
    height: 24px;
}


.staffList-Container li.assigned {
    background-color: #888 !important;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.35), inset 0 1px 2px rgba(0,0,0,0.2) !important;
    transform: translateY(1px);
    color: rgba(255,255,255,0.75) !important;
}

/* ── トースト通知 ── */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    min-width: 220px;
    max-width: 360px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    white-space: pre-line;
    line-height: 1.7;
}
.toast.toast-show {
    opacity: 1;
    transform: translateX(0);
}
.toast i { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.toast-success  { background: #2e7d32; }
.toast-error    { background: #c62828; }
.toast-warning  { background: #e65100; }
.toast-info     { background: #1565c0; }

/* サイト共通の「細いスクロールの印」（js/script.js が描く .tk-element-scroll-indicator。z-index が最大近く）が
   保存の札の上に乗っていた（マサさん指摘 2026-09-18・iPhone のスクショ。純正の印ではなくサイト自身の印）。
   保存バー（z-index 900）より下に回す。ページ全体の印（右端 2〜3px）は札と重ならないので触らない */
body:has(#tehaiDockBar) .tk-element-scroll-indicator { z-index: 890; }

/* スマホは保存バーと場所を取り合わないようにする（2026-09-17）。PC は 9/26 から下の帯の上に出す（このファイルの末尾「PC：下に出力・保存の帯が…」） */
@media (max-width: 660px) {
    #toast-container { bottom: 16px; right: 12px; left: 12px; }
    .toast { max-width: 100%; }
    /* スマホ：トーストは浮いたカード（出力・保存・状態の3段）の上に出す（マサさん指摘 2026-09-17）。隠れているときは取っ手のピルの上。
       :has が無い古いブラウザでは元の位置のまま（重なるだけで壊れない） */
    body:has(#tehaiDockBar) #toast-container { bottom: calc(160px + max(18px, env(safe-area-inset-bottom, 0px))); }   /* 札の上端（約141px＋下端）の少し上 */
    body.dockbar-folded:has(#tehaiDockBar) #toast-container,
    body.dockbar-tuck:has(#tehaiDockBar) #toast-container,
    body.dockbar-hidden:has(#tehaiDockBar) #toast-container { bottom: calc(64px + max(14px, env(safe-area-inset-bottom, 0px))); }   /* ピル（48px＋下端）の上 */
}

/* 手配検討日未入力時のロックオーバーレイ */
#plan-date-lock-overlay {
    display: flex;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(200, 210, 220, 0.13) 0px,
        rgba(200, 210, 220, 0.13) 8px,
        transparent 8px,
        transparent 16px
    );
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    z-index: 20;
    cursor: default;
}
#plan-date-lock-overlay .lock-banner {
    background: #1e5aa0;
    color: #fff;
    padding: 14px 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(30, 90, 160, 0.3);
}
#plan-date-lock-overlay .lock-icon {
    font-size: 20px;
}
#plan-date-lock-overlay .lock-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ドラッグ&ドロップ並べ替え */
.staffList-Container li.staff-item {
    cursor: grab;
    user-select: none;
}
.staffList-Container li.staff-item:active {
    cursor: grabbing;
}
.staffList-Container li.staff-item.dragging {
    opacity: 0.3;
    cursor: grabbing;
}

/* 挿入位置ギャップ（プレースホルダー） */
.staffList-Container li.staff-drag-placeholder {
    height: 4px;
    margin: 9px 0 5px 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    list-style: none;
    pointer-events: none;
    animation: placeholder-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes placeholder-pulse {
    from { opacity: 0.6; }
    to   { opacity: 1; }
}

#projectList input.assigned,
.ops-projectList input.assigned {
    color: white !important;
    border: none !important;
}

#morningStaffList li,
.ops-morningStaffList li { background-color: #1e90ff; }
#afternoonStaffList li { background-color: #ff8c00; }
#nightStaffList li{background-color: #8b008b;}



/* 移動時間チェック結果 角ドット */
.travel-dot-wrap {
    position: relative;
    display: inline-block;
}
.travel-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    pointer-events: none;
    z-index: 1;
}

/* ── 選定理由ツールチップ ── */
.assign-tooltip {
    display: none;
    position: fixed;
    z-index: 10040;   /* タップのメニュー（10050）より下。前は 99999 でメニューの手前に出ていた（マサさん指摘 2026-09-19） */
    background: #1e3a5f;
    color: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 180px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    font-size: 12px;
    pointer-events: none;
}
/* メニューが出ている間は、点の内訳は出さない（メニューの候補と重なって読みにくい） */
body:has(.tapmove-menu) .assign-tooltip { display: none !important; }

.assign-tooltip-title {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: #a8c4e0;
    margin-bottom: 8px;
}

.assign-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.assign-tooltip-row:last-of-type {
    border-bottom: none;
}

.assign-tooltip-pts {
    color: #7dd3fc;
    font-weight: 700;
    white-space: nowrap;
}

.assign-tooltip-total {
    margin-top: 8px;
    text-align: right;
    font-weight: 700;
    font-size: 13px;
    color: #fcd34d;
}

.assign-tooltip-section {
    font-size: 10px;
    color: #a8c4e0;
    letter-spacing: 0.04em;
    margin-top: 8px;
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* 案件優先度バッジ */
.priority-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border: 1px solid #aaa;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    cursor: help;
    letter-spacing: 0.03em;
    transition: opacity 0.15s;
}
.priority-badge:hover { opacity: 0.75; }

/* ── 空き状況表示ボタン ── */
.avail-show-btn {
    padding: 5px 14px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c6fad 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 6px rgba(30,58,95,0.25);
    transition: opacity 0.15s, box-shadow 0.15s;
    line-height: 1.3;
}
.avail-show-btn:hover {
    opacity: 0.88;
    box-shadow: 0 3px 10px rgba(30,58,95,0.35);
}
.avail-btn-sp { display: none; }
.avail-btn-pc { display: inline; }