/* ═══ SASHITE 本体の CSS（tehai-app.css を同じフォルダの 8 枚に分けたうちの 3/8・工程2 CSS・2026-09-28）═══
   骨組み：見出し・ボタン群・日付入力と読込みの行・スマホの縦積み・統合カレンダー
   ★中身は tehai-app.css の 991〜1587 行目を **そのまま** 移したもの（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 の 991〜1587 行目・移しただけ）── */
/* h3とh5を左寄せ（旧コード互換） */
.edit-popup h3, .edit-popup h5 {
    align-self: flex-start;
    margin: 5px 0;
}

.edit-popup button {
    display: block;
    text-align: center; /* 各要素のテキストを中央揃え */
    margin-left: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.form-container input, .staff-input-container input, .edit-popup input {
    padding: 5px;
    border-radius: 8px;
    font-size: 16px;
    margin: 2px 5px;
}

#morningMembers, #afternoonMembers, #nightMembers,
#alldayMembers, #eveningMembers, #midnightMembers {
    width: 52px;
    font-size: 14px;
    text-align: center;
    padding: 4px 6px;
}

.form-and-staff-container h2 {
    margin-top: 20px;
}

.load-data-btn,
.form-row .load-data-btn {
    height: 35px;
    width: auto;
    padding: 0 20px;
    border-radius: 8px;
    border: 2px solid #1e5aa0;
    background: transparent;
    color: #1e5aa0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
}

.load-data-btn:hover,
.form-row .load-data-btn:hover {
    background: #1e5aa0;
    color: #fff;
}

#planDate {
    height: 35px;
    width: 150px;
    padding: 5px;
    border-radius: 8px;
    font-size: 16px;
    margin-top: 2px 5px;
    margin-bottom: 2px;
    margin-left:  5px;
    margin-right: auto;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    background-color: white;
}

/* inputが選択された時のスタイル */
.projectList-container input[data-shift]:focus:not(.selected) {
    outline: none;
}
.projectList-container input.selected {
    outline: 3px solid rgb(255, 167, 59);
    outline-offset: 0px;
}

/* .ops-projectList は「？」の説明の模型。本物と同じ構造で組んであり、
   ID でしか当たらない規則にだけ、この別名を足している。 */
#projectList input,
.ops-projectList input {
    height: 25px;
    font-size: 13px;
    padding: 8px;
    max-width: 110px;
    width: 110px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 2px 2px;
    text-align: center;
}

#projectList h4,
.ops-projectList .project-item h4 {
    margin: 0;
}


/* 各ボタンのグループのスタイル */
.move-button-group{
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
}


.edit-button {
    margin-right: 0;
}

/* ボタンのスタイルを統一 */
.move-up, .move-down, .edit-button, .clear-staff, .delete-project {
    height: 24px; /* 高さを統一 */
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* box-sizingを追加 */
}

/* すべてのボタンの左右の隙間を統一 */
.project-header-buttons button {
    margin-left: 5px; /* 左側の隙間を5pxに統一 */
}


/* 最初のボタンには左側のマージンを付けない */
.project-header-buttons button:first-child {
    margin-left: 0;
}

.projectList-container input {
    pointer-events: auto; /* ドラッグ＆ドロップを許可する */
}

.staff-input-container input {
    width: 150px;
}

.staff-Container {
    width: 100%;
    box-sizing: border-box;
}

.staff-input {
    display: flex;
    min-height: 230px;
}

.staff-Container h2 {
    font-size: 24px; /* 既存のh2スタイルに合わせた大きさ */
    font-weight: bold; /* 太字に設定 */
}

.bulk-staff-Container {
    width: 100%;
    border-radius: 5px;
}

.bulk-staff-Container h2 {
    font-size: 24px;
    font-weight: bold;
}


.staffList-Container ul{
    list-style-type: none;
    display: flex;
    flex-direction: column; /* liを縦に配置 */
    align-items: center; /* liを中央揃え */
    padding: 0;
    margin: 0;
}

