/* ── 手配アプリ内スクロール領域 ──
   見た目は css/base.css の共通モダンスクロールバーで管理 */
#projectList,
#morningStaffList, #afternoonStaffList, #nightStaffList,
.frame-staff-box, .frame-staff > div,
#bulkInput, #bulkStaffInput,
.info-modal-body,
.avail-card,
.cs-modal-window,
.cs-modal-body,
.travel-result-body,
.travel-modal-window,
.credit-confirm-modal {
    scrollbar-gutter: stable;
}

/* 案件・スタッフ登録 モード切替トグル（共通） */
.project-mode-toggle {
    display: flex;
    gap: 0;
    margin: 8px 20px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}
.project-mode-btn {
    padding: 6px 16px;
    font-size: 13px;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    color: #666;
    transition: background 0.15s, color 0.15s;
}
.project-mode-btn.active {
    background: #1e3a5f;
    color: #fff;
}

/* スタッフ選択モードの select：手打ち input と形・大きさ・線を揃える */
#staffModeMasterForm .form-row select {
    flex: 1;
    height: 34px;
    padding: 0 28px 0 8px;
    font-size: 16px;
    font-family: inherit;
    border: 1.5px solid #c8d0dc;
    border-radius: 8px;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
    box-sizing: border-box;
    margin: 2px 5px;
}
#staffModeMasterForm .form-row select:focus {
    border-color: #5a8fc8;
    box-shadow: 0 0 0 3px rgba(90,143,200,0.14);
}
#staffModeMasterForm .form-row select:disabled {
    background: #f4f6f9;
    color: #aaa;
    cursor: not-allowed;
}

/* ── select 共通スタイル ── */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a96a8' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px !important;
    cursor: pointer;
}

/* ── マスター選択フォーム — input/select を完全統一 ── */

/* select・input 共通ベース（高さ・ボーダー・角丸） */
#modeMasterForm input,
#modeMasterForm select,
#modeManualForm input {
    width: 90%;
    box-sizing: border-box;
    height: 34px;
    padding: 0 10px;
    font-size: 14px;
    font-family: inherit;
    border: 1.5px solid #c8d0dc;
    border-radius: 8px;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1;
    margin: 0;
}
/* selectだけ矢印スペース確保 */
#modeMasterForm select {
    padding-right: 28px;
    cursor: pointer;
}
/* フォーカス */
#modeMasterForm input:focus,
#modeMasterForm select:focus {
    border-color: #5a8fc8;
    box-shadow: 0 0 0 3px rgba(90,143,200,0.14);
}
/* disabled共通（住所・メモ・selectの非活性） */
#modeMasterForm input:disabled,
#modeMasterForm select:disabled {
    background: #f4f6f9;
    color: #999;
    cursor: not-allowed;
}
/* 住所：自動入力だが編集可能 — 薄い背景で区別しつつ通常の入力欄として扱う */
#masterAddress {
    background: #f0f4ff !important;
    color: #333 !important;
    border-color: #b8c8e8 !important;
}
#masterAddress:focus {
    background: #fff !important;
    border-color: #5a8fc8 !important;
    box-shadow: 0 0 0 3px rgba(90,143,200,0.14) !important;
}