.staffList-Container li{
    padding: 2px var(--chip-edge, 4px) 2px var(--name-pad-x, 5px);
    width: 110px;
    max-width: 110px;
    height: 25px;
    color: white;
    font-size: 13px;
    border-radius: var(--name-radius, 5px);
    margin: 8px 0 0 0;
    /* ★名前は左寄せ・色チップは右寄せ（2026-09-12 マサさん指定）。
       割当欄・掴んでいる最中の影とも同じ寄せ方にしてある。 */
    text-align: left;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

/* planDateのスタイルを調整 */
.plan-date-container {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

/* 日付入力＋読込みボタンの行 */
.plandate-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

.togglebutton-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.plan-date-container label,
.plan-date-container input {
    flex-shrink: 0;
}

/* スマホ：縦積みに切替 */
@media (max-width: 600px) {
    .plan-date-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .togglebutton-container {
        margin-left: 0;
    }
    .load-data-btn {
        flex: 1;
    }
    .plandate-container {
        flex-wrap: wrap;
    }
    .plan-date-text-input {
        width: 106px;
        font-size: 11px;
        letter-spacing: 0;
        padding: 0 7px;
        margin-left: 0;
    }
    .saved-cal-open-btn {
        padding: 0 6px;
    }
    .load-data-btn,
    .form-row .load-data-btn {
        flex-shrink: 1;
        white-space: normal;
        font-size: 12px;
        padding: 0 10px;
        height: auto;
        min-height: 35px;
    }
}

/* ── スマホ（〜660px）：フォーム全体を縦積みに ── */
@media (max-width: 660px) {

    /* ①「案件登録＋スタッフ登録」の横並びコンテナを縦積みに */
    .form-and-staff-container {
        flex-direction: column;
    }

    /* ② projectForm / staff-input-container を全幅のブロックに戻す
          （PCでflex化したものをモバイルではリセット） */
    .staff-input-container {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }

    /* ③ flex:1 をリセット。min-height はJSがモバイルでも設定するので !important を外す */
    .project-register.separate.form-container,
    .project-register.collective.bulk-project-container,
    .staff-register.separate.staff-Container,
    .staff-register.collective.bulk-staff-Container {
        flex: none;
    }

    /* ④ モバイルでもボタンは下端に揃える（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-bottom: 16px;
    }

    /* ⑤ tehai-content：横並びを維持しつつ余白を詰める */
    .tehai-content {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .project-register.separate .tehai-content {
        padding: 5px 10px 12px;
        min-height: unset;
        gap: 8px;
        align-items: flex-start;
    }

    /* ⑥ 案件入力エリア（左）：flex比3でinputをコンパクトに */
    .tehai-project,
    #modeManualForm,
    #modeMasterForm {
        flex: 3 1 0 !important;
        width: auto !important;
        min-width: 0;
    }
    .tehai-project {
        grid-template-columns: 3.2em 1fr;
        column-gap: 5px;
        row-gap: 5px;
    }
    .tehai-project label {
        font-size: 12px;
    }
    .tehai-project input,
    .tehai-project select {
        width: 100%;
        font-size: 12px;
        height: 30px;
        padding: 0 7px;
    }

    /* ⑦ 必要人数エリア（右）：flex比2 */
    .tehai-row {
        flex: 2 1 0 !important;
        width: auto !important;
        min-width: 0;
    }
    .tehai-row h3 {
        font-size: 12px;
        white-space: nowrap;
    }
    .tehai-row .form-row {
        margin-bottom: 6px;
    }
    .tehai-row .form-row label {
        font-size: 12px;
    }
    .tehai-row .form-row input[type="number"] {
        width: 40px;
        font-size: 12px;
        height: 30px;
    }

    /* ⑦ 一括登録フォーム：固定heightをautoに、内部余白も整理 */
    .bulk-tehai-content {
        height: auto;
        padding: 5px 12px 12px;
    }
    .bulk-tehai-content textarea {
        width: 100%;
        margin: 0 0 10px 0;
        box-sizing: border-box;
    }
}

/* 極小端末（iPhone SE 初代・古いAndroid等） */
@media (max-width: 360px) {
    .plan-date-text-input {
        width: 96px;
        font-size: 10px;
        letter-spacing: 0;
        padding: 0 5px;
    }
}

/* ── 統合カレンダー ────────────────────────────────────────── */

/* 日付テキスト入力（YYYY/MM/DD） */
.plan-date-text-input {
    height: 35px;
    width: 138px;   /* 2026-09-09 少し広げた（もとは124px） */
    padding: 0 12px;
    border: 2px solid #2c5282;
    border-radius: 8px;
    background: #f4f7fb;
    color: #1e3a5f;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    flex-shrink: 0;
    margin-left: 5px;
    text-align: center;
}
.plan-date-text-input::placeholder {
    color: #aab4c8;
    font-weight: 400;
    letter-spacing: 0.04em;
}
.plan-date-text-input:focus {
    background: #fff;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 3px rgba(30,58,95,0.12);
}
.plan-date-text-input.date-input-invalid {
    border-color: #e74c3c;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(231,76,60,0.12);
}

/* カレンダー開閉ボタン */
.saved-cal-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e3a5f, #2c5282);
    border: none;
    border-radius: 8px;
    height: 35px;
    width: 38px;
    padding: 0;
    cursor: pointer;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(30,58,95,0.28);
    transition: filter 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.saved-cal-open-btn:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 14px rgba(30,58,95,0.38);
}

/* ポップオーバー本体 */
.saved-cal-popover {
    position: fixed;
    z-index: 500;
    background: #fff;
    border: 1px solid #c5d2e4;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.16);
    padding: 14px;
    width: 266px;
    user-select: none;
}

/* ヘッダー（月ナビ） */
.saved-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #1e3a5f;
}
.saved-cal-nav {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #1e3a5f;
    padding: 0 6px;
    line-height: 1;
}

/* 曜日ヘッダー行（日曜始まり） */
.saved-cal-grid-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.saved-cal-grid-head span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    padding: 2px 0;
}
.saved-cal-grid-head .sat { color: #2563ab; }
.saved-cal-grid-head .sun { color: #c0392b; }

/* 日付グリッド */
.saved-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* 全日付セル（クリック可能） */
.saved-cal-cell {
    position: relative;
    text-align: center;
    font-size: 12px;
    padding: 5px 2px;
    border-radius: 6px;
    color: #555;
    line-height: 1.2;
    cursor: pointer;
}
.saved-cal-cell:hover { background: #f0f4fa; }
.saved-cal-cell.empty { pointer-events: none; color: transparent; }
.saved-cal-cell.sat { color: #2563ab; }
.saved-cal-cell.sun { color: #c0392b; }

/* 保存データあり → 青背景＋ドット */
.saved-cal-cell.has-data {
    font-weight: 700;
    background: #ddeaf8;
    color: #1e3a5f;
}
.saved-cal-cell.has-data.sat { color: #1a4fa0; }
.saved-cal-cell.has-data.sun { color: #a93226; }
.saved-cal-cell.has-data:hover { background: #2563ab; color: #fff; }
.saved-cal-cell.has-data i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2563ab;
    margin: 2px auto 0;
}
.saved-cal-cell.has-data:hover i { background: #fff; }

/* 今日 */
.saved-cal-cell.today {
    box-shadow: 0 0 0 1.5px #f39c12 inset;
}

/* 選択中 */
.saved-cal-cell.selected {
    background: #2563ab !important;
    color: #fff !important;
}
.saved-cal-cell.selected i { background: #fff; }

/* 凡例 */
.saved-cal-legend {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #eee;
    font-size: 11px;
    color: #888;
}
.saved-cal-dot-sample {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #ddeaf8;
    border: 1px solid #2563ab;
    flex-shrink: 0;
}

.tehai-row h3 {
    margin: 4px 0 10px;
    font-size: 14px;
    color: #555;
    font-weight: normal;
}

.tehai-row .form-row {
    display: block;
    text-align: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
}

.tehai-row .form-row label {
    font-size: 14px;
    color: #555;
}

.staff-content .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}