/* 確認モーダル */
.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.confirm-modal {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px 20px;
    width: min(320px, 88vw);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    text-align: center;
}
.confirm-modal__msg {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 22px;
}
.confirm-modal__btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.confirm-modal__btn {
    flex: 1;
    padding: 13px 0;
    font-size: 15px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    min-height: 48px;
}
.confirm-modal__btn--yes {
    background: #e74c3c;
    color: #fff;
}
.confirm-modal__btn--yes:hover { background: #c0392b; }
.confirm-modal__btn--no {
    background: #ecf0f1;
    color: #555;
}
.confirm-modal__btn--no:hover { background: #dde1e3; }

.userProfile {
    padding: 15px 0;
    font-size: 16px;
}

.login-page {
    position: relative; /* 子要素の配置を制御するためにpositionを設定 */
    margin: 0 12vw;
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center;     /* 垂直方向の中央揃え */
}

.login-page .systemMessage {
    margin-top: 100px;
}

.login-page label,
.login-page input {
    display: block;
    margin-bottom: 10px; /* 間隔を追加 */
}

.login-page .signUp {
    display: block;
    margin: 20px auto 0 auto; /* 水平方向の中央揃え */
}

.tehai-app-page {
    position: relative; /* 子要素の配置を制御するためにpositionを設定 */
    margin: 0 12vw;
    padding-bottom: 70px;
}

.tehai-app-page .menberForm {
    align-items: center; 
}

.tehai-app-page input,
.tehai-app-page button {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
}

.tehai-app-page p {
    margin: 0;
    padding: 0;
}

.tehai-app-page h5 {
    margin: 0;
}

/* ページ間ナビリンク */
.report-back-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
    align-items: center;
}

/* ゲージ以外のボタン群を右寄せ（ゲージがある時だけ） */
.report-back-links:has(.credit-gauge-mini) .report-back-btn:first-of-type {
    margin-left: auto;
}

/* ── クレジットミニゲージ ── */
.credit-gauge-mini {
    flex: 0 0 auto;
    min-width: 200px;
    background: #f8fbff;
    border: 1.5px solid #c8d9ef;
    border-radius: 12px;
    padding: 9px 13px;
    transition: border-color .3s;
}
.cgm-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}
.cgm-label {
    font-size: 11px;
    font-weight: 700;
    color: #1e5aa0;
}
.cgm-detail-btn {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: #4caf50;
    border: none;
    border-radius: 20px;
    padding: 3px 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    transition: background 0.4s, opacity 0.15s;
    cursor: pointer;
}
.cgm-detail-btn:hover { opacity: 0.85; }
.cgm-num {
    font-size: 17px;
    font-weight: 800;
    color: #1e5aa0;
    line-height: 1.2;
    margin-bottom: 5px;
}
.cgm-unit { font-size: 11px; font-weight: 400; color: #aaa; }
.cgm-bar {
    height: 5px;
    background: #e8eef6;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.cgm-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .5s, background .3s;
}
.cgm-sub { font-size: 10px; color: #aaa; display: flex; justify-content: space-between; gap: 12px; }

/* ── 確認モーダル ── */
.credit-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.credit-confirm-modal {
    background: #fff;
    border-radius: 18px;
    max-width: 340px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
}
.ccm-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f0f4f8;
    text-align: center;
}
.ccm-title { font-size: 15px; font-weight: 700; color: #1a2a3a; }
.ccm-sub   { font-size: 11px; color: #aaa; margin-top: 3px; }
.ccm-body  { padding: 14px 16px 16px; }
.ccm-breakdown {
    border: 1.5px solid #e8eef6;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}
.ccm-bd-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f4f8;
}
.ccm-bd-row:last-child { border-bottom: none; }
.ccm-bd-geo   { background: #f8fbff; }
.ccm-bd-route { background: #f8fbff; }
.ccm-bd-reuse { background: #f9fdf9; }
.ccm-bd-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.ccm-bd-text { flex: 1; min-width: 0; }
.ccm-bd-name { font-size: 12px; font-weight: 600; color: #333; }
.ccm-bd-sub  { font-size: 10px; color: #bbb; margin-top: 1px; }
.ccm-bd-count { font-size: 12px; font-weight: 700; color: #1e5aa0; flex-shrink: 0; text-align: right; min-width: 36px; }
.ccm-bd-reuse .ccm-bd-count { color: #aaa; }
.ccm-bd-cr { font-size: 12px; font-weight: 700; color: #1e5aa0; flex-shrink: 0; text-align: right; min-width: 34px; }
.ccm-bd-cr--free { color: #bbb; font-weight: 400; }
.ccm-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f6ff;
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 10px;
}
.ccm-cost-label { font-size: 12px; color: #555; }
.ccm-cost-val   { font-size: 18px; font-weight: 800; color: #1e5aa0; }
.ccm-cost-val strong { font-size: 22px; }
.ccm-hint {
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-bottom: 14px;
    line-height: 1.5;
}
.ccm-btns { display: flex; gap: 8px; }
.ccm-btn-cancel {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    border: 1.5px solid #e0e8f4;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
}
.ccm-btn-exec {
    flex: 2;
    padding: 11px;
    border-radius: 10px;
    border: none;
    background: #1e5aa0;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}
.ccm-btn-exec:hover  { background: #1a4f8a; }
.ccm-btn-cancel:hover { background: #f5f7fa; }
/* リンクをボタンの見た目で（有料プランの案内） */
.ccm-btn-link { display: block; text-align: center; text-decoration: none; line-height: 1.2; }
.ccm-btn-link:hover { color: #fff; text-decoration: none; }

/* 有料プランの案内モーダル */
.prm-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: #1a2a3a; font-weight: 600; }
.prm-plan {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 12px 0 10px; padding: 10px 14px;
    background: #f4f8fd; border: 1px solid #dbe6f3; border-radius: 10px;
}
.prm-plan-name  { font-size: 13px; font-weight: 700; color: #1e5aa0; }
.prm-plan-price { font-size: 18px; font-weight: 800; color: #1a2a3a; }
.prm-plan-price span { font-size: 11px; font-weight: 600; color: #888; margin-left: 2px; }
.prm-plan-cr    { margin-left: auto; font-size: 11px; font-weight: 600; color: #475569; }
.cs-plan-cta { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #1e5aa0; text-decoration: none; }
.cs-plan-cta:hover { text-decoration: underline; }
.info-plan-note { margin-top: 6px; font-size: 11px; color: #a15c00; background: #fff7e6; border-radius: 6px; padding: 6px 8px; line-height: 1.5; }

/* クレジットページ：プランのご案内 */
.plan-guide { max-width: 760px; margin: 0 0 28px; }
.plan-guide-current { font-size: 14px; color: #475569; margin: 0 0 14px; }
.plan-guide-current strong { color: #1e5aa0; }
.plan-guide-free { font-size: 13px; line-height: 1.8; color: #334155; margin: 0 0 16px; padding: 10px 14px; background: #f0f7ee; border-left: 4px solid #4caf50; border-radius: 0 8px 8px 0; }
.plan-guide-free strong { color: #2e7d32; }
.plan-guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.plan-card { border: 1.5px solid #dbe6f3; border-radius: 14px; padding: 18px 18px 16px; background: #fff; position: relative; }
.plan-card--paid { border-color: #1e5aa0; box-shadow: 0 6px 18px rgba(30,90,160,0.12); }
.plan-card--current::after {
    content: 'ご利用中'; position: absolute; top: 12px; right: 12px;
    font-size: 11px; font-weight: 700; color: #1e5aa0; background: #e8eef6; border-radius: 20px; padding: 3px 10px;
}
.plan-card-name  { font-size: 15px; font-weight: 700; color: #1a2a3a; margin: 0 0 4px; }
.plan-card-price { font-size: 22px; font-weight: 800; color: #1a2a3a; margin: 0 0 10px; }
.plan-card-price span { font-size: 12px; font-weight: 600; color: #888; margin-left: 2px; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13px; line-height: 1.8; color: #334155; }
.plan-card li::before { content: '✓ '; color: #2e7d32; font-weight: 700; }
.plan-card li.plan-no::before { content: '✕ '; color: #c0392b; font-weight: 700; }   /* 「－」では対象外と分かりにくいので × に */
.plan-card li.plan-no { color: #94a3b8; }
.plan-card-cta {
    display: block; text-align: center; padding: 11px; border-radius: 10px;
    background: #1e5aa0; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;
}
.plan-card-cta:hover { background: #1a4f8a; color: #fff; }
.plan-guide-note { font-size: 12px; color: #64748b; margin-top: 12px; line-height: 1.7; }

.report-back-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-decoration: none;
    background: #f9f9f9;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.report-back-btn:hover {
    background: #eee;
    color: #333;
}

.report-back-btn--active {
    background: #1e3a5f;
    color: #fff;
    border-color: #1e3a5f;
}

.report-back-btn--active:hover {
    background: #2c5282;
    color: #fff;
}

.report-back-btn--deprecated {
    position: relative;
    opacity: .65;
}
.report-back-btn--deprecated::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 100;
}
.report-back-btn--deprecated:hover::after {
    opacity: 1;
}

@media (max-width: 600px) {
    .report-back-links {
        flex-direction: column;
        align-items: stretch;
    }
    .report-back-btn {
        text-align: center;
    }
}

.action-row-assign {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}

/* ボタン＋？ラッパー（PC：横並び、ボタン内に？を重ねる） */
.action-btn-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: stretch;
}
.action-btn-wrap .autoAssignButton {
    flex: 1;
    margin: 0;
}
.travel-btn-wrap .travel-main-btns {
    display: flex;
    flex: 1;
    gap: 10px;
}
.travel-btn-wrap .travel-main-btns .autoAssignButton {
    flex: 1;
    margin: 0;
}

/* ？ヘルプボタン — ガラスドーム風立体感 */
.info-help-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background:
        radial-gradient(circle at 38% 32%, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0) 55%),
        rgba(255,255,255,0.18);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.65),
        inset 0 -1px 2px rgba(0,0,0,0.10),
        0 2px 4px rgba(0,0,0,0.18),
        0 1px 2px rgba(0,0,0,0.10);
    color: rgba(255,255,255,0.95);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 1;
    transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}
.info-help-btn:hover {
    background:
        radial-gradient(circle at 38% 32%, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0) 55%),
        rgba(255,255,255,0.24);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.75),
        inset 0 -1px 2px rgba(0,0,0,0.08),
        0 3px 6px rgba(0,0,0,0.22),
        0 1px 2px rgba(0,0,0,0.12);
}

/* 親ボタンホバーに追従して一緒に浮き上がる */
.action-btn-wrap:has(.autoAssignButton:hover) .assign-help-btn,
.travel-btn-wrap:has(#travelReshowButton:hover) .travel-help-btn,
.travel-btn-wrap:has(#travelCheckButton:hover) .travel-help-btn {
    transform: translateY(-1px);
}

/* 情報モーダル */
.info-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.info-modal-window {
    background: #fff;
    border-radius: 14px;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    overflow: hidden;
}
.info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #e0e7ef;
}
.info-modal-title {
    font-size: 16px;
    font-weight: bold;
    color: #1e5aa0;
}
.info-modal-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.info-modal-close:hover { color: #333; }
.info-modal-body {
    overflow-y: auto;
    padding: 16px 20px 20px;
    flex: 1;
}
.info-section {
    margin-bottom: 20px;
}
.info-section:last-child { margin-bottom: 0; }
.info-section-title {
    font-size: 14px;
    font-weight: bold;
    color: #1e5aa0;
    margin: 0 0 10px;
    padding-bottom: 5px;
    border-bottom: 1.5px solid #c8d9ef;
}
.info-rule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.info-rule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}
.info-rule-icon {
    flex: 0 0 auto;
    width: 32px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 0;
    border-radius: 4px;
    background: #e8eef6;
    color: #1e5aa0;
}
/* 操作ガイド：ラベルが「右クリック」など長いので、アイコン枠を広げて2行を許す */
.info-rule--ops .info-rule-icon {
    width: auto;
    min-width: 62px;
    padding: 4px 8px;
    line-height: 1.35;
    white-space: nowrap;
}

.info-rule--positive .info-rule-icon { background: #e6f4ea; color: #2e7d32; }
.info-rule--negative .info-rule-icon { background: #fdecea; color: #c62828; }
.info-rule--order    .info-rule-icon { background: #e8f0fe; color: #1565c0; }
/* 冒頭お知らせ帯 */
.info-section--notice {
    background: #f8f9fb;
    border-left: 3px solid #1e5aa0;
    border-radius: 0 8px 8px 0;
    padding: 12px 14px;
    margin-bottom: 20px;
}
.info-notice-text {
    font-size: 12px;
    color: #444;
    line-height: 1.65;
    margin: 0 0 8px;
}
.info-notice-sub {
    font-size: 11px;
    color: #666;
    line-height: 1.6;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid #e4e9f0;
}
/* 特殊ルール枠 */
.info-special-rule {
    margin-top: 12px;
    border: 1.5px dashed #b8c2d0;
    border-radius: 10px;
    padding: 10px 13px;
    background: #fafbfd;
}
.info-special-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #1e5aa0;
    background: #e8f0fe;
    border-radius: 4px;
    padding: 2px 7px;
    margin-bottom: 6px;
    letter-spacing: .4px;
}
.info-special-body {
    font-size: 12px;
    color: #444;
    line-height: 1.65;
}
.info-special-example {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: #888;
}
.info-note {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}
/* 移動時間ドットサンプル */
.travel-dot-demo { border-radius: 50%; display: inline-block; }
.travel-ok   { color: #4caf50; }
.travel-warn { color: #ff9800; }
.travel-ng   { color: #f44336; }
/* プランカード */
.info-section--pricing .info-section-title { color: #7b1fa2; border-color: #e1bee7; }
.info-plan-card {
    border: 1.5px solid #ce93d8;
    border-radius: 10px;
    background: #fdf6ff;
    padding: 14px 16px;
}
.info-plan-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.info-plan-name {
    font-size: 12px;
    font-weight: bold;
    color: #7b1fa2;
    letter-spacing: .3px;
}
.info-plan-price {
    font-size: 22px;
    font-weight: bold;
    color: #4a148c;
}
.info-plan-unit {
    font-size: 13px;
    color: #888;
    font-weight: normal;
}
.info-plan-credit {
    font-size: 12px;
    color: #555;
    margin-bottom: 10px;
}
.info-plan-link {
    display: inline-block;
    font-size: 12px;
    color: #7b1fa2;
    text-decoration: none;
}
.info-plan-link:hover { text-decoration: underline; }
.action-row-assign .travelCheckButton {
    flex: 1;
    margin: 0;
}
.action-row-assign .travelReshowButton {
    flex: 1;
    margin: 0;
}

.action-row-save {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.tehai-app-page .autoAssignButton {
    width: 100%;
    display: block;
    margin: 0;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 1.4;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    color: white;
    background-color: rgba(30, 90, 160, 0.85);
    border: none;
}

.tehai-app-page .autoAssignButton:hover {
    background-color: rgba(30, 90, 160, 0.65);
}

.tehai-app-page .autoAssignButton:disabled {
    background-color: #aaa;
    cursor: not-allowed;
}

.tehai-app-page .saveButton , .tehai-app-page .sendEmail {
    width: 100%;
    display: block;
    margin: 0;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    color: white;
}

.tehai-app-page .saveButton {
    background-color: rgba(180, 30, 30, 0.85);
    border: none;
}

.tehai-app-page .saveButton:hover {
    background-color: rgba(180, 30, 30, 0.65);
    border: none;
}

.tehai-app-page .sendEmail {
    background-color: rgba(131, 78, 12, 0.7);
    border: none;
}

.tehai-app-page .sendEmail:hover {
    background-color: rgba(131, 78, 12, 0.5);
    border: none;
}

.edit-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
}

.edit-popup {
    background: #fff;
    width: 560px;
    max-width: 92vw;
    border-radius: 16px;
    border: none;
    padding: 28px 28px 20px;
    box-sizing: border-box;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 90vh;
    scrollbar-gutter: stable;
}

.edit-popup .form-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e3a5f;
    text-align: center;
    margin: 0 0 6px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8edf4;
    letter-spacing: 0.05em;
}

.edit-field-label {
    display: inline-block;
    width: 3em;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-align: justify;
    text-align-last: justify;
    flex-shrink: 0;
    margin-right: 10px;
}

.edit-popup label {
    display: flex;
    align-items: center;
    margin: 0;
}

.edit-text-input,
.edit-project-memo {
    flex: 1;
    padding: 7px 10px;
    border: 1.5px solid #c8d0dc;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #f7f9fc;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.edit-text-input:focus,
.edit-project-memo:focus {
    outline: none;
    border-color: #2c6fad;
    background: #fff;
}

.edit-popup input[type="number"] {
    width: 64px;
    padding: 7px 8px;
    border: 1.5px solid #c8d0dc;
    border-radius: 8px;
    font-size: 14px;
    background: #f7f9fc;
    text-align: center;
}
.edit-popup input[type="number"]:focus {
    outline: none;
    border-color: #2c6fad;
    background: #fff;
}
.edit-popup label span:last-child {
    margin-left: 6px;
    font-size: 13px;
    color: #888;
}

.edit-popup .form-buttons {
    margin-top: 6px;
}

.edit-popup .form-buttons {
    margin-top: 6px;
    width: 100%;
}

.edit-popup .editEnd {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #1460b0, #1e90ff);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: filter 0.15s, transform 0.15s;
}
.edit-popup .editEnd:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.edit-popup .editClose {
    display: block;
    width: 40%;
    margin: 8px auto 0;
    padding: 7px;
    background: #f0f2f5;
    color: #666;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.edit-popup .editClose:hover {
    background: #e2e6ec;
}

/* 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;
}

.project-header-buttons {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    gap: 5px;
    
}

/* 各ボタンのグループのスタイル */
.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;
    }
    .saved-cal-display-btn {
        min-width: 0;
        width: auto;
        font-size: 12px;
        padding: 0 10px;
        margin-left: 0;
    }
    .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化したものをモバイルではリセット） */
    #projectForm {
        display: block;
        width: 100%;
    }
    .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);
}

/* 日付表示ボタン（ネイティブ input の代替） */
.saved-cal-display-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 36px;
    min-width: 200px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #1e3a5f, #2c5282);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(30,58,95,0.25);
    transition: box-shadow 0.15s, filter 0.15s;
    flex-shrink: 0;
    margin-left: 5px;
}
.saved-cal-display-btn:hover {
    filter: brightness(1.12);
    box-shadow: 0 4px 14px rgba(30,58,95,0.35);
}
.saved-cal-arrow {
    font-size: 9px;
    color: rgba(255,255,255,0.6);
    flex-shrink: 0;
}

/* ポップオーバー本体 */
.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-nav:hover { color: #2563ab; }

/* 曜日ヘッダー行（日曜始まり） */
.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;
}

/* 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;
}

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

/* ── 廃止したスタッフごとの削除ボタン（2026-09-12）──────────────
   パソコンは右クリック、スマホは長押しで同じ確認モーダルを出す方式に変えた。
   見た目の指定（大きさ・枠線・スマホで隠す等）は全部外してある。

   ★この1行だけは残す。**用心**である。
     見た目の指定を消したので、もし古いHTML（ボタン入りの札）が残っていると、
     ブラウザ既定の <button>（灰色の枠つきの箱）が札の中にそのまま出てしまう。
     - ページ(php)より先にCSSだけアップされた瞬間
     - 利用者のブラウザに古いページが残っているとき
     どちらも実際に起こる。実測：16×6px の "border:2px outset" の箱が札に割り込み、
     名前が折り返して札が崩れた。
     tehai-app.js の411行・691行にも同じ用心（「旧い札にしか無い」）が入れてある。
     JS側にだけ用心があってCSS側に無いのは片手落ちだった。 */
.delete-staff { display: none !important; }


.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-item内のプロジェクト名と削除ボタンを横並びにする */
.project-header {
    display: flex;
    justify-content: space-between; /* 左側にプロジェクト名、右側に削除ボタン */
    align-items: center;
}

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

.project-header .project-name {
    margin: 0; /* プロジェクト名の余白をリセット */
}

.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;
}

.edit-button:hover {
    background-color: #3e58a0;
}

/* 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;
}

.clear-staff:hover {
    background-color: #45a049;
}

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

.delete-project:hover {
    background-color: #d32f2f;
}

.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; }

@media (max-width: 660px) {
    #toast-container { bottom: 16px; right: 12px; left: 12px; }
    .toast { max-width: 100%; }
}

/* 手配検討日未入力時のロックオーバーレイ */
#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,
.ops-afternoonStaffList li { background-color: #ff8c00; }
#nightStaffList li{background-color: #8b008b;}

.morning-members-container input { background-color: #e0ffff; }
.afternoon-members-container input { background-color: #fff8dc; }
.night-members-container input{background-color: #d8bfd8;}

.morning-members-container input.assigned { background-color: #1e90ff; }
.afternoon-members-container input.assigned { background-color: #ff8c00; }
.night-members-container input.assigned{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: 99999;
    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;
}

.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; }

/* ── 空き状況モーダル（スクショ特化レイアウト） ── */
.avail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,20,40,0.62);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8000;
    padding: 16px;
}

.avail-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 16px 56px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.10);
    width: fit-content;
    min-width: 400px;
    max-width: 96vw;
    padding: 0 0 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* カードトップ帯 */
.avail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(120deg, #1e3a5f 0%, #2c6fad 60%, #3a8bd4 100%);
    padding: 16px 22px 14px;
    margin-bottom: 16px;
}
.avail-header-left { display: flex; align-items: baseline; gap: 14px; }
.avail-title { margin: 0; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 0.06em; }
.avail-date  { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 500; }

.avail-close {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s;
}
.avail-close:hover { background: rgba(255,255,255,0.32); }

/* 枠ごとの列を横に並べる（既定の3枠なら今までどおり3列） */
.avail-body {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #e2e8f2;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 18px;
}
/* ★枠が4つ以上あると、右の枠が枠外へ出て見えなくなる（2026-09-12）。
   幅を詰めるより、横に動かせるようにするほうが名前が読める。 */
.avail-body.is-many {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.avail-body.is-many .avail-col { flex: 0 0 clamp(120px, 26%, 180px); }

/* 各シフト列 */
.avail-col {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    border-right: 1.5px solid #e2e8f2;
    background: #fafbfd;
}
.avail-col:last-child { border-right: none; }

/* シフトヘッダー */
.avail-col-header {
    padding: 8px 12px;
    min-width: calc(110px + 12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.avail-col-header-label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.avail-col-header-badge {
    font-size: 11px;
    font-weight: 600;
    background: rgba(255,255,255,0.22);
    border-radius: 10px;
    padding: 2px 8px;
    letter-spacing: 0.03em;
}

/* スタッフ一覧エリア */
.avail-col-body {
    padding: 6px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: flex-start;
    min-height: 50px;
    background: #fff;
}

.avail-subcol {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* スタッフ pills — staff-item と同じ見た目 */
.avail-pill {
    width: 110px;
    margin-bottom: 4px;
    display: block;
    max-width: 110px;
    height: 25px;
    padding: 2px 5px;
    border-radius: var(--name-radius, 5px);   /* 出勤スタッフの札と同じ角丸（2026-09-12 統一） */
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avail-pill.avail-free {
    background: var(--col-color, #1e90ff);
    box-shadow: 0 2px 6px var(--col-shadow, rgba(30,144,255,0.28));
}
.avail-pill.avail-busy {
    background: #888;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.35), inset 0 1px 2px rgba(0,0,0,0.2);
}

/* 凡例 */
.avail-legend {
    display: flex;
    gap: 20px;
    margin: 12px 20px 0;
    padding-top: 10px;
    border-top: 1px solid #eef0f5;
    font-size: 11.5px;
    color: #888;
}
.avail-legend-item { display: flex; align-items: center; gap: 6px; }
.avail-legend-item::before {
    content: '';
    width: 12px; height: 12px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}
.avail-legend-free::before { background: #2c6fad; }
.avail-legend-busy::before { background: #d0d0d4; }

/* ── 空き状況モーダル スマホ対応 ── */
@media (max-width: 660px) {
    /* ボタン */
    .avail-btn-pc { display: none; }
    .avail-btn-sp { display: inline; font-size: 11px; text-align: center; }
    .avail-show-btn {
        padding: 4px 10px;
        font-size: 11px;
        min-width: 38px;
    }

    /* モーダル全体。
       ★2026-09-11 修正：カードを overflow-y:auto にしていたが、中の .avail-body が overflow:hidden の
         flex子要素なので「最小の高さ0まで縮んでよい」扱いになり、中身が押しつぶされて切れていた
         （カード自身ははみ出していないのでスクロールもできない＝全体が見えない）。
         見出しと凡例は固定し、一覧（.avail-body）だけを中でスクロールさせる形にする。 */
    .avail-card {
        max-height: 88vh;
        max-height: 88svh;
        overflow: hidden;
        width: 100%;
        min-width: 0;
        border-radius: 14px;
    }
    .avail-header { margin-bottom: 10px; padding: 12px 16px 10px; }
    .avail-header-left { flex-direction: column; align-items: flex-start; gap: 2px; }
    .avail-title { font-size: 15px; white-space: nowrap; }

    /* 3列→縦積み。ここだけをスクロールさせる */
    .avail-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        border-left: none;
        border-right: none;
        border-radius: 0;
        margin: 0 12px;
    }
    .avail-col { flex: 0 0 auto; }
    .avail-legend { margin-top: 10px; padding-top: 8px; gap: 14px; }
    .avail-col {
        border-right: none;
        border-bottom: 1.5px solid #e2e8f2;
    }
    .avail-col:last-child { border-bottom: none; }

    /* シフトヘッダー */
    .avail-col-header {
        padding: 7px 12px;
        min-width: 0;
    }
    .avail-col-header-label { font-size: 13px; }

    /* スタッフエリア — 上段から横に 1 2 3 4 ／ 5 6 7 8 … と積み下げる（スマホだけ）。
       ★2026-09-11：列に分けず grid で流す。1枚の最小幅を70pxにして、入る幅なら4列、狭い端末なら3列に
         自動で変わる（375px なら4列・各約71px、320px なら3列）。札のデザインは出勤スタッフ一覧の札
         （tehai-sync.css のスマホ指定）と同じ：高さ32・13px・角丸は --name-radius・太字600 */
    .avail-col-body {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        gap: 6px;
        padding: 6px 8px;
    }
    .avail-subcol { display: contents; }   /* PC用の列分けが残っていても、そのまま流し込む */

    /* pill ＝ スマホの出勤スタッフの札と同じ見た目（幅は列に合わせて伸縮） */
    .avail-pill {
        width: auto;
        max-width: none;
        min-width: 0;
        height: 32px;
        padding: 0 5px;
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        border-radius: var(--name-radius, 5px);
    }
    .avail-pill.avail-busy {
        color: rgba(255, 255, 255, 0.75);   /* 一覧の割当済（li.assigned）と同じ */
        transform: translateY(1px);
    }
}

/* ================================================================
   デザインリファイン
   構造・クラス名・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: 600;
    box-shadow: 0 2px 6px rgba(30,144,255,0.28);
}

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

#nightStaffList li {
    border-radius: var(--name-radius, 5px);
    font-weight: 600;
    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;
}
.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;
}

.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-section {
    margin-bottom: 10px;
}
.travel-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 4px;
}
.travel-alert70 .travel-section-title {
    background: #fdf3f2;
    color: #c0392b;
}
.travel-warn35 .travel-section-title {
    background: #fef9e7;
    color: #b7770d;
}
.travel-ok .travel-section-title {
    background: #eafaf1;
    color: #1e8449;
}
.travel-error .travel-section-title {
    background: #f5f5f5;
    color: #888;
}

.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; }
/* 名前は詰めて、はみ出すぶんは「…」にする。チップは縮めない（そこが読みどころなので） */
.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; }

/* 狭い画面：カードが小さくボタン列は窮屈なので、顧客名の行の右端へ。
   顧客名は長いことがあるので、札は縮まず名前のほうを詰める */
@media (max-width: 660px) {
    .dock-status--pc { display: none; }
    .dock-status--sp { display: inline-flex; flex: 0 0 auto; }
    .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; }

/* ========== クレジットステータスページ ========== */
.credit-status-page .cs-wrap {
    max-width: 420px;
    margin: 0 auto;
    padding: 0 0 40px;
}

/* ========== クレジットステータスモーダル ========== */
.cs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.cs-modal-window {
    background: #f5f7fa;
    border-radius: 18px;
    max-width: 440px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,.28);
    display: flex;
    flex-direction: column;
}
.cs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 0;
    flex-shrink: 0;
}
.cs-modal-title {
    font-size: 15px;
    font-weight: bold;
    color: #1e3a5f;
}
.cs-modal-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #aaa;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.cs-modal-close:hover { color: #333; }
.cs-modal-body {
    padding: 12px 20px 24px;
    overflow-y: auto;
}

/* ヒーローカード */
.cs-hero {
    background: #fff;
    border-radius: 20px;
    padding: 26px 22px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    margin-bottom: 12px;
}
.cs-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 18px;
}
.cs-badge-green  { background: #e8f5e9; color: #2e7d32; }
.cs-badge-blue   { background: #e3f2fd; color: #1565c0; }
.cs-badge-amber  { background: #fffde7; color: #f57f17; }
.cs-badge-orange { background: #fff3e0; color: #e65100; }
.cs-badge-red    { background: #fce4ec; color: #c62828; }

/* リングゲージ */
.cs-ring-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 16px;
}
.cs-ring-wrap svg { transform: rotate(-90deg); }
.cs-ring-bg   { fill: none; stroke: #f0f4f8; stroke-width: 11; }
.cs-ring-fill {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
    transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .4s;
}
.cs-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cs-approx { font-size: 12px; font-weight: 600; opacity: .5; }
.cs-num    { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.cs-unit   { font-size: 13px; font-weight: 600; margin-top: 2px; opacity: .65; }

.cs-basis    { font-size: 11px; color: #bbb; margin-bottom: 12px; line-height: 1.5; }
.cs-cr-row   { font-size: 13px; color: #aaa; margin-bottom: 5px; }
.cs-cr-row strong { color: #1a2a3a; font-size: 15px; }

.cs-mini-bar-wrap { margin: 6px 0 12px; }
.cs-mini-bar  { height: 5px; background: #f0f4f8; border-radius: 3px; overflow: hidden; }
.cs-mini-fill { height: 100%; border-radius: 3px; transition: width .6s, background .3s; }

.cs-renew        { font-size: 12px; color: #bbb; }
.cs-renew strong { color: #666; font-size: 13px; }

/* ヒントカード */
.cs-hint-card {
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 10px;
}
.cs-hint-orange { background: #fff8f0; border: 1.5px solid #ffcc80; color: #bf360c; }
.cs-hint-red    { background: #fff5f5; border: 1.5px solid #ffcdd2; color: #c62828; }

/* サブカード */
.cs-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    margin-bottom: 10px;
}
.cs-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #bbb;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cs-safe-title { color: #4caf50; }

/* プラン */
.cs-plan-row  { display: flex; justify-content: space-between; align-items: center; }
.cs-plan-name { font-size: 14px; font-weight: 600; color: #1a2a3a; }
.cs-plan-badge {
    font-size: 11px; font-weight: 600;
    background: #e8eef6; color: #1e5aa0;
    border-radius: 20px; padding: 3px 10px;
}

/* 消費ルール */
.cs-rule-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f5f7fa;
}
.cs-rule-row:last-child { border-bottom: none; }
.cs-rule-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.cs-icon-geo   { background: #e3f2fd; }
.cs-icon-route { background: #e8f5e9; }
.cs-rule-body  { flex: 1; }
.cs-rule-name  { font-size: 13px; font-weight: 600; color: #333; }
.cs-rule-sub   { font-size: 11px; color: #aaa; margin-top: 2px; }
.cs-rule-cr    { font-size: 16px; font-weight: 700; color: #1e5aa0; flex-shrink: 0; text-align: right; }
.cs-rule-cr span { font-size: 10px; font-weight: 400; color: #aaa; }

/* 安心ポイント */
.cs-safe-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f5f7fa;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}
.cs-safe-row:last-child { border-bottom: none; }
.cs-check { color: #4caf50; font-weight: 700; flex-shrink: 0; }
.cs-safe-note { font-size: 11px; color: #aaa; display: block; margin-top: 2px; }

/* モバイル対応 */
@media (max-width: 480px) {
    .credit-status-page .cs-wrap { padding: 0 0 32px; }
    .cs-hero { padding: 20px 16px; }
    .cs-num  { font-size: 38px; }
}

/* =========================================================
   SASHITE の4ページは業務用アプリなので、
   津山工業HPのヘッダー・フッターは出さない（2026-09-09）
   body.sashite-app は functions.php の body_class フィルタで付く。
   get_header()/get_footer() は wp_head()/wp_footer() のために呼び続けている。
   ========================================================= */
body.sashite-app > header,
body.sashite-app #footer,
body.sashite-app #page-top {
    display: none;
}

/* ヒーローの下に少し余白 */
body.sashite-app .sashite-hero {
    margin-bottom: clamp(18px, 3vh, 32px);
}

/* 本文の地色も、ヒーローと同じ寒色側にそろえる。
   HPの地色（--content-wrapper-color = rgb(255,253,251)）は少し黄みがあり、
   ティールの帯の下に置くと境目で色が転んで見えるため、この4ページだけ差し替える。
   ★変数の上書きなのでHP側には影響しない。 */
body.sashite-app {
    /* 地色に色を持たせ、案件カードは白のまま＝「机の上に紙が乗っている」形。
       カード側に色を付ける案も試したが、カードの中はすでに
       午前＝水色／午後＝クリーム／夜間＝薄紫で色分けされているので、
       カードの地に色を足すとその色分けが読みにくくなる。 */
    --content-wrapper-color: #f4f8f7;
}

/* =========================================================
   SASHITE ヘッダー（2026-09-09）
   4ページ共通。tehai/parts/sashite-header.php から出る。
   ・アプリ本体（--home）＝ロゴを大きく、ページ名は出さない
   ・姉妹ページ（--sub） ＝ロゴは小さくトップへの戻り口、その下にページ名
   ロゴ画像（images/sashite-logo.png）が無い間は文字ロゴで表示する。
   ========================================================= */
.sashite-hero {
    /* 左上から光が入り、右下へロゴのティール寄りのうすい緑へ落ちる。
       下の線は同じティール系をごく薄く。線を太くすると帯が主張しすぎるので細く。
       ★ロゴPNGは全体が半透明（不透明度85%まで）なので、背景が透けて見える。
         濃い色の背景にすると沈んで濁るため、明るい背景を保つこと。 */
    background:
      radial-gradient(130% 160% at 6% 0%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0) 58%),
      linear-gradient(118deg, #f8fcfb 0%, #eef5f3 50%, #e1edeb 100%);
    border-bottom: 1px solid rgba(0, 109, 98, 0.20);
}

.sashite-hero-inner {
    /* 左右の余白は本体（.tehai-app-page の margin: 0 12vw）と同じ値にそろえる。
       以前は幅1280pxの箱を中央寄せにしていたため、広い画面ではロゴが本体の
       左端より内側に、会員情報が右端より内側に寄ってしまっていた。
       同じ 12vw にすれば、ロゴの左端＝案件一覧の左端、会員情報の右端＝本体の右端になる。 */
    max-width: none;
    margin: 0;
    padding: clamp(24px, 4.5vh, 48px) 12vw clamp(20px, 3.5vh, 36px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.sashite-hero-main {
    min-width: 0;
}

.sashite-brand {
    display: block;      /* 「手配検討シミュレーター」が上、SASHITE が下 */
    text-decoration: none;
}

a.sashite-brand:hover {
    opacity: 0.72;
}

.sashite-logo-img {
    display: block;
    width: auto;
    /* 画像は「荷揚げのマーク ＋ SASHITE」の横並びロゴ。
       マークのぶん縦に厚みがあるので、文字ロゴのときより少し大きめにとる。 */
    height: clamp(36px, 5.4vw, 58px);
}

.sashite-logo-word {
    display: block;
    color: #14110e;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.sashite-logo-sub {
    display: block;
    margin-bottom: 6px;
    color: #14110e;
    font-size: clamp(13px, 1.5vw, 17px);
    font-weight: 600;
    letter-spacing: 0.34em;
    text-indent: 0.34em;   /* 字間の分だけ右に寄るのを戻す */
}

/* --- 姉妹ページ：ロゴは小さく、ページ名を主役にする --- */
.sashite-hero--sub .sashite-logo-img   { height: clamp(24px, 3vw, 34px); }
.sashite-hero--sub .sashite-logo-word  { font-size: clamp(26px, 3.2vw, 35px); }
.sashite-hero--sub .sashite-logo-sub   { margin-bottom: 4px; font-size: 12px; letter-spacing: 0.26em; text-indent: 0.26em; }

.sashite-page-title {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(32, 28, 24, 0.14);
    color: rgb(32, 28, 24);
    font-family: "Hiragino Kaku Gothic ProN", Arial, sans-serif;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: normal;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

/* --- 会員情報 --- */
.sashite-hero-meta {
    text-align: right;
    line-height: 1.5;
}

.sashite-meta-label {
    margin: 0;
    color: rgba(32, 28, 24, 0.5);
    font-size: 11px;
    letter-spacing: 0.14em;
}

.sashite-meta-name {
    margin: 2px 0 0;
    color: #14110e;
    font-size: 16px;
    font-weight: 700;
}

.sashite-meta-sub {
    margin: 2px 0 0;
    color: rgba(32, 28, 24, 0.65);
    font-size: 13px;
}

.sashite-meta-id {
    margin-left: 4px;
    color: rgba(32, 28, 24, 0.45);
}

/* HPのヘッダーを出さなくなったので、ログアウトの出口はここだけ */
.sashite-logout {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    border: 1px solid rgba(32, 28, 24, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: rgba(32, 28, 24, 0.75);
    font-size: 12px;
    line-height: 1.6;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sashite-logout:hover,
.sashite-logout:focus {
    background: #fff;
    border-color: rgba(32, 28, 24, 0.5);
    color: #14110e;
}

@media screen and (max-width: 767px) {
    .sashite-hero-inner {
        align-items: flex-start;
        gap: 12px;
    }
    /* スマホではロゴを大きく。PC向けの clamp では下限の36pxに張り付いて小さすぎ、
       会員情報の文字と釣り合わなかった。画面幅の15%（375pxで56px）を基準にし、
       幅は自動なのでロゴ全体（比率5.5:1）が横に収まる範囲で最大化する。 */
    .sashite-logo-img {
        height: clamp(48px, 15vw, 64px);
    }
    .sashite-logo-word {
        font-size: clamp(44px, 12vw, 56px);
    }
    .sashite-logo-sub {
        margin-bottom: 8px;
        font-size: 13px;
    }
    /* 姉妹ページ（マスター管理・傾向・Dock）も同じ考えで一段大きく */
    .sashite-hero--sub .sashite-logo-img  { height: clamp(36px, 11vw, 46px); }
    .sashite-hero--sub .sashite-logo-word { font-size: clamp(30px, 8.5vw, 40px); }
    .sashite-hero-main {
        width: 100%;
    }
    /* スマホは会員情報を2段に割り、ログアウトはその右にまとめて置く。
       1行に詰めるとログアウトだけ次の行へ落ちて、宙に浮いて見えるため。
         1段目：会員情報  山田 一郎        [ログアウト]
         2段目：〇〇工業株式会社 (yamada)      〃      */
    .sashite-hero-meta {
        width: 100%;
        text-align: left;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: baseline;
        column-gap: 8px;
        row-gap: 2px;
        padding-top: 8px;
        border-top: 1px solid rgba(32, 28, 24, 0.10);
    }
    .sashite-hero-meta p { margin: 0; min-width: 0; }
    .sashite-meta-label { grid-column: 1; grid-row: 1; }
    .sashite-meta-name  { grid-column: 2; grid-row: 1; font-size: 14px; }
    .sashite-meta-sub   { grid-column: 1 / span 2; grid-row: 2; font-size: 12px; }
    .sashite-logout {
        grid-column: 3;
        grid-row: 1 / span 2;   /* 2段ぶんの高さの真ん中に置く */
        align-self: center;
        margin-top: 0;
    }
    .sashite-hero-meta .sp { display: none; }   /* スマホでも会社名とIDは1行に並べる */
    .sashite-page-title { margin-top: 10px; padding-top: 10px; }
}

/* 案件一覧の見出しの右・件数の左に置く「？」（操作のしかた）。
   ほかの「？」は色の濃いボタンの上に乗るので、白のガラスドームで立体を出している。
   ここは白地なので同じ手は使えない。代わりに「濃紺のドーム＋白抜きの？」にして、
   照り返しと影の付け方をそろえ、同じ立体感に見えるようにする。 */
.projectList-header .ops-help-btn {
    position: static;          /* 他の「？」は絶対配置。ここは見出しの隣に流し込む */
    margin: 0 auto 0 8px;      /* 見出しの右に寄せ、あとは space-between に任せる */
    border: none;
    background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 52%),
        linear-gradient(160deg, #3a76b8 0%, #23507f 100%);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.45),
        inset 0 -1px 2px rgba(0,0,0,0.22),
        0 2px 4px rgba(30,58,95,0.28),
        0 1px 2px rgba(0,0,0,0.12);
    color: #fff;
    line-height: 1;
}

.projectList-header .ops-help-btn:hover {
    background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0) 52%),
        linear-gradient(160deg, #4485cb 0%, #295c92 100%);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.55),
        inset 0 -1px 2px rgba(0,0,0,0.20),
        0 4px 8px rgba(30,58,95,0.32),
        0 1px 2px rgba(0,0,0,0.14);
    transform: translateY(-1px);
}

.projectList-header .ops-help-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.22),
        0 1px 2px rgba(30,58,95,0.24);
}

/* ── 新しい枠（終日・夕方・深夜）の枠色。夜間の規則をもとに生成（2026-09-11）。枠定義が入るまでは使われない ── */
.allday-members-container input{background-color: var(--allday-light);}
.evening-members-container input{background-color: var(--evening-light);}
.midnight-members-container input{background-color: var(--midnight-light);}
.allday-members-container input.assigned{background-color: var(--allday);}
.evening-members-container input.assigned{background-color: var(--evening);}
.midnight-members-container input.assigned{background-color: var(--midnight);}
/* 空欄の縁は6枠とも #projectList input の 1px #ccc（1087行）に任せる（2026-09-12 総点検）。
   ここに書いていた 1.5px の色つき縁は、クラス指定（0,1,1）が ID 指定（1,0,1）に負けて
   もともと効いておらず、下の ID+属性 の指定だけが終日・夕方・深夜に効いて
   3枠と新しい枠で縁が食い違っていた。どちらも外して同じ見た目にそろえた。 */
.allday-members-container input   { background-color: var(--allday-light); }
.evening-members-container input  { background-color: var(--evening-light); }
.midnight-members-container input { background-color: var(--midnight-light); }
.allday-members-container input.assigned {
    background-color: var(--allday);
    box-shadow: 0 3px 7px rgba(44,134,125,0.35), 0 1px 2px rgba(0,0,0,0.15);   /* 終日の緑（#2c867d）の影。旧色 #5b7a99 の残りを直した（2026-09-12） */
    border: none;
    font-weight: 700;
    transform: translateY(-1px);
}
.evening-members-container input.assigned {
    background-color: var(--evening);
    box-shadow: 0 3px 7px rgba(217,72,28,0.35), 0 1px 2px rgba(0,0,0,0.15);
    border: none;
    font-weight: 700;
    transform: translateY(-1px);
}
.midnight-members-container input.assigned {
    background-color: var(--midnight);
    box-shadow: 0 3px 7px rgba(31,42,90,0.35), 0 1px 2px rgba(0,0,0,0.15);
    border: none;
    font-weight: 700;
    transform: translateY(-1px);
}
.allday-members-container     input.assigned.support { background-color: #e9d3ec; border-color: var(--allday) !important; }
.evening-members-container     input.assigned.support { background-color: #e9d3ec; border-color: var(--evening) !important; }
.midnight-members-container     input.assigned.support { background-color: #e9d3ec; border-color: var(--midnight) !important; }

/* ══════════════════════════════════════════════════════════
   枠の色を data-shift から引く（2026-09-11・時間枠の可変化の土台）

   これまでは `.morning-members-container input` のように**クラス名**で色を引いていた。
   枠が可変になると枠キー（allday/morning/afternoon/evening/night/midnight）から
   クラス名を組み立てることになるので、`data-shift` の値で引く形も用意しておく。

   ・既存のクラス名の規則はそのまま残す（3枠の会員は今までどおり）
   ・ここは**後に書いてあるぶん強い**ので、同じ色を指すかぎり見た目は変わらない
   ・新しい枠（終日・夕方・深夜）はクラス名の規則が無いので、ここだけが効く
   ══════════════════════════════════════════════════════════ */
#projectList input[data-shift="allday"],    .ops-projectList input[data-shift="allday"]    { background-color: var(--allday-light); }
#projectList input[data-shift="morning"],   .ops-projectList input[data-shift="morning"]   { background-color: var(--morning-light); }
#projectList input[data-shift="afternoon"], .ops-projectList input[data-shift="afternoon"] { background-color: var(--afternoon-light); }
#projectList input[data-shift="evening"],   .ops-projectList input[data-shift="evening"]   { background-color: var(--evening-light); }
#projectList input[data-shift="night"],     .ops-projectList input[data-shift="night"]     { background-color: var(--night-light); }
#projectList input[data-shift="midnight"],  .ops-projectList input[data-shift="midnight"]  { background-color: var(--midnight-light); }

#projectList input[data-shift="allday"].assigned,    .ops-projectList input[data-shift="allday"].assigned    { background-color: var(--allday); }
#projectList input[data-shift="morning"].assigned,   .ops-projectList input[data-shift="morning"].assigned   { background-color: var(--morning); }
#projectList input[data-shift="afternoon"].assigned, .ops-projectList input[data-shift="afternoon"].assigned { background-color: var(--afternoon); }
#projectList input[data-shift="evening"].assigned,   .ops-projectList input[data-shift="evening"].assigned   { background-color: var(--evening); }
#projectList input[data-shift="night"].assigned,     .ops-projectList input[data-shift="night"].assigned     { background-color: var(--night); }
#projectList input[data-shift="midnight"].assigned,  .ops-projectList input[data-shift="midnight"].assigned  { background-color: var(--midnight); }

/* ══════════════════════════════════════════════════════════
   枠を選ぶタブ（2026-09-12）

   スマホではスタッフ一覧を枠ごとに重ねて1つだけ見せるので、選ぶ手段が要る。
   枠が4つ以上のときだけHTMLに出る（3枠の会員には存在しない＝見た目は変わらない）。
   パソコンでは枠が横に並んでいて選ぶ必要が無いので、ここで隠す。
   ══════════════════════════════════════════════════════════ */
.frame-tabs { display: none; }

.frame-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--frame-color, #666);
    background: #fff;
    border: 1.5px solid var(--frame-color, #ccc);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.frame-tab.active {
    background: var(--frame-color, #666);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════
   出勤スタッフ一覧の「名前が並ぶ箱」（2026-09-12）

   ★これまで #morningStaffList のように**ID名**でしか書かれていなかったので、
     終日・夕方・深夜の列には枠線も高さもスクロールも付いていなかった。
     IDの指定はクラスの指定より強いので、ここを足しても
     既存3枠は今までどおりIDの規則が勝つ＝見た目は1pxも変わらない。

   引き先は2通り。.frame-staff-box は page-spot-tehai.php が付ける印。
   .frame-staff > div のほうは、PHPがまだ古くてもCSSだけで効くようにするための保険。
   （.frame-staff の直下にある div はこの箱だけ）
   値は、既存3枠が最終的に受け取っているものとまったく同じにそろえてある
   （2034行目の指定に、2784行目の枠線・角丸・影を重ねたあとの姿）。
   ══════════════════════════════════════════════════════════ */
.frame-staff-box,
.frame-staff > div {
    text-align: center;
    width: 100%;
    height: 70vh;
    height: 70svh;
    padding-bottom: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid #d4d9e3;
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
}

/* ══════════════════════════════════════════════════════════
   応援（外注）の仮配置の色（2026-09-12 手直し）

   ★上の `#projectList input[data-shift="…"].assigned` はIDを含むので、
     `.morning-members-container input.assigned.support`（IDなし）より**強い**。
     そのため着手順3を入れた日から、応援の枠がふつうの割当と同じ濃い色になっていた。
     応援は「仮」だと一目で分かる薄い色でなければならないので、同じ土俵で書き直す。
   既存3枠の色は、着手順3より前とまったく同じ値に戻してある。
   ══════════════════════════════════════════════════════════ */
#projectList input[data-shift="allday"].assigned.support,
.ops-projectList input[data-shift="allday"].assigned.support    { background-color: #c6e2de; }
#projectList input[data-shift="morning"].assigned.support,
.ops-projectList input[data-shift="morning"].assigned.support   { background-color: #c9e6ff; }
#projectList input[data-shift="afternoon"].assigned.support,
.ops-projectList input[data-shift="afternoon"].assigned.support { background-color: #ffe4bf; }
#projectList input[data-shift="evening"].assigned.support,
.ops-projectList input[data-shift="evening"].assigned.support   { background-color: #f8ccc0; }
#projectList input[data-shift="night"].assigned.support,
.ops-projectList input[data-shift="night"].assigned.support     { background-color: #e9d3ec; }
#projectList input[data-shift="midnight"].assigned.support,
.ops-projectList input[data-shift="midnight"].assigned.support  { background-color: #c9cfe4; }

/* 出勤スタッフの札も同じ考え方で（既存は #morningStaffList li のようにIDで引いている）。
   既存の3枠はIDの規則のほうが強いので、ここは新しい3枠（終日・夕方・深夜）のためにある。
   6枠ぶん書いておき、IDの規則が無くなっても同じ色が出るようにしておく。 */
.staffList-Container li.staff-item[data-shift="allday"]    { background-color: var(--allday); }
.staffList-Container li.staff-item[data-shift="morning"]   { background-color: var(--morning); }
.staffList-Container li.staff-item[data-shift="afternoon"] { background-color: var(--afternoon); }
.staffList-Container li.staff-item[data-shift="evening"]   { background-color: var(--evening); }
.staffList-Container li.staff-item[data-shift="night"]     { background-color: var(--night); }
.staffList-Container li.staff-item[data-shift="midnight"]  { background-color: var(--midnight); }

/* 割当済み（グレー）は枠の色より強い。IDで書かれている既存の規則と同じ強さにそろえる */
.staffList-Container li.staff-item.assigned { background-color: #888 !important; }

/* ══════════════════════════════════════════════════════════
   枠に依存しない指定（2026-09-11 / 2026-09-12 手直し）

   これまで `.morningDataCount` `.nightStaffList` のように枠の名前ごとに書いていたぶんを、
   共通クラス（HTML側で併記している `.frame-count` / `.frame-staff`）で引けるようにする。
   枠の色は HTML の data-frame="<枠キー>" から引く。6種すべてに当たる。

   ★ここはファイルの末尾にあるので、上に書いてある枠名ごとの規則を**上書きする**。
     だから「上書きしてよいものだけ」を書くこと。
     2026-09-12 に2つやらかした：
       ・h4 に border:1px solid #000 を書いてしまい、色付き帯の border:none を打ち消して
         案件一覧のタイトルに黒い枠線が出た
       ・.frame-staff に width:100% を書いてしまい、元の width:30% を打ち消して
         出勤スタッフ一覧の枠どうしのスキマが消えた
   ══════════════════════════════════════════════════════════ */

/* ── 枠の色。どの枠でも・どちら側でも同じように当たるようにする ──
   引き先は2通り用意してある：
     ① data-frame="<枠キー>"  … page-spot-tehai.php が出す印。6種すべてに当たる
     ② 元からあるクラス名      … CSSだけ先に上がってもグレーにならないための保険
   ★②が無いと、PHPが古いままのときに --frame-color が見つからず
     タイトルが全部グレーになる（2026-09-12 に本番で出した）。両方残すこと。 */
[data-frame="allday"],
.alldayDataCount,    .alldayStaffList    { --frame-color: var(--allday);    --frame-light: var(--allday-light); --frame-shadow: rgba(44,134,125,0.28); }
[data-frame="morning"],
.morningDataCount,   .morningStaffList   { --frame-color: var(--morning);   --frame-light: var(--morning-light); --frame-shadow: rgba(30,144,255,0.28); }
[data-frame="afternoon"],
.afternoonDataCount, .afternoonStaffList { --frame-color: var(--afternoon); --frame-light: var(--afternoon-light); --frame-shadow: rgba(255,140,0,0.28); }
[data-frame="evening"],
.eveningDataCount,   .eveningStaffList   { --frame-color: var(--evening);   --frame-light: var(--evening-light); --frame-shadow: rgba(217,72,28,0.28); }
[data-frame="night"],
.nightDataCount,     .nightStaffList     { --frame-color: var(--night);     --frame-light: var(--night-light); --frame-shadow: rgba(139,0,139,0.28); }
[data-frame="midnight"],
.midnightDataCount,  .midnightStaffList  { --frame-color: var(--midnight);  --frame-light: var(--midnight-light); --frame-shadow: rgba(31,42,90,0.28); }

/* ══════════════════════════════════════════════════════════
   枠のタイトル（色付きの帯）

   ★案件一覧と出勤スタッフ一覧で**まったく同じ見た目**にする。
     左右で対になっていることを、見ただけで分かるようにするため（マサさんのこだわり）。
     片側だけ変えないこと。触るならこの1か所を触る。
   ══════════════════════════════════════════════════════════ */
.frame-count h4,
.frame-staff h4 {
    height: 25px;
    width: 100%;
    margin: 0 auto;
    /* 縦も横も真ん中に置く。高さを決め打ちしているので、
       文字を小さくしたとき（枠が4つ以上のとき）に上へ寄って見えるのを防ぐ。 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--frame-color, #666);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════════════════════
   枠の列の幅とスキマ

   枠どうしの間のスキマは**意味を持たせて空けてある**（列の切れ目を見せる）。
   幅は「(全体 − スキマの合計) ÷ 枠の数」。枠の数は HTML が --frames で渡す。
   3枠・スキマ5% なら 30% ちょうどで、今までの見た目と1pxも変わらない。
   入れ物は justify-content: space-between なので、余った 10% が
   2つの隙間に 5% ずつ配られる＝ここで指定したスキマになる。
   ══════════════════════════════════════════════════════════ */
.projectList-DataCount,
.staffList {
    --frames: 3;
    --frame-gap: 5%;
}
/* 枠が4つ以上：横幅は変えずにスキマを詰めて中身を優先する（マサさんの原則） */
.projectList-DataCount.is-many,
.staffList.is-many {
    --frame-gap: 2.5%;
}

.frame-count,
.frame-staff {
    width: calc((100% - (var(--frames) - 1) * var(--frame-gap)) / var(--frames));
    text-align: center;
}

.frame-count p {
    height: 20px;
    font-size: 14px;
    margin: 5px 0;
    color: #333;
}
.frame-staff p {
    height: 20px;
    font-size: 14px;
    margin: 5px 0;
    color: #333;
}

/* 枠が4つ以上のときだけ、文字を詰める（幅とスキマは上の計算に任せる） */
.projectList-DataCount.is-many .frame-count h4 { font-size: 13px; }
.projectList-DataCount.is-many .frame-count p  { font-size: 12px; white-space: nowrap; }
.staffList.is-many .frame-staff h4 { font-size: 13px; }
.staffList.is-many .frame-staff p  { font-size: 12px; white-space: nowrap; }

/* 枠ごとの札の色。
   既存3枠は #morningStaffList li のようなIDの規則（重みが上）が勝つので見た目は変わらない。
   終日・夕方・深夜のようにIDの規則が無い枠だけ、ここの色が当たる。
   これが無いと、白い文字が白い地に乗って札が見えなくなる（2026-09-12 に見つけた）。
   割当て済（.assigned）は !important で灰色になるので、ここでは上書きされない。 */
.frame-staff li.staff-item {
    background-color: var(--frame-color, #666);
    color: #fff;
    border-radius: var(--name-radius, 5px);
    font-weight: 600;
    box-shadow: 0 2px 6px var(--frame-shadow, rgba(0,0,0,0.25));
}

/* 枠が4つ以上のとき、札が列からはみ出すのを止める。
   右端の出勤可否の色チップ（.staff-marks）を箱の中に残し、あふれるぶんは名前側を切る。
   ★2026-09-12：ここは元々「右端の削除ボタン（×）が隠れるのを止める」と書いてあった。
     削除ボタンは廃止（右クリック／長押しへ移した）ので、その理由はもう無い。
     指定そのものは今も要る（札の右端に色チップが居るのは変わらないため）ので、理由だけ書き直した。
   .is-many のときだけなので、3枠の会社は1pxも動かない。
   width ではなく max-width なのは、スマホ（列が全幅になる場所）で札を膨らませないため。 */
.staffList.is-many .frame-staff li.staff-item {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

/* ── マスターへの提案の札（姉妹ページのリンクに付く・2026-09-14） ── */
.report-back-btn .suggest-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #e67e22; color: #fff; font-size: 11px; line-height: 18px; text-align: center; vertical-align: 1px; }

/* ── スクロールバーの見た目（2026-09-14）：枠が多いときの出勤一覧 ──
   細くて角丸、触っている間だけ濃く。標準の scrollbar-width / scrollbar-color だけで書く
   （Chrome 121 以降は ::-webkit-scrollbar と併用すると標準が勝つので、標準にそろえる。Safari は元の細い overlay のまま） */
.avail-body.is-many { scrollbar-width: thin; scrollbar-color: rgba(44, 62, 80, .32) transparent; }
.avail-body.is-many:hover { scrollbar-color: rgba(44, 62, 80, .58) transparent; }

/* ── 保存の衝突（2026-09-14）── */
.confirm-modal.conflict-modal { max-width: 620px; width: calc(100% - 32px); text-align: left; }
.conflict-title { font-size: 16px; font-weight: 700; color: #c0392b; margin-bottom: 8px; }
.conflict-lead { font-size: 13px; color: #333; line-height: 1.7; margin: 0 0 10px; }
.conflict-sec { font-size: 12px; font-weight: 700; color: #6b7684; margin: 12px 0 4px; }
.conflict-log { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow: auto; border: 1px solid #e3e8ee; border-radius: 6px; scrollbar-width: thin; }
.conflict-log li { font-size: 12px; padding: 5px 8px; border-bottom: 1px solid #eef1f5; }
.conflict-log li:last-child { border-bottom: none; }
.conflict-when { color: #8a94a6; margin-right: 6px; font-variant-numeric: tabular-nums; }
.conflict-dev { color: #2980b9; margin-right: 6px; }
.conflict-diff { font-size: 12px; line-height: 1.6; background: #f6f8fa; border: 1px solid #e3e8ee; border-radius: 6px; padding: 8px 10px; max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; scrollbar-width: thin; font-family: inherit; }
.conflict-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.conflict-btn { border: none; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.conflict-btn--reload { background: #2c6fad; color: #fff; }
.conflict-btn--force { background: #fff; color: #c0392b; border: 1px solid #c0392b; }
.conflict-btn--close { background: #eef1f5; color: #555; margin-left: auto; }
/* 開いている間の見張りの帯 */
.tehai-stale-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10050; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff3cd; color: #7a5200; border-bottom: 1px solid #f0d27a; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.tehai-stale-bar[hidden] { display: none; }
.tehai-stale-text { flex: 1; min-width: 0; }
.tehai-stale-reload { border: none; border-radius: 6px; background: #2c6fad; color: #fff; padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tehai-stale-close { border: none; background: none; color: #7a5200; font-size: 18px; cursor: pointer; padding: 0 4px; }
@media (max-width: 660px) { .conflict-btn--close { margin-left: 0; } }

/* ══════════════════════════════════════════════════════════════
   ボタン配置の見直し（2026-09-15）
   ・保存・出力：画面下の固定バー（PC は右の縦置きも選べる）。保存と出力は同じ高さ・同じ幅
   ・未保存の印：保存ボタンの中に横並びの小さな印
   ・職人手配系3本：畳める箱（details）。見出しに直近の結果
   ══════════════════════════════════════════════════════════════ */
.tehai-app-page { padding-bottom: 104px; }   /* バーの分だけ足元を空ける（下のページ移動や記録が隠れないように） */

.tehai-dockbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-top: 1px solid rgba(30,58,95,0.14);
    box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    margin: 0; gap: 0; flex-direction: row;               /* .action-row-save の縦積みを打ち消す */
    transition: transform .22s ease;
}
.tehai-dockbar .dockbar-inner {
    max-width: 76vw; margin: 0 auto; width: 100%;
    display: flex; align-items: stretch; gap: 10px;
}
.tehai-app-page .tehai-dockbar .saveButton,
.tehai-app-page .tehai-dockbar .sendEmail {
    flex: 1 1 0; width: auto; height: 54px; padding: 0 16px; margin: 0;   /* 縦幅はマサさん指定で 54px（2026-09-15） */
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 15px; line-height: 1; white-space: nowrap;
}
/* 出力は白抜き（枠線）、保存は赤の面。役割の差を色で見せる（マサさん選定 2026-09-15） */
.tehai-app-page .tehai-dockbar .sendEmail {
    background: #fff; color: #8a4200; border: 2px solid #b85800; box-shadow: none; font-weight: 700;
}
.tehai-app-page .tehai-dockbar .sendEmail:hover { background: #fff4e8; color: #6a2c00; transform: none; filter: none; box-shadow: none; }
.tehai-app-page .tehai-dockbar .sendEmail:disabled { opacity: .6; }
.tehai-app-page .tehai-dockbar .saveButton { flex-grow: 1.4; }
.tehai-app-page .tehai-dockbar .saveButton.is-dirty { filter: saturate(1.25) brightness(1.06); box-shadow: 0 0 0 3px rgba(192,57,43,0.22), 0 4px 14px rgba(139,26,26,0.32); }
/* 状態の1行：「● 未保存の変更があります（最後の保存 21:05）」「● 保存済み 21:12　変更なし」 */
.tehai-dockbar .dockbar-status {
    display: flex; align-items: center; gap: 7px; min-height: 18px;
    font-size: 12px; line-height: 1.4; color: #5a6b7c; white-space: nowrap;
}
.tehai-dockbar .dockbar-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #1d9e75; flex: 0 0 8px; }
.tehai-dockbar .dockbar-status.is-dirty { color: #8b1a1a; font-weight: 700; }
.tehai-dockbar .dockbar-status.is-dirty .dot { background: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,0.18); animation: dockbar-pulse 1.6s ease-in-out infinite; }
@keyframes dockbar-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
/* 下置き（PC）：状態は左、出力、保存、小ボタンの順 */
.tehai-dockbar .dockbar-status { order: -1; flex: 0 0 auto; min-width: 200px; padding-right: 6px; }
.tehai-dockbar .dockbar-tools { display: flex; flex-direction: column; gap: 4px; }
.tehai-dockbar .dockbar-tools button {
    width: 30px; height: 24px; padding: 0; border: 1px solid rgba(30,58,95,0.16); border-radius: 7px;
    background: #fff; color: #6b7a8a; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.tehai-dockbar .dockbar-tools button:hover { background: #eef2f6; color: #1e3a5f; }
.tehai-dockbar .dockbar-tools .ico { display: block; }
.tehai-dockbar .ico-chev { transition: transform .18s ease; }              /* 下置き：下向き。畳むと上向き */
body.dockbar-folded .tehai-dockbar .ico-chev { transform: rotate(180deg); }
.tehai-dockbar .dockbar-tools .ico-bottom { display: none; }                 /* 置き場所の印：ふだんは「右に置く」図だけ */
/* 取っ手（畳んだとき・スマホで引っ込んだとき）。指でも押せる大きさに（マサさん指摘 2026-09-15） */
.tehai-dockbar .dockbar-handle {
    display: none; position: absolute; left: 50%; top: -38px; transform: translateX(-50%);
    height: 38px; padding: 0 22px 0 16px; border: 1px solid rgba(30,58,95,0.2); border-bottom: none; border-radius: 12px 12px 0 0;
    background: rgba(255,255,255,0.97); color: #1e3a5f; font-size: 13px; font-weight: 700; line-height: 36px; cursor: pointer;
    align-items: center; gap: 10px; box-shadow: 0 -4px 14px rgba(0,0,0,0.08);
}
.tehai-dockbar .dockbar-handle:hover { background: #eef2f6; }
.tehai-dockbar .dockbar-handle span { width: 30px; height: 5px; border-radius: 3px; background: rgba(30,58,95,0.4); }

/* 畳む（PC）：バーを下へ逃がして取っ手だけ残す */
body.dockbar-folded .tehai-dockbar { transform: translateY(100%); box-shadow: none; }
body.dockbar-folded .tehai-dockbar .dockbar-handle { display: inline-flex; }
body.dockbar-folded .tehai-app-page { padding-bottom: 40px; }

/* スマホ：下へスクロール中は引っ込む（未保存のときは JS が引っ込ませない） */
body.dockbar-hidden .tehai-dockbar { transform: translateY(100%); box-shadow: none; }
body.dockbar-hidden .tehai-dockbar .dockbar-handle { display: inline-flex; }

/* 右の縦置き（PC・幅が十分なときだけ効く。狭ければ自動で下端に戻る） */
@media (min-width: 1500px) {
    body.dockbar-right .tehai-dockbar {
        left: auto; right: 12px; bottom: auto; top: 50%; transform: translateY(-50%);
        width: calc(12vw - 24px); min-width: 150px;   /* 中身の右余白（12vw）に収める＝夜間の列に重ならない */
        padding: 10px; border: 1px solid rgba(30,58,95,0.16); border-radius: 14px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    }
    body.dockbar-right .tehai-dockbar .dockbar-inner { flex-direction: column; max-width: none; }
    /* 縦置きのボタンは真四角に近い大きさ（マサさん指定 2026-09-15）。幅に合わせて高さが決まる。文字は折り返してよい */
    body.dockbar-right .tehai-app-page .tehai-dockbar .saveButton,
    body.dockbar-right .tehai-app-page .tehai-dockbar .sendEmail {
        flex: 0 0 auto; height: auto;
        flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 10px 8px;
        line-height: 1.35; white-space: normal; text-align: center;
        word-break: normal; overflow-wrap: anywhere;   /* 日本語はどこでも折り返してよい（keep-all で右にはみ出していた 2026-09-15） */
    }
    /* スマホと同じ縦3段（マサさん選定 2026-09-15）：出力は細い白抜き → 保存は大きく（5:4） → 状態の1行 */
    body.dockbar-right .tehai-app-page .tehai-dockbar .sendEmail  { height: 44px; min-height: 0; font-size: 14px; padding: 0 8px; flex-direction: row; }
    body.dockbar-right .tehai-app-page .tehai-dockbar .saveButton { aspect-ratio: 5 / 4; min-height: 100px; font-size: 19px; }
    body.dockbar-right .tehai-app-page .tehai-dockbar .saveButton .dockbar-label { display: block; width: 100%; text-align: center; }
    body.dockbar-right .tehai-app-page .tehai-dockbar .saveButton .dockbar-label > span { display: block; }   /* 「検討内容を」／「保存する」で折り返す */
    body.dockbar-right .tehai-dockbar .dockbar-status { order: 3; min-width: 0; padding: 2px 2px 0; font-size: 11px; white-space: normal; }
    body.dockbar-right .tehai-dockbar .dockbar-tools { order: 4; }
    body.dockbar-right .tehai-dockbar .dockbar-tools { flex-direction: row; justify-content: flex-end; }
    body.dockbar-right .tehai-dockbar .ico-chev { transform: rotate(-90deg); }          /* 右置き：右向き（右へ畳む） */
    body.dockbar-right.dockbar-folded .tehai-dockbar .ico-chev { transform: rotate(90deg); }
    body.dockbar-right .tehai-dockbar .dockbar-tools .ico-right { display: none; }       /* 右置き中は「下に戻す」図だけ */
    body.dockbar-right .tehai-dockbar .dockbar-tools .ico-bottom { display: block; }
    body.dockbar-right .tehai-app-page { padding-bottom: 70px; }
    /* 右置きで畳む：バーは画面の右外へ。取っ手は画面右端に縦書きで残す（回転は使わない。前はここが崩れていた） */
    body.dockbar-right.dockbar-folded .tehai-dockbar { left: 100%; right: auto; transform: translateY(-50%); box-shadow: none; }
    body.dockbar-right.dockbar-folded .tehai-dockbar .dockbar-handle {
        left: auto; right: 100%; top: 50%; transform: translateY(-50%);
        width: 38px; height: auto; padding: 18px 0 14px; margin: 0;
        writing-mode: vertical-rl; flex-direction: column; line-height: 36px;
        border: 1px solid rgba(30,58,95,0.2); border-right: none; border-radius: 12px 0 0 12px;
        box-shadow: -4px 0 14px rgba(0,0,0,0.08);
    }
    body.dockbar-right.dockbar-folded .tehai-dockbar .dockbar-handle span { width: 5px; height: 30px; }
}
@media (max-width: 1499px) { .tehai-dockbar .dockbar-pos { display: none; } }

/* 職人手配オンラインへ反映する（畳める箱）。見出しは左に紺の帯＋矢印のアイコン、右端に丸い山形（開くと回る）。開くときは中身がふわっと出る */
.tehai-relay {
    margin: 18px 0 0; border: 1px solid rgba(30,58,95,0.16); border-radius: 12px; background: #fff;
    box-shadow: 0 2px 10px rgba(30,58,95,0.06); overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.tehai-relay:hover { border-color: rgba(30,58,95,0.3); }
.tehai-relay[open] { box-shadow: 0 6px 22px rgba(30,58,95,0.12); }
.tehai-relay .relay-summary {
    position: relative; list-style: none; display: flex; align-items: center; gap: 12px; padding: 13px 14px 13px 18px; cursor: pointer;
    font-size: 15px; font-weight: 700; color: #1e3a5f; user-select: none;
    background: linear-gradient(90deg, rgba(30,58,95,0.06) 0%, rgba(30,58,95,0) 60%);
    transition: background .18s ease;
}
.tehai-relay .relay-summary::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #1e3a5f, #2f5d8f); }
.tehai-relay .relay-summary:hover { background: linear-gradient(90deg, rgba(30,58,95,0.10) 0%, rgba(30,58,95,0.02) 60%); }
.tehai-relay[open] .relay-summary { border-bottom: 1px solid rgba(30,58,95,0.12); }
.tehai-relay .relay-summary::-webkit-details-marker { display: none; }
.tehai-relay .relay-icon { display: inline-flex; width: 32px; height: 32px; border-radius: 9px; align-items: center; justify-content: center; background: #1e3a5f; color: #fff; flex: 0 0 32px; box-shadow: 0 2px 6px rgba(30,58,95,0.3); }
.tehai-relay .relay-chev {
    display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; flex: 0 0 28px;
    border: 1px solid rgba(30,58,95,0.2); color: #1e3a5f; background: #fff; transition: transform .22s ease, background .18s ease;
}
.tehai-relay .relay-summary:hover .relay-chev { background: #eef2f6; }
.tehai-relay[open] .relay-chev { transform: rotate(180deg); }
.tehai-relay .relay-title small { margin-left: 8px; font-size: 11px; font-weight: 600; color: #fff; background: #1e3a5f; padding: 2px 8px; border-radius: 999px; vertical-align: 1px; }
.tehai-relay .relay-status { margin-left: auto; font-size: 12px; font-weight: 600; color: #5a6b7c; text-align: right; }
.tehai-relay .relay-status b { color: #1d9e75; font-weight: 700; }
.tehai-relay .relay-body { padding: 16px 14px 16px; counter-reset: relay; background: #fbfcfe; }   /* 上を空けて ❶ が見出しに被らないように（2026-09-15） */
.tehai-relay[open] .relay-body { animation: relay-open .22s ease both; }
@keyframes relay-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tehai-relay .relay-body .action-row-writeback { position: relative; margin-top: 12px; counter-increment: relay; }
.tehai-relay .relay-body .action-row-writeback::before {
    content: counter(relay); position: absolute; left: -6px; top: -8px; z-index: 1;
    width: 22px; height: 22px; border-radius: 50%; background: #1e3a5f; color: #fff;
    font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.tehai-relay .relay-body .action-row-writeback:first-child { margin-top: 6px; }
/* 番号の色はそのボタンの枠の色に合わせる（マサさん指定 2026-09-15）：自動割当＝赤、一斉送信＝オレンジ、登録完了＝紺 */
.tehai-relay .relay-body .action-row-writeback:has(.writeback-btn)::before { background: #c0392b; }
.tehai-relay .relay-body .action-row-writeback:has(.writeback-btn--mail)::before { background: #b45309; }
.tehai-relay .relay-body .action-row-writeback:has(.writeback-btn--notice)::before { background: #1e3a5f; }