.staffworks-app,
.staffworks-public {
    --sw-bg: #f7f7f4;
    --sw-panel: #ffffff;
    --sw-line: #d9ded6;
    /* 入力欄の枠は薄すぎないように、罫線より少し濃いめの専用色。 */
    --sw-field-line: #a9b2a8;
    --sw-text: #17211b;
    --sw-muted: #667067;
    --sw-accent: #146c53;
    --sw-accent-2: #f2b84b;
    --sw-subtle: #eef3ee;
    --sw-subtle-2: #f7f9f7;
    --sw-accent-soft: #e8f3ee;
    --sw-accent-soft-2: #edf7f2;
    --sw-accent-line: #9ccdb5;
    --sw-accent-text: #0e6541;
    color: var(--sw-text);
    font-family: var(--sw-font, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif) !important;
    font-size: var(--sw-font-size, 16px) !important;
    line-height: 1.55 !important;
}

.staffworks-app *,
.staffworks-public * {
    box-sizing: border-box;
    font-family: inherit !important;
    line-height: inherit !important;
}

.staffworks-app h1,
.staffworks-app h2,
.staffworks-app h3,
.staffworks-app h4,
.staffworks-app h5,
.staffworks-app h6,
.staffworks-public h1,
.staffworks-public h2,
.staffworks-public h3,
.staffworks-public h4,
.staffworks-public h5,
.staffworks-public h6 {
    line-height: 1.35 !important;
}

.staffworks-app button,
.staffworks-app input,
.staffworks-app select,
.staffworks-app textarea,
.staffworks-app label,
.staffworks-public button,
.staffworks-public input,
.staffworks-public select,
.staffworks-public textarea,
.staffworks-public label {
    line-height: 1.4 !important;
}

.staffworks-app table,
.staffworks-app th,
.staffworks-app td,
.staffworks-public table,
.staffworks-public th,
.staffworks-public td {
    line-height: 1.45 !important;
}

.staffworks-app small,
.staffworks-public small {
    line-height: 1.4 !important;
}
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6,
.post_content h1, .post_content h2, .post_content h3, .post_content h4, .post_content h5, .post_content h6,
.post-content .staffworks-app p,
.post-content .staffworks-public p,
.post-content .staffworks-app dt,
.post-content .staffworks-public dt,
.post-content .staffworks-app dd,
.post-content .staffworks-public dd,
.post-content .staffworks-app th,
.post-content .staffworks-public th,
.post-content .staffworks-app td,
.post-content .staffworks-public td,
.post_content dt,
.post_content dd {
    /* テーマが見出しに付ける margin（例 0 0 15px）や clear:both で、見出し下に余分な余白が出たり
       配置が崩れたりするのを打ち消す。余白は各コンポーネント側（.staffworks-panel-heading 等）で持たせる。 */
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

.staffworks-topbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 6px;
    margin: 0 0 12px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--sw-bg);
    padding: 8px 0;
}

/* シフトの「カレンダー／一覧表」切替も連絡ルームと同じ nav-tabs 型（全幅均等割） */
.staffworks-segmented {
    display: flex;
    gap: 0;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--sw-line);
}

.staffworks-segmented button {
    flex: 1 1 0;
    min-height: 40px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--sw-muted);
    padding: 8px 6px;
    margin-bottom: -1px;
    font-weight: 700;
    cursor: pointer;
}

/* アクティブは「背景の薄い色＋文字色＋下線」で、切り替わりがはっきり分かるようにする */
.staffworks-segmented button.is-active,
.staffworks-room-tab.is-active {
    background: var(--sw-accent-soft);
    color: var(--sw-accent-text);
    border-bottom-color: var(--sw-accent);
}

/* 関係者ページの切替（マイページ／管理者ページ）。メニュータブの上に置く全幅2分割の小型スイッチ。
   マネージャー（管理権限あり・オーナー以外）にだけ表示する。 */
.staffworks-page-switch {
    display: flex;
    gap: 4px;
    margin: 0 0 10px;
    padding: 3px;
    background: var(--sw-accent-soft);
    border-radius: 10px;
}
.staffworks-page-switch-btn {
    flex: 1 1 0;
    text-align: center;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sw-muted);
    background: transparent;
    border-radius: 8px;
    text-decoration: none;
    line-height: 1.5;
}
.staffworks-page-switch-btn.is-active {
    background: var(--sw-accent);
    color: #fff;
    cursor: default;
}

.staffworks-tab,
.staffworks-app button,
.staffworks-app input,
.staffworks-app select,
.staffworks-app textarea {
    font: inherit;
    font-size: 16px;
}

.staffworks-tab,
.staffworks-app button {
    min-height: 44px;
    border: 1px solid var(--sw-line);
    background: var(--sw-panel);
    color: var(--sw-text);
    border-radius: 8px;
    padding: 9px 12px;
    font-weight: 700;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

/* ホバー演出はマウス等のホバー可能環境だけに限定する。
   タッチ端末では「最初のタップで :hover が貼り付く」現象を防ぐ（通知先ピルが押しただけで選択風に見える不具合の対策）。 */
@media (hover: hover) {
    .staffworks-app button:not(:disabled):hover,
    .staffworks-button-link:hover {
        border-color: var(--sw-accent);
        background: var(--sw-accent-soft);
        color: var(--sw-accent-text);
    }

    .staffworks-app button.staffworks-primary:not(:disabled):hover,
    .staffworks-app button.staffworks-approve:not(:disabled):hover,
    .staffworks-app button.staffworks-reject:not(:disabled):hover,
    .staffworks-app button.staffworks-publish:not(:disabled):hover {
        filter: brightness(0.88);
    }
}

.staffworks-app button:not(:disabled):active {
    transform: translateY(1px);
}

.staffworks-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    padding: 9px 12px;
    background: var(--sw-panel);
    color: var(--sw-text);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.staffworks-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 12px;
    line-height: 1 !important;
    padding: 0 5px;
}

/* 未承認（承認待ち）シフトの件数バッジ。未読（赤）と区別できるよう、
   未承認シフトの表示（--sw-accent-2）と同系の黄色にする（管理者のシフトタブのみ）。 */
.staffworks-badge-pending {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--sw-accent-2, #f2b84b);
    color: #4a3200;
    font-size: 12px;
    line-height: 1 !important;
    padding: 0 5px;
}

.staffworks-tab.is-active,
.staffworks-primary {
    background: var(--sw-accent) !important;
    border-color: var(--sw-accent) !important;
    color: #fff !important;
}

/* タブをアンカー（管理画面のプロフィール=マイページへのリンク）にした場合、
   テーマの a:link / a:visited 配色に引っ張られないよう、文字・アイコン色を他のタブに揃える。 */
.staffworks-app a.staffworks-tab,
.staffworks-app a.staffworks-tab:link,
.staffworks-app a.staffworks-tab:visited,
.staffworks-app a.staffworks-tab:hover,
.staffworks-app a.staffworks-tab:focus {
    color: var(--sw-text);
}

.staffworks-panel {
    display: none;
}

.staffworks-panel.is-active {
    display: block;
}

.staffworks-toolbar,
.staffworks-monthnav,
.staffworks-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.staffworks-admin-quicktools {
    justify-content: flex-end;
    margin: 8px 0 12px;
}

.staffworks-actions {
    margin: 8px 0 0;
}

.staffworks-monthnav {
    justify-content: center;
    /* ツールバー内ではシフト追加ボタンと縦位置がそろうよう、下マージンを持たせない。 */
    margin-bottom: 0;
}

.staffworks-iconbtn {
    width: 44px;
    padding: 0;
    /* アイコン（SVG）をベースラインではなく中央に置く。✗のズレ防止。 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1 !important;
    /* 閉じる「✗」などのアイコンボタンは、薄い枠だと分かりにくいので濃いめの枠＋淡い背景で目立たせる。 */
    border-color: var(--sw-field-line);
    background: var(--sw-subtle);
    color: var(--sw-text);
    font-weight: 800;
}

.staffworks-iconbtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.staffworks-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--sw-panel);
}

.staffworks-weekday,
.staffworks-day {
    min-width: 0;
    border-right: 1px solid var(--sw-line);
    border-bottom: 1px solid var(--sw-line);
}

.staffworks-weekday {
    padding: 8px 2px;
    text-align: center;
    background: var(--sw-subtle);
    color: var(--sw-muted);
    font-size: 12px;
    font-weight: 800;
}

.staffworks-day {
    min-height: 92px;
    padding: 5px;
    background: var(--sw-panel);
}

.staffworks-day {
    cursor: pointer;
}

.staffworks-day:focus,
.staffworks-day:hover {
    outline: 2px solid var(--sw-accent);
    outline-offset: -2px;
}

.staffworks-day.is-outside {
    background: #f4f4f1;
    color: #8b938d;
}

.staffworks-calendar > .staffworks-weekday:first-child {
    background: #f8e8e8;
    color: #a33a3a;
}

.staffworks-day.is-sunday,
.staffworks-day.is-holiday,
.staffworks-day.is-outside.is-sunday,
.staffworks-day.is-outside.is-holiday {
    background: #fff0f0;
}

.staffworks-day.is-sunday .staffworks-date,
.staffworks-day.is-holiday .staffworks-date {
    color: #b23535;
}

.staffworks-day.is-closed,
.staffworks-day.is-outside.is-closed {
    background: #fff7d6;
}

.staffworks-day.is-closed .staffworks-date {
    color: #806300;
}

/* 本日：淡い黄色＋アクセント枠で、休業日（淡黄）や日曜・祝日（淡赤）と区別して目立たせる。 */
.staffworks-day.is-today {
    background: #fdf5c8;
    box-shadow: inset 0 0 0 2px var(--sw-accent-2);
}

.staffworks-shift-list-day.is-today {
    background: #fdf5c8;
    box-shadow: inset 0 0 0 2px var(--sw-accent-2);
}

/* 過ぎた日（前日以前）は薄いグレーにして選択不可であることを示す。 */
.staffworks-calendar .staffworks-day.is-past {
    background: #ededed;
    cursor: default;
}

.staffworks-calendar .staffworks-day.is-past:hover,
.staffworks-calendar .staffworks-day.is-past:focus {
    outline: none;
}

.staffworks-day.is-past .staffworks-date {
    color: #a2a8ac;
}

/* 過去のシフト（前日以前）は閲覧・チャットのみ。少し淡く見せるが、タップは可能。 */
.staffworks-event.is-past,
.staffworks-shift-list-event.is-past {
    opacity: 0.78;
    cursor: pointer;
}

.staffworks-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
}

.staffworks-event {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-left: 3px solid var(--sw-accent);
    background: var(--sw-accent-soft-2);
    border-radius: 6px;
    padding: 4px 5px;
    margin: 3px 0;
    font-size: 12px;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}

.staffworks-event-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-width: 0;
}

.staffworks-event-head b {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.staffworks-shift-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}

.staffworks-shift-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 2px 6px;
    background: #fff1c7;
    color: #7a5700;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.staffworks-shift-status.is-approved {
    background: #dff3e7;
    color: #12623f;
}

.staffworks-visibility-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 1px 5px;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.3 !important;
    white-space: nowrap;
}

.staffworks-visibility-status.is-public {
    border-color: #79b89b;
    background: #e3f5eb;
    color: #0e6541;
}

.staffworks-visibility-status.is-private {
    border-color: #aeb6bf;
    background: #f0f2f4;
    color: #4e5964;
}

.staffworks-event.is-public,
.staffworks-shift-list-event.is-public {
    box-shadow: inset 0 0 0 1px #9ccdb5;
}

.staffworks-event.is-private,
.staffworks-shift-list-event.is-private {
    border-right: 1px dashed #9ca6b0;
    box-shadow: inset 0 0 0 1px #d1d6db;
}

.staffworks-notification-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d62828;
    box-shadow: 0 0 0 2px #fff;
}

.staffworks-event.is-pending {
    border-left-color: var(--sw-accent-2);
    background: #fff7df;
}

.staffworks-event:not(.can-edit) {
    cursor: default;
}

.staffworks-event small {
    display: block;
    color: var(--sw-muted);
}

.staffworks-shift-table {
    display: grid;
    border-top: 1px solid var(--sw-line);
}

.staffworks-shift-list-day {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 5px;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--sw-line);
    background: var(--sw-panel);
    cursor: pointer;
}

.staffworks-shift-list-day:hover,
.staffworks-shift-list-day:focus {
    background: var(--sw-accent-soft);
    outline: 2px solid var(--sw-accent);
    outline-offset: -2px;
}

.staffworks-shift-list-date {
    align-self: start;
    padding: 6px 4px;
}

.staffworks-shift-list-weekday {
    margin-left: 3px;
    font-size: 0.9em;
}

.staffworks-shift-list-date small {
    display: block;
    margin-top: 3px;
    color: #a33a3a;
    font-size: 12px;
}

.staffworks-shift-list-day.is-sunday,
.staffworks-shift-list-day.is-holiday {
    background: #fff5f5;
}

.staffworks-shift-list-day.is-sunday .staffworks-shift-list-date strong,
.staffworks-shift-list-day.is-holiday .staffworks-shift-list-date strong {
    color: #b23535;
}

.staffworks-shift-list-day.is-closed {
    background: #fff7d6;
}

.staffworks-shift-list-day.is-closed .staffworks-shift-list-date strong {
    color: #806300;
}

.staffworks-shift-list-day.is-sunday:hover,
.staffworks-shift-list-day.is-sunday:focus,
.staffworks-shift-list-day.is-holiday:hover,
.staffworks-shift-list-day.is-holiday:focus {
    background: #fff5f5;
}

.staffworks-shift-list-day.is-closed:hover,
.staffworks-shift-list-day.is-closed:focus {
    background: #fff7d6;
}

/* 過ぎた日（前日以前）は薄いグレーにして選択不可であることを示す。 */
.staffworks-shift-list-day.is-past {
    background: #ededed;
    cursor: default;
}

.staffworks-shift-list-day.is-past:hover,
.staffworks-shift-list-day.is-past:focus {
    outline: none;
    background: #ededed;
}

.staffworks-closed-label {
    color: #806300 !important;
}

.staffworks-shift-list-events {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.staffworks-shift-list-event {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 2px 8px;
    align-items: center;
    width: auto;
    min-height: 38px !important;
    padding: 4px 8px !important;
    text-align: left;
    cursor: grab !important;
}

.staffworks-shift-list-event span:last-child {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--sw-muted);
}

.staffworks-shift-list-event .staffworks-shift-status {
    align-self: center;
}

.staffworks-shift-list-event .staffworks-shift-badges {
    justify-self: end;
}

.staffworks-shift-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 12px;
    margin: 6px 0 8px;
    color: var(--sw-muted);
    font-size: 11px;
    line-height: 1.4 !important;
}

.staffworks-shift-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 公開設定が「公開／非公開」に固定されているときは、各シフトの公開pillと凡例を隠す。 */
.staffworks-app.sw-visibility-fixed .staffworks-visibility-status,
.staffworks-app.sw-visibility-fixed .staffworks-shift-legend {
    display: none !important;
}

.staffworks-shift-list-empty {
    display: flex;
    align-items: center;
    min-height: 32px;
    color: var(--sw-muted);
}

.staffworks-modal[hidden] {
    display: none;
}

.staffworks-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 18px;
}

.staffworks-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 12, 0.42);
}

.staffworks-modal-box {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-panel);
    padding: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.staffworks-public-status {
    min-width: 0;
    margin: 0 0 4px;
    border: 0;
    padding: 0;
}

.staffworks-public-status legend {
    margin: 0 0 5px;
    padding: 0;
    color: var(--sw-muted);
    font-size: 13px;
    font-weight: 800;
}

.staffworks-choice-segment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 44px;
    overflow: hidden;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-panel);
}

.staffworks-choice-segment label {
    display: block;
    min-width: 0;
    color: var(--sw-muted);
    cursor: pointer;
}

.staffworks-choice-segment label + label {
    border-left: 1px solid var(--sw-line);
}

.staffworks-choice-segment input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    opacity: 0;
    pointer-events: none;
}

.staffworks-choice-segment span {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 800;
}

.staffworks-choice-segment input:focus-visible + span {
    outline: 2px solid rgba(20, 108, 83, 0.35);
    outline-offset: -2px;
}

.staffworks-choice-segment input:checked + span {
    background: var(--sw-accent-soft);
    color: #39433d;
}

.staffworks-choice-segment input[value="public"]:checked + span {
    background: var(--sw-accent);
    color: #fff;
}

.staffworks-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.staffworks-modal-head-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}

.staffworks-modal-head-tools button:not(.staffworks-iconbtn) {
    min-height: 32px;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}

/* チャットの「既読にする」：✗の左に並ぶ控えめな小ボタン。押すと未読バッジをまとめてリセットする。
   （サイズは .staffworks-modal-head-tools button:not(.staffworks-iconbtn) の指定で小さくなる） */
.staffworks-app .staffworks-markread-btn {
    background: transparent;
    border-color: var(--sw-line);
    color: var(--sw-muted);
    font-weight: 600;
    white-space: nowrap;
    /* ✗（閉じる）ボタンと近接しすぎないよう間隔をあける（ツールの gap:5px と合わせて約15px）。 */
    margin-right: 10px;
}

@media (hover: hover) {
    .staffworks-app .staffworks-markread-btn:not(:disabled):hover {
        border-color: var(--sw-accent);
        background: var(--sw-accent-soft);
        color: var(--sw-accent-text);
    }
}

.staffworks-app .staffworks-markread-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* 過去の未承認シフト詳細の「既読にする」トグル。状態（未承認）の右に小さく置く控えめなボタン。
   押し下げ（is-on）でアクセント色になり、通知（未承認）の対象から外れていることを示す。 */
.staffworks-app .staffworks-ack-btn {
    margin-left: 10px;
    min-height: 26px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    border-color: var(--sw-line);
    color: var(--sw-muted);
    vertical-align: middle;
}

.staffworks-app .staffworks-ack-btn.is-on {
    background: var(--sw-accent-soft);
    border-color: var(--sw-accent);
    color: var(--sw-accent-text);
}

@media (hover: hover) {
    .staffworks-app .staffworks-ack-btn:not(:disabled):hover {
        border-color: var(--sw-accent);
    }
}

.staffworks-app .staffworks-ack-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* シフト申請の追加情報チェック（チャットの直上に置く）。 */
.staffworks-app .staffworks-shift-flags {
    margin: 8px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--sw-line);
    border-radius: 10px;
    background: var(--sw-subtle-2);
}

.staffworks-app .staffworks-shift-flags-title {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sw-muted);
}

.staffworks-app .staffworks-shift-flags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.staffworks-app .staffworks-shift-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.staffworks-app .staffworks-shift-flag input {
    width: auto;
    min-height: 0;
    margin: 0;
}

/* シフトのカレンダー・一覧で、スタッフ名の横に出す追加情報マーク（頭1文字を丸で囲む）。
   テーマが i 要素に付ける行間・余白（.post_content i など）に負けて縦に伸びないよう、
   .staffworks-app 接頭辞で詳細度を上げ、縦横 16px を min/max で固定する。 */
.staffworks-app .staffworks-flag-marks,
.staffworks-public .staffworks-flag-marks {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}

.staffworks-app .staffworks-flag-mark,
.staffworks-public .staffworks-flag-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--sw-accent);
    color: var(--sw-accent-text);
    background: var(--sw-accent-soft);
    font-size: 10px;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
}

.staffworks-danger-link {
    border-color: #e2bcbc !important;
    color: #9d2929 !important;
}

.staffworks-danger-link:hover {
    background: #fff0f0 !important;
    border-color: #c94b4b !important;
}

.staffworks-modal-head h3 {
    margin: 0;
    font-size: 18px;
}

@media (max-width: 520px) {
    .staffworks-modal-head {
        align-items: flex-start;
    }

    .staffworks-modal-head-tools {
        max-width: 70%;
    }

    .staffworks-modal-head-tools button:not(.staffworks-iconbtn) {
        min-height: 30px;
        padding: 3px 7px;
        font-size: 11px;
    }
}

.staffworks-form label {
    display: grid;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
    color: var(--sw-muted);
}

.staffworks-form {
    display: grid;
    gap: 8px;
}

.staffworks-form [data-reject-reason] {
    min-height: 40px;
    border-color: #d89a9a;
    background: #fffafa;
}

.staffworks-modal-open {
    overflow: hidden;
}

.staffworks-card {
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-panel);
    padding: 14px;
    margin: 10px 0;
    box-shadow: 0 1px 2px rgba(20, 40, 30, 0.04);
}

.staffworks-card h3 {
    margin: 0 0 12px;
    font-size: 17px;
}

.staffworks-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0;
}

/* シフト入力欄（管理者）。スマホでも「スタッフ｜日付」「出勤｜退勤」の2列×2段を維持する。 */
.staffworks-shift-fields-admin {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0 4px;
}

/* シフト入力欄（スタッフ・マネージャー）。日付・出勤・退勤を横3列に並べる。 */
.staffworks-shift-times3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0 4px;
}

/* スタッフ管理の入力欄。スマホでも2列を維持し、is-full の項目だけ全幅にする。 */
.staffworks-staff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0;
}

.staffworks-staff-grid > .is-full {
    grid-column: 1 / -1;
}

/* 報酬（ホステス等）源泉の詳細設定・調整（折りたたみ）。普段は閉じて目立たせない。 */
.staffworks-reward-defaults {
    margin: 8px 0;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-subtle);
    padding: 0 10px;
}

.staffworks-reward-defaults > summary {
    cursor: pointer;
    padding: 10px 0;
    font-size: 13px;
    color: var(--sw-muted);
}

.staffworks-reward-defaults[open] > summary {
    color: var(--sw-text);
}

.staffworks-payroll-reward-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 8px;
}

.staffworks-reward-note {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--sw-muted);
}

/* 月給制：スタッフ編集の「月給・入社日・退社日」欄（時給制のときは非表示）。 */
.staffworks-app .staffworks-monthly-fields {
    margin-top: 4px;
    padding: 10px;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-subtle);
}
.staffworks-app .staffworks-field-note {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--sw-muted);
}

/* 給与明細：入退社月の「日割り減算」入力欄。 */
.staffworks-app .staffworks-payroll-salary-deduct {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-subtle);
}
.staffworks-app .staffworks-payroll-salary-deduct h4 {
    margin: 0 0 6px;
    font-size: 13px;
}
/* 給与明細の合計欄に出す「日割り計算あり」の備考行。 */
.staffworks-app .staffworks-payroll-proration strong {
    color: var(--sw-muted);
    font-weight: 700;
}

.staffworks-staff-add {
    margin: 0 0 14px;
    border: 1px solid var(--sw-line);
    border-radius: 10px;
    background: var(--sw-panel);
    padding: 0 12px;
}

.staffworks-staff-add > summary {
    cursor: pointer;
    padding: 12px 0;
    font-weight: 700;
}

.staffworks-staff-add[open] > summary {
    border-bottom: 1px solid var(--sw-line);
    margin-bottom: 8px;
}

.staffworks-staff-add .staffworks-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
}

.staffworks-staff-add .staffworks-check input {
    width: auto;
}

.staffworks-app input,
.staffworks-app select,
.staffworks-app textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--sw-field-line);
    border-radius: 8px;
    padding: 9px 10px;
    background: var(--sw-panel);
    color: var(--sw-text);
    font-size: 16px;
    line-height: 1.45 !important;
}

/* プルダウン（select）であることが分かるよう、右端に下向き矢印を表示する。 */
.staffworks-app select,
.staffworks-public select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 16px 16px;
}

/* iPhone（WebKit）の日付・時刻入力は、システム標準の見た目のままだと font-size 指定が
   無視されて小さく表示される。appearance を外して通常の入力欄として描画させたうえで、
   値の表示部（date-and-time-value）に他の入力欄・選択欄と同じ文字サイズを明示する。
   （タップで開く日付ピッカー自体の動作は変わらない。） */
.staffworks-app input[type="date"],
.staffworks-app input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
}

.staffworks-app input[type="date"]::-webkit-date-and-time-value,
.staffworks-app input[type="time"]::-webkit-date-and-time-value {
    font-size: 16px;
    line-height: 1.45;
    text-align: left;
    margin: 0;
}

.staffworks-app input:focus,
.staffworks-app select:focus,
.staffworks-app textarea:focus {
    border-color: var(--sw-accent);
    outline: 2px solid rgba(20, 108, 83, 0.18);
    outline-offset: 1px;
}

.staffworks-app textarea {
    min-height: 84px;
}

.staffworks-clock {
    margin: 12px 0 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.staffworks-clock-hm {
    font-size: 56px;
    font-weight: 900;
}

.staffworks-clock-sec {
    margin-left: 10px;
    font-size: 28px;
    font-weight: normal;
}

.staffworks-punch-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 14px auto;
}

.staffworks-punch-actions button {
    width: 100%;
    min-height: 104px;
    font-size: 50px;
    line-height: 1 !important;
}

.staffworks-punch-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.38;
    filter: grayscale(1);
    background: #d6d9d6 !important;
    border-color: #c5c9c5 !important;
    color: #687068 !important;
}

.staffworks-app p.staffworks-station-notice,
.staffworks-public p.staffworks-station-notice {
    text-align: center;
    color: var(--sw-muted);
    /* .staffworks-app/.staffworks-public の font-size(!important) に勝てるよう指定。 */
    font-size: 14px !important;
}

/* 認証OK／注意の色分け。 */
.staffworks-station-notice.is-ok {
    color: #1f7a44;
    font-weight: 700;
}

.staffworks-station-notice.is-alert {
    color: #b83232;
    font-weight: 700;
}

/* タイムカード一覧の小ラベル（店舗名・位置情報なし）。 */
.staffworks-chip {
    display: inline-block;
    margin: 0 4px 0 0;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--sw-line);
    color: var(--sw-muted);
    font-size: 12px;
    font-weight: 700;
}

.staffworks-chip.is-warn {
    background: #fbe6e6;
    color: #b83232;
}

/* スタッフ自身の勤務実績（打刻） */
.staffworks-worklog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
}

.staffworks-worklog-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--sw-text);
}

.staffworks-worklog-total {
    margin: 0;
    font-size: 13px;
    color: var(--sw-muted);
}

.staffworks-worklog-total strong {
    margin-left: 6px;
    font-size: 17px;
    color: var(--sw-accent-text);
}

.staffworks-worklog-basis {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--sw-accent-text);
}

.staffworks-worklog-basis:empty {
    display: none;
}

.staffworks-worklog-note {
    margin: 6px 0 10px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--sw-muted);
}

.staffworks-worklog-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.staffworks-worklog-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-top: 1px solid var(--sw-line);
    font-size: 14px;
}

.staffworks-worklog-item:first-child {
    border-top: none;
}

.staffworks-worklog-date {
    flex: 0 0 auto;
    min-width: 52px;
    font-weight: 700;
    color: var(--sw-text);
}

.staffworks-worklog-date small {
    margin-left: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--sw-muted);
}

.staffworks-worklog-time {
    flex: 1 1 auto;
    color: var(--sw-muted);
    font-variant-numeric: tabular-nums;
}

.staffworks-worklog-work {
    flex: 0 0 auto;
    min-width: 68px;
    text-align: right;
    font-weight: 700;
    color: var(--sw-text);
    font-variant-numeric: tabular-nums;
}

.staffworks-worklog-status {
    flex: 0 0 auto;
    min-width: 62px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sw-line);
    color: var(--sw-muted);
    font-size: 11px;
    font-weight: 700;
}

.staffworks-worklog-status.is-approved {
    background: var(--sw-accent-soft);
    color: var(--sw-accent-text);
}

.staffworks-worklog-status.is-open {
    background: #fdf3dc;
    color: #9a6a12;
}

.staffworks-worklog-status.is-rejected {
    background: #fbe6e6;
    color: #b83232;
}

/* QR読取エリア（アプリ内カメラ）。 */
.staffworks-station {
    margin: 10px auto 0;
}

.staffworks-scan-region {
    width: min(320px, 100%);
    margin: 10px auto;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.staffworks-scan-region[hidden] {
    display: none;
}

.staffworks-scan-region video {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* QR読み取りモーダル：カメラ枠とヒントをコンパクトにまとめる。 */
.staffworks-scan-box {
    width: min(420px, 100%);
    text-align: center;
}

.staffworks-scan-hint {
    margin: 8px 0 0;
    color: var(--sw-muted);
    font-size: 13px;
}

.staffworks-scan-box .staffworks-actions {
    justify-content: center;
    margin-top: 12px;
}

.staffworks-station-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.staffworks-station-buttons button[hidden] {
    display: none;
}

.staffworks-station-fallback {
    text-align: center;
    margin: 8px 0 0;
}

.staffworks-station-fallback[hidden] {
    display: none;
}

.staffworks-app .staffworks-station-fallback a,
.staffworks-public .staffworks-station-fallback a {
    font-size: 13px !important;
    color: var(--sw-muted);
    text-decoration: underline;
}

[data-timecard-status] {
    text-align: center;
    font-size: 17px;
}

.staffworks-shift-readonly dl {
    display: grid;
    gap: 0;
    margin: 0 0 2px;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    overflow: hidden;
}

.staffworks-shift-readonly dl > div {
    display: grid;
    /* 項目タイトル列の幅は px 固定でなく文字サイズに追従（em）させる。個人設定などで
       文字を大きくしたとき、「スタッフ」等のタイトルが折り返して行が不必要に
       縦へ伸びるのを防ぐ（スマホでは縦の余白の節約を特に優先する）。 */
    grid-template-columns: 5.8em minmax(0, 1fr);
    border-bottom: 1px solid var(--sw-line);
}

.staffworks-shift-readonly dl > div:last-child {
    border-bottom: 0;
}

.staffworks-shift-readonly dt,
.staffworks-shift-readonly dd {
    margin: 0;
    padding: 8px 12px !important;
    line-height: 1.5;
}

.staffworks-shift-readonly dt {
    background: var(--sw-subtle);
    font-weight: 800;
    /* タイトルは4文字まで（スタッフ等）。折り返さず1行で収める。 */
    white-space: nowrap;
}

.staffworks-shift-readonly dd {
    overflow-wrap: anywhere;
}

.staffworks-message {
    color: var(--sw-muted);
    min-height: 1.4em;
    transition: opacity .35s ease;
}
/* 保存結果メッセージ：表示時はかるく点滅、自動消去時はフェードアウト。 */
.staffworks-message.is-flash {
    animation: swMsgFlash .45s ease;
}
.staffworks-message.is-fading {
    opacity: 0;
}
@keyframes swMsgFlash {
    from { opacity: .25; }
    to { opacity: 1; }
}

.staffworks-modal-box .staffworks-message {
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
}

.staffworks-modal-box .staffworks-message.is-alert {
    display: grid;
    gap: 4px;
    margin: 0 !important;
    min-height: 0;
    border: 1px solid #e2a3a3;
    border-left: 4px solid #c53d3d;
    border-radius: 7px;
    padding: 10px 12px !important;
    background: #fff2f2;
    color: #702323;
    white-space: normal;
}

.staffworks-modal-box .staffworks-message.is-alert strong,
.staffworks-modal-box .staffworks-message.is-alert span,
.staffworks-modal-box .staffworks-message.is-alert small {
    display: block;
    margin: 0;
}

.staffworks-modal-box .staffworks-message.is-alert strong {
    font-size: 14px;
}

.staffworks-modal-box .staffworks-message.is-alert small {
    color: #7b4a4a;
    font-size: 12px;
}

.staffworks-message:empty {
    display: none;
}

.staffworks-list {
    display: grid;
    gap: 8px;
}

.staffworks-inline-adjust {
    display: grid;
    grid-template-columns: 110px 100px minmax(0, 1fr) 110px auto;
    gap: 6px;
    margin-top: 10px;
}

.staffworks-row {
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-panel);
    padding: 10px;
}

.staffworks-row-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-weight: 800;
}

.staffworks-row-meta {
    color: var(--sw-muted);
    font-size: 13px;
    margin-top: 4px;
}

.staffworks-request-card {
    text-align: center;
    padding: 18px;
}

.staffworks-request-card h3 {
    margin: 0 0 14px;
    font-size: 24px;
}

.staffworks-request-change {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    font-size: 22px;
}

.staffworks-request-change div {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--sw-line);
    background: var(--sw-subtle-2);
}

.staffworks-request-change .is-before {
    background: #f2f4f6;
    border-color: #cdd4da;
}

.staffworks-request-change .is-after {
    background: #eaf7ef;
    border-color: #9cccae;
}

.staffworks-request-reason {
    display: grid;
    gap: 4px;
    margin: 12px 0;
    padding: 12px;
    border-left: 4px solid #d89b24;
    background: #fff8e7;
    text-align: left;
}

.staffworks-approve {
    background: #19724f !important;
    border-color: #19724f !important;
    color: #fff !important;
}

.staffworks-reject {
    background: #b83232 !important;
    border-color: #b83232 !important;
    color: #fff !important;
}

/* 補助操作（却下・貼り付け）は左寄せにして、却下ボタンの右に案内文を並べる。 */
.staffworks-actions[data-shift-aux-actions] {
    justify-content: flex-start;
}

/* .staffworks-actions の display:flex が [hidden] を打ち消して空の枠が残るのを防ぐ。 */
.staffworks-actions[hidden] {
    display: none;
}

/* 却下ボタンの横に出す案内。理由はチャットで伝える運用のため。 */
.staffworks-reject-hint {
    align-self: center;
    font-size: 12px;
    font-weight: 700;
    color: #b83232;
}

.staffworks-reject-hint[hidden] {
    display: none;
}

/* 承認/却下の横幅いっぱいトグル（既定は承認）。シフトモーダル・申請レビュー共通。 */
.staffworks-shift-decision,
.staffworks-review-decision {
    margin: 10px 0 2px;
}

.staffworks-shift-decision[hidden] {
    display: none;
}

/* 申請内容（現在→変更後）とトグルを適度に離し、密着を避ける。 */
.staffworks-shift-decision .staffworks-request-change,
.staffworks-review-decision .staffworks-request-change {
    margin-bottom: 12px;
}

.staffworks-decision-toggle {
    display: flex;
    width: 100%;
    border: 1px solid var(--sw-line);
    border-radius: 10px;
    overflow: hidden;
}

.staffworks-app .staffworks-decision-toggle .staffworks-decision-opt {
    flex: 1 1 50%;
    min-height: 46px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #eef1f4;
    color: #6b7280;
    font-weight: 800;
    cursor: pointer;
}

/* 選択中の「承認」は緑、「却下」は赤ではっきり示す。 */
.staffworks-app .staffworks-decision-toggle .staffworks-decision-opt.is-approve.is-selected {
    background: #19724f;
    color: #fff;
}

.staffworks-app .staffworks-decision-toggle .staffworks-decision-opt.is-reject.is-selected {
    background: #b83232;
    color: #fff;
}

/* 未選択の「却下」は配色トーンを下げて、選ばれていないと分かるようにする。 */
.staffworks-app .staffworks-decision-toggle .staffworks-decision-opt.is-reject:not(.is-selected) {
    background: #f4f0f0;
    color: #b79a9a;
}

.staffworks-request-change small {
    font-size: 13px;
    color: var(--sw-muted);
}

.staffworks-payroll-row {
    width: 100%;
    text-align: left;
}

/* 給与「月次生成/更新」：年月フィールドとボタンを横並びに収める。 */
.staffworks-payroll-generate-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* PCでは1行（月ナビ＋生成ボタン）。スマホでは月ナビが全幅になり、ボタンが下段へ折り返す。 */
    flex-wrap: wrap;
}

/* 給与計算の対象月ピッカー（フィールド風ボタン＋ポップアップの月グリッド）。 */
.staffworks-monthpicker {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.staffworks-monthpicker-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: var(--sw-panel);
    border: 1px solid var(--sw-field-line);
}

.staffworks-monthpicker-pop {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    width: min(320px, 88vw);
    padding: 10px;
    background: var(--sw-panel);
    border: 1px solid var(--sw-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.staffworks-monthpicker-pop[hidden] {
    display: none;
}

.staffworks-monthpicker-year {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.staffworks-monthpicker-year strong {
    flex: 1 1 auto;
    text-align: center;
}

.staffworks-monthpicker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.staffworks-monthpicker-cell.is-selected {
    background: var(--sw-accent);
    border-color: var(--sw-accent);
    color: #fff;
}

.staffworks-payroll-generate-row button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 給与明細の勤務時間を「何時何分〜何時何分」で編集するインライン入力。 */
.staffworks-work-editor {
    margin-top: 6px;
}

/* 勤務時間帯（複数可）の1行。開始〜終了＋削除ボタン。 */
.staffworks-work-seg {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.staffworks-work-seg input[type="time"] {
    width: auto;
    min-width: 92px;
}

.staffworks-work-seg-del {
    min-width: 28px;
    min-height: 28px;
    padding: 0 6px;
    line-height: 1;
    border: 1px solid var(--sw-field-line);
    background: var(--sw-subtle);
    color: #c0392b;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

/* .staffworks-app button の既定（min-height:44px 等）より詳細度を上げて小さくする。 */
.staffworks-app .staffworks-work-seg-add {
    display: inline-block;
    margin: 2px 0 4px;
    min-height: 0;
    padding: 1px 7px;
    border: 1px dashed var(--sw-field-line);
    background: transparent;
    border-radius: 7px;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
}

.staffworks-work-editor-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.staffworks-work-editor-actions button {
    min-height: 32px;
    padding: 2px 10px;
    font-size: 13px;
}

/* 閉じるボタン（×・✗）は薄いグレー背景で統一する。 */
.staffworks-app .staffworks-close-btn,
.staffworks-app .staffworks-iconbtn[aria-label="閉じる"],
.staffworks-app button[data-close-payroll-detail],
.staffworks-app button[data-guide-close] {
    background: #e9eaec;
    border-color: #d6d8db;
    color: #333;
}

/* ✗（閉じる）は他のフッターボタンと同じ高さ・余白にそろえる。 */
.staffworks-app .staffworks-close-btn {
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid #d6d8db;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

/* 給与明細の操作結果メッセージ：画面中央にモーダル風に出し、数秒で自動的に消える。 */
.staffworks-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    max-width: 80%;
    padding: 14px 24px;
    border-radius: 12px;
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
    z-index: 10060;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.staffworks-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.staffworks-toast.is-ok {
    background: rgba(21, 128, 61, 0.96);
}

.staffworks-toast.is-error {
    background: rgba(185, 28, 28, 0.96);
}

/* 勤務時間の編集中、見出しの時間表示は薄く表示（再タップで閉じられる目印）。 */
.staffworks-payroll-table .staffworks-payroll-work [data-edit-work].is-editing {
    opacity: 0.55;
}

/* 給与明細詳細の最下部・左端に置く「印刷する」ボタン（右端は閉じる）。 */
.staffworks-payslip-print {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1;
    border: 1px solid var(--sw-line);
    border-radius: 6px;
    background: var(--sw-panel);
    color: var(--sw-accent);
    cursor: pointer;
}

.staffworks-payslip-print:hover,
.staffworks-payslip-print:focus {
    background: var(--sw-accent);
    color: #fff;
    border-color: var(--sw-accent);
}

.staffworks-payslip-print svg {
    width: 1.1em;
    height: 1.1em;
}

.staffworks-status-pill {
    display: inline-flex;
    width: fit-content;
    /* margin-top: 7px; */
    border-radius: 999px;
    padding: 3px 9px;
    background: #e4e8e5;
    color: #4d5750;
    font-size: 12px;
    font-weight: 800;
}

.staffworks-status-pill.is-published {
    background: #dff3e7;
    color: #12623f;
}

.staffworks-payroll-detail {
    width: min(1180px, 100%);
}

.staffworks-payroll-detail > .staffworks-modal-head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sw-line);
}

.staffworks-payroll-summary {
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    overflow: hidden;
    margin: 10px 0 16px !important;
}

.staffworks-payroll-summary > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    border-bottom: 1px solid var(--sw-line);
}

.staffworks-payroll-summary > div:last-child {
    border-bottom: 0;
}

.staffworks-payroll-summary dt,
.staffworks-payroll-summary dd {
    margin: 0;
    padding: 11px 14px !important;
}

.post-content .staffworks-app .staffworks-payroll-summary dt,
.post-content .staffworks-app .staffworks-payroll-summary dd {
    padding: 11px 14px !important;
}

.staffworks-payroll-summary dd {
    display: flex;
    align-items: center;
}

.staffworks-payroll-summary dt {
    background: var(--sw-subtle);
    font-weight: 800;
}

.staffworks-payroll-person dd {
    font-size: 26px;
    font-weight: 900;
}

.staffworks-payroll-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.staffworks-payroll-totals > div {
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-subtle-2);
}

.staffworks-payroll-totals span {
    color: var(--sw-muted);
    font-size: 12px;
    font-weight: 800;
}

.staffworks-payroll-totals strong {
    font-size: 20px;
}

.staffworks-payroll-totals .is-net {
    border-color: #d3a329;
    background: #fff6d8;
}

.staffworks-publish {
    background: #e6ad24 !important;
    border-color: #c89114 !important;
    color: #231b08 !important;
}

.staffworks-table-scroll {
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    margin: 0 0 16px !important;
}

.staffworks-payroll-table-title {
    margin: 20px 0 10px !important;
    font-size: 18px;
}

.staffworks-payroll-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: auto;
    margin: 0 !important;
}

.staffworks-payroll-table th,
.staffworks-payroll-table td {
    padding: 8px 9px !important;
    border: 1px solid var(--sw-line);
    white-space: nowrap;
    line-height: 1.45 !important;
}

.post-content .staffworks-app .staffworks-payroll-table th,
.post-content .staffworks-app .staffworks-payroll-table td {
    padding: 8px 9px !important;
}

.staffworks-payroll-table th {
    background: var(--sw-subtle);
}

.staffworks-payroll-table tbody tr:nth-child(even) {
    background: #fafbf9;
}

.staffworks-payroll-table tbody tr:hover {
    background: #f1f7f3;
}

.staffworks-payroll-table input {
    box-sizing: border-box;
    width: 80px !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    border: 1px solid var(--sw-line) !important;
    border-radius: 5px !important;
    padding: 6px 8px !important;
    background: var(--sw-panel) !important;
    box-shadow: none !important;
    /* iOS（PWA含む）は 16px 未満の入力欄にフォーカスすると画面を自動拡大するため 16px にする。 */
    font-size: 16px !important;
    line-height: 1.35 !important;
}

.staffworks-payroll-table .staffworks-payroll-cell.staffworks-payroll-allowance input {
    text-align: right;
}

.staffworks-payroll-table input[data-day-memo] {
    width: 180px !important;
}

.staffworks-app[data-staffworks-view="staff"] .staffworks-payroll-detail input[readonly] {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit;
    cursor: default;
    outline: 0;
    line-height: 1.45 !important;
}

.staffworks-app[data-staffworks-view="staff"] .staffworks-payroll-table {
    font-size: 14px;
}

.staffworks-app[data-staffworks-view="staff"] .staffworks-payroll-table input[readonly] {
    text-align: right;
}

.staffworks-app[data-staffworks-view="staff"] .staffworks-payroll-table input[type="text"][readonly] {
    text-align: left;
}

.staffworks-payroll-date strong,
.staffworks-payroll-date small,
.staffworks-work-display strong,
.staffworks-work-display small,
.staffworks-work-override strong,
.staffworks-work-override small {
    display: inline;
}

.staffworks-work-display {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

.staffworks-payroll-date {
    display: table-cell;
}

.staffworks-payroll-date strong {
    margin: 0 5px 0 0 !important;
}

.staffworks-payroll-date small,
.staffworks-work-display small,
.staffworks-work-override small {
    color: var(--sw-muted);
    font-size: 12px;
}

.staffworks-work-display small,
.staffworks-work-override small {
    margin-left: 5px;
}

/* 給与明細：シフト（出勤予定）の無い日の勤務時間は細字にして、予定外の勤務を見分けられるようにする。 */
.staffworks-app .staffworks-payroll-work strong.is-noshift {
    font-weight: 400;
}

/* 給与明細の勤務時間に添えるシフトの追加情報マーク（頭文字の丸）。時間の直後に少し間を空ける。 */
.staffworks-app .staffworks-payroll-work .staffworks-flag-marks {
    margin-left: 4px;
}

.staffworks-time-range {
    display: inline;
}

.staffworks-time-range + .staffworks-time-range::before {
    content: " / ";
    color: var(--sw-muted);
}

.staffworks-work-override {
    width: 150px;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
}

.staffworks-app .staffworks-work-override:not(:disabled):hover,
.staffworks-app .staffworks-work-override:focus-visible {
    border-color: transparent !important;
    background: var(--sw-accent-soft) !important;
    color: var(--sw-text);
    outline: 2px solid #87bca8;
    outline-offset: -2px;
}

.staffworks-payroll-table td[data-day-base] {
    min-width: 82px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* テーマ（.post_content / .entry-content など本文ラッパ）が strong・small・input に
   display:block・余白・float を付けると、給与表の日付や入力欄がセルからはみ出す。
   表内の要素を高い詳細度で明示的に整え、テーマの影響を打ち消す（ラッパ名に依存しない）。 */
.staffworks-payroll-table .staffworks-payroll-cell {
    vertical-align: middle !important;
}

.staffworks-payroll-table .staffworks-payroll-date strong,
.staffworks-payroll-table .staffworks-payroll-date small {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}

.staffworks-payroll-table .staffworks-payroll-date strong {
    margin-right: 5px !important;
}

.staffworks-payroll-table .staffworks-payroll-cell input,
.staffworks-payroll-table .staffworks-payroll-cell textarea {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

.staffworks-payroll-table .staffworks-payroll-work {
    min-width: 240px;
    white-space: normal;
}

.staffworks-payroll-table .staffworks-payroll-work .staffworks-work-display,
.staffworks-payroll-table .staffworks-payroll-work .staffworks-work-override {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.staffworks-payroll-table .staffworks-payroll-work .staffworks-work-override {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

.staffworks-payroll-table .staffworks-payroll-work small {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    max-width: 100%;
}

.staffworks-payroll-table tbody tr {
    height: auto !important;
}

.staffworks-payroll-table tbody td > *:first-child {
    margin-top: 0 !important;
}

.staffworks-payroll-table tbody td > *:last-child {
    margin-bottom: 0 !important;
}

.staffworks-app[data-staffworks-view="staff"] .staffworks-payroll-table td[data-day-base] {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.staffworks-payroll-monthly-section {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-subtle-2);
}

.staffworks-payroll-monthly-section h4 {
    margin: 0 0 10px;
    font-size: 16px;
}

.staffworks-payroll-monthly {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.staffworks-payroll-monthly label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--sw-line);
    border-radius: 6px;
    background: var(--sw-panel);
    font-weight: 800;
}

.staffworks-payroll-monthly input {
    width: 150px !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    border: 1px solid var(--sw-line) !important;
    border-radius: 5px !important;
    padding: 7px 9px !important;
    box-shadow: none !important;
}

.staffworks-app[data-staffworks-view="staff"] .staffworks-payroll-monthly input[readonly] {
    width: auto;
    min-width: 72px;
    text-align: right;
    font-weight: 800;
}

.staffworks-payroll-detail > .staffworks-actions {
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sw-line);
}

.staffworks-staff-profile textarea {
    min-height: 72px;
}

.staffworks-staff-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.staffworks-staff-title strong {
    font-size: 21px;
}

.staffworks-staff-title small {
    color: var(--sw-muted);
    font-size: 12px;
}

.staffworks-staff-order {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}

.staffworks-staff-order .staffworks-iconbtn {
    width: 36px;
    min-height: 36px;
    font-size: 18px;
}

.staffworks-staff-order .staffworks-iconbtn:disabled {
    cursor: default;
    opacity: 0.35;
}

/* スタッフ一覧（コンパクト行）。各行をタップで編集モーダルを開く。項目が増えても縦長になりにくい。 */
.staffworks-staff-list {
    gap: 8px;
}

.staffworks-staff-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}

.staffworks-staff-open {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-align: left;
    padding: 4px 6px;
    background: transparent;
    border: 0;
}

@media (hover: hover) {
    .staffworks-staff-open:hover {
        background: var(--sw-subtle);
    }
}

.staffworks-staff-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sw-subtle);
}

.staffworks-staff-item-body {
    display: grid;
    gap: 2px;
    min-width: 0;
    /* 「編集」表示を廃止した分の横幅を、表示名・権限・IDの表示に使い切る。 */
    flex: 1 1 auto;
}

.staffworks-staff-item-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.staffworks-staff-item-name strong {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 役職（位置）表示は文字の途中で折り返さない。 */
.staffworks-staff-item-name .staffworks-name-small {
    white-space: nowrap;
}

.staffworks-staff-item-body small {
    color: var(--sw-muted);
    font-size: 12px;
}

.staffworks-staff-role-badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--sw-subtle);
    color: var(--sw-text);
}

.staffworks-staff-role-badge.is-owner {
    background: #fde9c8;
    color: #8a5a00;
}

.staffworks-staff-role-badge.is-manager {
    background: #d8ebff;
    color: #1c5790;
}

/* スタッフ追加・編集モーダル：ヘッダ固定、本文だけスクロール。スマホは全画面（共通モーダルCSS）。 */
.staffworks-staff-modal-box {
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: 90vh;
    overflow: hidden;
    padding: 0;
}

.staffworks-staff-modal-box > .staffworks-modal-head {
    flex: 0 0 auto;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sw-line);
    margin: 0;
}

.staffworks-staff-modal-box .staffworks-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px 16px;
}

/* スタッフ編集モーダル内の「強制ログアウト（復旧用）」ブロック。目立たせず最小限のスペースに。 */
.staffworks-staff-recovery {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--sw-line);
}
.staffworks-app button.staffworks-force-logout {
    min-height: 0;
    padding: 2px 8px;
    border: 1px solid var(--sw-line);
    border-radius: 5px;
    background: transparent;
    color: var(--sw-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}
.staffworks-app button.staffworks-force-logout:hover {
    color: #9d2929;
    border-color: #e2bcbc;
    background: #fffafa;
}
.staffworks-staff-recovery-note {
    margin: 5px 0 0;
    color: var(--sw-muted);
    font-size: 11px;
    line-height: 1.45;
}
/* スタッフ削除（オーナー専用・危険操作）。誤操作しにくいよう控えめに置く。 */
.staffworks-staff-delete-zone {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--sw-line);
}
.staffworks-app button.staffworks-staff-delete {
    min-height: 0;
    padding: 2px 8px;
    border: 1px solid #e2bcbc;
    border-radius: 5px;
    background: transparent;
    color: #9d2929;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}
.staffworks-app button.staffworks-staff-delete:hover {
    color: #fff;
    border-color: #c0392b;
    background: #c0392b;
}

/* 前渡しの記録：月選択直下のスリムなブロック（給与明細行と背景色を変える）。タップでモーダル。 */
.staffworks-advance-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 14px;
    text-align: left;
    background: #eef4fb;
    border: 1px solid #cdddf0;
    border-radius: 8px;
}

.staffworks-advance-open-title {
    min-width: 0;
    font-weight: 700;
}

.staffworks-advance-open-mark {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--sw-accent);
}

/* 前渡しモーダル（給与明細と同様にヘッダ固定・本文スクロール。スマホは共通CSSで全画面）。 */
.staffworks-advance-modal-box {
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: 90vh;
    overflow: hidden;
    padding: 0;
}

.staffworks-advance-modal-box > .staffworks-modal-head {
    flex: 0 0 auto;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sw-line);
    margin: 0;
}

.staffworks-advance-modal-box .staffworks-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px 16px;
}

/* 「前渡しを記録」ボタンと、その下の記録一覧との間隔を広げる。 */
.staffworks-advance-form .staffworks-actions {
    margin: 8px 0 18px;
}

/* 前渡しの記録一覧（フォームの下に区切って表示）。 */
.staffworks-advance-list-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--sw-line);
}

/* スタッフ単位の見出しブロック（積み上げ）。名前・発生日・件数・金額を横一列に並べる。 */
.staffworks-advance-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 8px;
    padding: 12px 14px;
    text-align: left;
}

.staffworks-advance-group.is-over {
    background: #fdf0f0;
    border-color: #e8b9b9;
}

/* 名前は可変幅。長い場合は省略表示。超過pillは名前の右に付く。 */
.staffworks-advance-col-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 800;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.staffworks-advance-col-date {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--sw-muted);
    font-variant-numeric: tabular-nums;
}

.staffworks-advance-col-count {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--sw-muted);
}

.staffworks-advance-col-amount {
    flex: 0 0 auto;
    text-align: right;
}

/* 「超過あり」pill。 */
.staffworks-advance-pill {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #d70015;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
}

/* スタッフ単位の詳細（前渡しを1件ずつ編集）。親モーダルの上、保存トースト（100020）の下に重ねる。 */
.staffworks-advance-detail-modal {
    z-index: 100010;
}

.staffworks-advance-detail-box {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow: hidden;
    padding: 0;
}

.staffworks-advance-detail-box > .staffworks-modal-head {
    flex: 0 0 auto;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sw-line);
    margin: 0;
}

.staffworks-advance-detail-box .staffworks-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px 16px;
}

/* 前渡し1件＝1カード。区切り線だけでなく枠で1件ずつ明確に分ける。 */
.staffworks-advance-edit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin: 0 0 10px;
    padding: 12px;
    border: 1px solid var(--sw-line);
    border-radius: 10px;
    background: var(--sw-panel);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.staffworks-advance-edit label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    color: var(--sw-muted);
}

.staffworks-advance-edit label:nth-child(3) {
    grid-column: 1 / -1;
}

.staffworks-advance-edit-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.staffworks-advance-detail-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    font-weight: 800;
}

.staffworks-advance-detail-total strong {
    font-variant-numeric: tabular-nums;
}

/* 給与明細の前渡し内訳（月次項目の下の別枠）。 */
.staffworks-payroll-advance-section {
    margin-top: 16px;
}

.staffworks-payroll-advance-list {
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    overflow: hidden;
}

.staffworks-payroll-advance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--sw-line);
}

.staffworks-payroll-advance-row:first-child {
    border-top: 0;
}

.staffworks-payroll-advance-row.is-total {
    font-weight: 800;
    background: var(--sw-bg);
}

.staffworks-payroll-advance-row strong {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
    /* スマホでは「前渡しを記録」ボタンを幅いっぱいにする。 */
    .staffworks-advance-form .staffworks-actions .staffworks-primary {
        flex: 1 1 100%;
        width: 100%;
    }
}

.staffworks-staff-profile label,
.staffworks-inline-adjust label {
    display: grid;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
    color: var(--sw-muted);
}

.staffworks-money {
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

/* 表示名のうち [s]…[/s] で囲んだ部分を小さく表示する（公開シフト・シフト登録画面の名前）。 */
.staffworks-name-small {
    font-size: 65%;
}

/* スタッフアイコンの設定（編集画面・マイページのプロフィール）。 */
.staffworks-avatar-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.staffworks-avatar-label {
    width: 100%;
    font-size: 13px;
    font-weight: 800;
    color: var(--sw-muted);
}

.staffworks-avatar-edit {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.staffworks-app .staffworks-avatar-media,
.staffworks-public .staffworks-avatar-media {
    width: auto;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 700;
}

/* 「画像を削除する」のチェックボックスは、汎用inputスタイル（全幅・44px・枠）を打ち消して
   通常のチェックボックス表示に戻す。 */
.staffworks-app .staffworks-avatar-field input[type="checkbox"],
.staffworks-public .staffworks-avatar-field input[type="checkbox"] {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.staffworks-avatar-field .staffworks-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.staffworks-avatar-preview {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sw-subtle);
    border: 1px solid var(--sw-line);
}

/* ファイル入力は隠し、オリジナルの「画像を選ぶ」ボタン（label）で開く。端末依存の表示差・間延びを防ぐ。 */
.staffworks-app .staffworks-avatar-field input[type="file"],
.staffworks-public .staffworks-avatar-field input[type="file"] {
    display: none;
}

/* 「画像を選ぶ」ボタン。.staffworks-form label の display:grid に負けないよう詳細度を上げる。 */
.staffworks-avatar-edit .staffworks-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--sw-field-line);
    border-radius: 8px;
    background: #fff;
    color: var(--sw-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.staffworks-avatar-edit .staffworks-file-btn:hover {
    border-color: var(--sw-accent);
    color: var(--sw-accent);
}

.staffworks-avatar-edit .staffworks-file-btn .staffworks-icon {
    width: 16px;
    height: 16px;
}

.staffworks-avatar-edit .staffworks-file-name {
    max-width: 12em;
    overflow: hidden;
    font-size: 12px;
    color: var(--sw-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staffworks-avatar-edit .staffworks-file-name:empty {
    display: none;
}

.staffworks-public {
    display: grid;
    gap: 10px;
}

.staffworks-public-head {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 18px;
}

.staffworks-public-nav {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-panel);
    color: var(--sw-text);
    /* 矢印は SVG シェブロン（viewBox 中央寄せ）。文字グリフだとフォント依存で上下にズレるため。 */
    font-size: 24px;
    line-height: 1 !important;
    text-decoration: none;
}

.staffworks-public-nav:hover {
    border-color: var(--sw-accent);
    background: var(--sw-accent-soft);
    color: var(--sw-accent);
}

.staffworks-public-calendar .staffworks-day {
    cursor: default;
}

.staffworks-public-week-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-panel);
}

.staffworks-public-week-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    border-bottom: 1px solid var(--sw-line);
}

.staffworks-public-week-row:last-child {
    border-bottom: 0;
}

.staffworks-public-week-row h3 {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    margin: 0;
    padding: 14px 18px;
    background: var(--sw-subtle);
    text-align: center;
}

.staffworks-public-week-row h3 strong {
    font-size: 20px;
}

.staffworks-public-week-row h3 span {
    color: var(--sw-muted);
    font-size: 13px;
}

.staffworks-public-week-row h3 small {
    color: #a33a3a;
    font-size: 11px;
    font-weight: 700;
}

.staffworks-public-week-row.is-sunday h3,
.staffworks-public-week-row.is-holiday h3 {
    background: #fbe9e9;
}

.staffworks-public-week-row.is-sunday h3 strong,
.staffworks-public-week-row.is-sunday h3 span,
.staffworks-public-week-row.is-holiday h3 strong,
.staffworks-public-week-row.is-holiday h3 span {
    color: #a83232;
}

.staffworks-public-week-row.is-closed h3 {
    background: #fff7d6;
}

.staffworks-public-week-row.is-closed h3 strong,
.staffworks-public-week-row.is-closed h3 span {
    color: #806300;
}

/* 本日：淡い黄色＋アクセント枠で、休業日（淡黄）や日曜・祝日（淡赤）と区別して目立たせる。 */
.staffworks-public-week-row.is-today h3 {
    background: #fdf5c8;
    box-shadow: inset 0 0 0 2px var(--sw-accent-2);
}

.staffworks-public-week-shifts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 70px;
    padding: 10px;
}

.staffworks-public-shift {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    border: 1px solid var(--sw-accent-line);
    border-left: 4px solid var(--sw-accent);
    border-radius: 7px;
    padding: 6px 10px 6px 7px;
    background: var(--sw-accent-soft-2);
}

.staffworks-public-shift > div {
    display: grid;
    gap: 1px;
}

.staffworks-public-shift span {
    color: var(--sw-muted);
    font-size: 13px;
}

.staffworks-public-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

/* 出勤者ブロックは「アイコン → 名前 → 時刻」を縦に積み、どの画面幅でも崩れず読みやすくする。
   名前は1行で省略（…）し、文字が縦に1文字ずつ折り返すのを防ぐ。 */
.staffworks-public .staffworks-event {
    text-align: center;
}

/* 広い画面（PC）はアイコンを左端、右側に「名前／出勤時間」を2行で表示。狭い画面だけ縦積み。 */
.staffworks-public-event-person {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    margin-bottom: 3px;
}

.staffworks-public-event-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.staffworks-public-event-person small {
    display: block;
    max-width: 100%;
    min-width: 0;
    /* 表示名は省略せず全文表示する（必要なら折り返す）。 */
    white-space: normal;
    overflow-wrap: anywhere;
    /* 名前はボールド（全画面共通）。 */
    font-weight: 700;
}

.staffworks-public-event-person .staffworks-public-avatar {
    width: 32px;
    height: 32px;
}

/* 時刻は数字の途中で折り返さず、必要なら「20:00-」と「25:00」の間（-の後）で改行する。 */
.staffworks-public .staffworks-event b {
    display: block;
    overflow-wrap: normal;
    word-break: keep-all;
    /* 時間はノーマル（全画面共通）。 */
    font-weight: 400;
}

.staffworks-public-empty {
    margin: 0;
    color: var(--sw-muted);
}

.staffworks-public-day {
    border-bottom: 1px solid var(--sw-line);
    padding-bottom: 10px;
}

.staffworks-public-day h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.staffworks-public-day ul {
    display: grid;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.staffworks-public-day li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.staffworks-worktime {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    padding: 11px 14px;
    border: 1px solid #9ccdb5;
    border-radius: 10px;
    background: #e8f3ee;
}

.staffworks-worktime[hidden] {
    display: none;
}

.staffworks-worktime-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1a8a5f;
    animation: staffworks-pulse 1.8s ease-out infinite;
}

.staffworks-worktime-body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.staffworks-worktime-label {
    font-weight: 800;
    color: #0e6541;
    font-size: 14px;
}

.staffworks-worktime-elapsed {
    font-size: 24px;
    font-weight: 900;
    color: #0d4f3a;
    font-variant-numeric: tabular-nums;
}

.staffworks-worktime-since {
    margin-left: auto;
    color: var(--sw-muted);
    font-size: 13px;
    font-weight: 700;
}

@keyframes staffworks-pulse {
    0% { box-shadow: 0 0 0 0 rgba(26, 138, 95, 0.45); }
    70% { box-shadow: 0 0 0 9px rgba(26, 138, 95, 0); }
    100% { box-shadow: 0 0 0 0 rgba(26, 138, 95, 0); }
}

.staffworks-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 12px;
    color: var(--sw-muted);
    font-weight: 700;
}

.staffworks-spinner {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 3px solid #cfe0d7;
    border-top-color: var(--sw-accent);
    border-radius: 50%;
    animation: staffworks-spin 0.8s linear infinite;
}

@keyframes staffworks-spin {
    to { transform: rotate(360deg); }
}

.staffworks-push-desc {
    margin: 0 0 10px;
    color: var(--sw-muted);
    font-size: 14px;
}

.staffworks-notify-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.staffworks-notify-row > span {
    font-weight: 800;
    color: var(--sw-text);
    font-size: 15px;
}

.staffworks-notify-row select {
    width: auto !important;
    min-width: 150px;
}

.staffworks-notify-kinds {
    margin: 4px 0 0;
    padding: 12px;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: #fbfcfb;
}

.staffworks-notify-kinds legend {
    padding: 0 6px;
    color: var(--sw-muted);
    font-size: 13px;
    font-weight: 800;
}

.staffworks-notify-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    color: var(--sw-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
}

.staffworks-notify-check + .staffworks-notify-check {
    border-top: 1px solid var(--sw-line);
}

.staffworks-notify-check input {
    width: 22px !important;
    height: 22px;
    min-height: 22px !important;
    flex: 0 0 auto;
    margin: 0 !important;
}

.staffworks-push-setting {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sw-line);
}

.staffworks-push-setting[hidden] {
    display: none;
}

.staffworks-push-setting .staffworks-notify-row button {
    width: auto;
}

/* スマホ通知のオン・オフボタン：アイコン＋ラベルを中央にそろえる。 */
.staffworks-push-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.staffworks-push-ico {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.staffworks-push-ico .staffworks-icon {
    width: 19px;
    height: 19px;
}

/* スマホでは、ラベルを上・ボタンを横幅いっぱいに（押しやすく）。 */
@media (max-width: 680px) {
    .staffworks-push-setting .staffworks-notify-row {
        flex-direction: column;
        align-items: stretch;
    }

    .staffworks-push-setting .staffworks-notify-row button,
    .staffworks-push-toggle-btn {
        width: 100% !important;
    }
}

.staffworks-request-modal-box {
    width: min(480px, 100%);
}

.staffworks-request-summary {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: var(--sw-subtle-2);
    color: var(--sw-text);
    font-size: 14px;
    line-height: 1.6 !important;
}

.staffworks-request-reason-label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--sw-muted);
}

.staffworks-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 22px 16px;
    border: 1px dashed var(--sw-line);
    border-radius: 10px;
    background: #fbfcfb;
    color: var(--sw-muted);
    font-weight: 700;
    text-align: center;
    line-height: 1.5 !important;
}

@media (prefers-reduced-motion: reduce) {
    .staffworks-worktime-dot,
    .staffworks-spinner {
        animation: none;
    }
}

.staffworks-install {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #c9b66a;
    border-radius: 10px;
    background: #fff8e6;
}

.staffworks-install[hidden] {
    display: none;
}

/* スマホ通知の案内バナーは、ホーム画面追加バナーと区別できるようアクセント色にする。 */
.staffworks-push-banner {
    border-color: var(--sw-accent);
    background: #eef6f2;
}

.staffworks-push-banner .staffworks-install-body strong {
    color: var(--sw-accent);
}

.staffworks-install-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.staffworks-install-body strong {
    font-size: 15px;
    color: #6b5310;
}

.staffworks-install-body span {
    color: var(--sw-muted);
    font-size: 13px;
}

.staffworks-install-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* 閉じる（✗）は隣のボタン（通知をオン／追加する）と同じ高さでインラインに並べ、縦位置をそろえる。
   背景は全バナー共通で薄いグレーに統一する。 */
.staffworks-install .staffworks-iconbtn {
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    margin: 0;
    font-size: 20px;
    background: #e9eaec;
    border-color: #d6d8db;
    color: #333;
}

/* ✗だけのバナー（ホーム画面追加・通知ブロック案内）は、✗を右上角に固定して
   余分な余白をなくす（縦積みでテキストの下に回り込むのを防ぐ）。 */
.staffworks-install > .staffworks-iconbtn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    min-height: 32px;
    margin: 0;
    font-size: 18px;
}
/* ✗に重ならないよう、本文の右側に最小限の余白を確保（✗だけのバナーのみ）。 */
.staffworks-install:has(> .staffworks-iconbtn) .staffworks-install-body {
    padding-right: 34px;
}

.staffworks-app .staffworks-help-fab {
    position: fixed !important;
    /* 既定は左下（右下のトップへ戻るボタンと重なりにくい）。位置・余白は設定で変更可。 */
    left: var(--sw-fab-left, 16px);
    right: var(--sw-fab-right, auto);
    bottom: calc(var(--sw-fab-bottom, 16px) + env(safe-area-inset-bottom, 0px));
    z-index: 9990;
    display: grid;
    place-items: center;
    gap: 0;
    width: 58px;
    height: 58px;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--sw-accent) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(10, 60, 44, 0.34);
}

.staffworks-app .staffworks-help-fab .staffworks-help-fab-mark {
    font-size: 22px;
    font-weight: 900;
    line-height: 1 !important;
}

.staffworks-app .staffworks-help-fab small {
    font-size: 10px;
    font-weight: 800;
    line-height: 1 !important;
}

/* PWA（ホーム画面から起動）時は画面下部に余白（ホームバー領域）ができるため、ボタンを少し上げる。 */
@media all and (display-mode: standalone) {
    .staffworks-app .staffworks-help-fab {
        bottom: calc(var(--sw-fab-bottom, 16px) + env(safe-area-inset-bottom, 0px) + 28px);
    }
}

.staffworks-guide-box {
    width: min(620px, 100%);
}

.staffworks-guide-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.staffworks-guide-tab {
    min-height: 38px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 13px;
}

.staffworks-guide-tab.is-active {
    background: var(--sw-accent) !important;
    border-color: var(--sw-accent) !important;
    color: #fff !important;
}

.staffworks-guide-panel {
    display: none;
}

.staffworks-guide-panel.is-active {
    display: block;
}

.staffworks-guide-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--sw-line);
}

.staffworks-guide-section:last-child {
    border-bottom: 0;
}

.staffworks-guide-section h4 {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--sw-accent);
}

.staffworks-guide-section p {
    margin: 0 0 5px;
    color: var(--sw-text);
    font-size: 14px;
}

.staffworks-guide-section p:last-child {
    margin-bottom: 0;
}

.staffworks-app-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 8px;
}

.staffworks-app-links-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-left: auto;
}

/* 左上のあいさつ。「お疲れ様です」「さん」は小さめ、名前だけ太字で少し大きく。 */
.staffworks-app .staffworks-greeting,
.staffworks-public .staffworks-greeting {
    margin: 0;
    color: var(--sw-muted);
    font-size: 12px !important;
    font-weight: 600;
}

.staffworks-app .staffworks-greeting strong,
.staffworks-public .staffworks-greeting strong {
    color: var(--sw-text);
    font-size: 16px !important;
    font-weight: 800;
}

.staffworks-text-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--sw-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* ボタン要素に staffworks-text-link を付けたとき（マニュアル等）も、文字リンクと同じ見た目にする。 */
.staffworks-app button.staffworks-text-link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.staffworks-app button.staffworks-text-link:hover {
    background: transparent;
    border: 0;
    color: var(--sw-accent);
}

.staffworks-text-link:hover {
    color: var(--sw-accent);
    text-decoration: underline;
}

/* 右上のハンバーガーメニュー（三本線）。管理系の導線（QR・かんたん設定・詳細設定・マニュアル・プロフィール・ログアウト）をまとめる。 */
.staffworks-hmenu {
    position: relative;
}

.staffworks-app button.staffworks-hmenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--sw-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.staffworks-app button.staffworks-hmenu-toggle:hover {
    background: transparent;
    border: 0;
    color: var(--sw-accent);
}

.staffworks-hmenu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 9980;
    min-width: 232px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--sw-line);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

.staffworks-hmenu-panel[hidden] {
    display: none;
}

.staffworks-app .staffworks-hmenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sw-text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.staffworks-app .staffworks-hmenu-item:hover {
    background: rgba(0, 0, 0, .05);
    border: 0;
    color: var(--sw-text);
    text-decoration: none;
}

.staffworks-hmenu-sep {
    height: 1px;
    margin: 4px 8px;
    background: var(--sw-line);
}

/* メニューのアイコン。SVGをマスクにして currentColor（文字色）で塗る。テーマの配色に自動で合う。 */
.staffworks-hmenu-ic {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.staffworks-hmenu-ic-qr {
    -webkit-mask-image: url(menu/icon_qr.svg?v=2);
    mask-image: url(menu/icon_qr.svg?v=2);
}

.staffworks-hmenu-ic-wizard {
    -webkit-mask-image: url(menu/icon_wizard.svg?v=2);
    mask-image: url(menu/icon_wizard.svg?v=2);
}

.staffworks-hmenu-ic-setting {
    -webkit-mask-image: url(menu/icon_setting.svg?v=2);
    mask-image: url(menu/icon_setting.svg?v=2);
}

.staffworks-hmenu-ic-manual {
    -webkit-mask-image: url(menu/icon_manual.svg?v=2);
    mask-image: url(menu/icon_manual.svg?v=2);
}

.staffworks-hmenu-ic-personal {
    -webkit-mask-image: url(menu/icon_personal.svg?v=2);
    mask-image: url(menu/icon_personal.svg?v=2);
}

.staffworks-hmenu-ic-profile {
    -webkit-mask-image: url(menu/icon_profile.svg?v=2);
    mask-image: url(menu/icon_profile.svg?v=2);
}

.staffworks-hmenu-ic-logout {
    -webkit-mask-image: url(menu/icon_logout.svg?v=2);
    mask-image: url(menu/icon_logout.svg?v=2);
}

.staffworks-icon {
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
    /* ボタン内アイコンをクリックしても e.target がボタンになるようにする
       （アイコン自身はクリック対象にしない＝既存のクリック判定を壊さない）。 */
    pointer-events: none;
}

.staffworks-tab,
.staffworks-segmented button,
.staffworks-app button.staffworks-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.staffworks-choice-segment span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.staffworks-reject-area {
    margin-top: 10px;
    text-align: left;
}

.staffworks-reject-area[hidden] {
    display: none;
}

.staffworks-reject-area textarea {
    min-height: 64px;
}

.staffworks-reject-area .staffworks-actions {
    justify-content: flex-end;
}

@media (max-width: 680px) {
    .staffworks-topbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staffworks-toolbar button.staffworks-primary {
        width: 100%;
    }

    /* スマホでは月表示の切替（前月／月／翌月）を1行で中央寄せにする（カレンダー・一覧表とも）。 */
    .staffworks-toolbar {
        justify-content: center;
    }

    .staffworks-monthnav {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* スマホでは月ナビが全幅になるので、生成ボタンは下段で全幅にする。 */
    .staffworks-payroll-generate-row .staffworks-primary {
        flex: 1 1 100%;
    }

    .staffworks-segmented {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }

    .staffworks-tab {
        padding: 8px 4px;
        font-size: 13px;
    }

    /* スマホでは「一斉連絡」タブも他のタブと同じ50%幅（2列グリッドの1マス）にし、
       プロフィールタブ廃止後の4タブが2×2できれいに並ぶようにする。 */
    .staffworks-tab[data-panel="messages"] {
        grid-column: auto;
    }

    /* タブが奇数個（権限によりタブ数が変わる管理者ページなど）のときは、最後のタブだけが
       右側に空きを残して半端に見えるため、最後のタブを横幅いっぱいにする。 */
    .staffworks-topbar .staffworks-tab:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .staffworks-day {
        min-height: 78px;
        padding: 3px;
    }

    .staffworks-event {
        font-size: 11px;
        padding: 3px;
    }

    /* 公開シフトのカレンダー（スマホ）：狭い幅で崩れないよう縦積みにし、文字も小さくする。
       名前はボールド＋行間狭め、時間はノーマル。 */
    .staffworks-public-event-person {
        flex-direction: column;
        gap: 2px;
    }

    .staffworks-public-event-text {
        text-align: center;
        align-items: center;
    }

    .staffworks-public .staffworks-event {
        font-size: 9px;
    }

    .staffworks-public-event-person small {
        line-height: 1.1 !important;
    }

    .staffworks-public-event-person .staffworks-public-avatar {
        width: 26px;
        height: 26px;
    }

    .staffworks-public .staffworks-event b {
        line-height: 1.1 !important;
    }

    .staffworks-event-head {
        gap: 3px;
    }

    .staffworks-shift-badges {
        gap: 2px;
    }

    .staffworks-event .staffworks-shift-status {
        padding: 1px 4px;
        font-size: 9px;
    }

    .staffworks-event .staffworks-visibility-status {
        padding: 1px 4px;
        font-size: 8px;
    }

    /* 案内バナー（スマホ通知／ホーム画面追加）：狭い画面では説明文とボタンを
       横並びにせず、テキストブロックの下にボタン行を置く。 */
    .staffworks-install {
        flex-direction: column;
        align-items: stretch;
    }

    .staffworks-install-actions {
        margin-left: 0;
    }

    /* ボタン行：通知をオン／追加する を伸ばし、その右に✗を同じ高さで並べる。 */
    .staffworks-install-actions .staffworks-primary {
        flex: 1 1 auto;
        white-space: nowrap;
    }

    /* ✗だけのバナーは右上角固定のまま（縦積みでも余白が出ない）。狭い画面では少し詰める。 */
    .staffworks-install > .staffworks-iconbtn {
        top: 6px;
        right: 6px;
    }

    .staffworks-grid2 {
        grid-template-columns: 1fr;
    }

    /* スタッフ・マネージャーのシフト入力：スマホでは日付を全幅、出勤・退勤を2列にする。 */
    .staffworks-shift-times3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staffworks-shift-times3 .is-date {
        grid-column: 1 / -1;
    }

    .staffworks-inline-adjust {
        grid-template-columns: 1fr;
    }

    .staffworks-shift-list-day {
        grid-template-columns: 1fr;
    }

    .staffworks-shift-list-event {
        grid-template-columns: auto auto;
    }

    .staffworks-request-change {
        grid-template-columns: 1fr;
        font-size: 18px;
    }

    .staffworks-request-arrow {
        font-size: 0;
    }

    .staffworks-request-arrow::before {
        content: "↓";
        font-size: 24px;
    }

    .staffworks-payroll-summary > div {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .staffworks-payroll-summary {
        margin: 8px 0 14px !important;
    }

    .staffworks-payroll-summary dt,
    .staffworks-payroll-summary dd {
        padding: 9px 10px !important;
    }

    .post-content .staffworks-app .staffworks-payroll-summary dt,
    .post-content .staffworks-app .staffworks-payroll-summary dd {
        padding: 9px 10px !important;
    }

    .staffworks-payroll-person dd {
        font-size: 22px;
    }

    .staffworks-payroll-totals .is-net {
        grid-column: 1 / -1;
    }

    .staffworks-payroll-table-title {
        margin: 16px 0 8px !important;
    }

    .staffworks-payroll-table {
        min-width: initial;
    }

    .staffworks-payroll-table th,
    .staffworks-payroll-table td {
        padding: 7px 8px !important;
    }

    .staffworks-payroll-date strong,
    .staffworks-payroll-date small,
    .staffworks-work-display strong,
    .staffworks-work-display small,
    .staffworks-work-override strong,
    .staffworks-work-override small,
    .staffworks-time-range {
        display: block;
    }

    .staffworks-payroll-date strong {
        margin: 0 0 3px !important;
    }

    /* スマホでは日付セルを縦積みに戻す（上のデスクトップ用 inline 強制を、同等以上の詳細度で上書き）。 */
    .staffworks-payroll-table .staffworks-payroll-date strong,
    .staffworks-payroll-table .staffworks-payroll-date small {
        display: block !important;
    }

    .staffworks-payroll-table .staffworks-payroll-date strong {
        margin: 0 0 3px !important;
    }

    .staffworks-work-display,
    .staffworks-work-override {
        display: block;
    }

    .staffworks-payroll-table .staffworks-payroll-work {
        min-width: 120px;
    }

    .staffworks-payroll-table.staffworks-payroll-table-staff .staffworks-payroll-work {
        min-width: 96px;
    }

    .staffworks-payroll-table.staffworks-payroll-table-staff input[type="number"] {
        width: 65px !important;
    }

    .staffworks-payroll-table .staffworks-payroll-work .staffworks-work-override {
        display: block;
    }

    .staffworks-payroll-table .staffworks-payroll-work small {
        display: block;
    }

    .staffworks-work-display small,
    .staffworks-work-override small {
        margin: 3px 0 0;
    }

    .staffworks-time-range + .staffworks-time-range::before {
        content: none;
    }

    .post-content .staffworks-app .staffworks-payroll-table th,
    .post-content .staffworks-app .staffworks-payroll-table td {
        padding: 7px 8px !important;
    }

    .staffworks-public-head {
        gap: 7px;
        font-size: 15px;
    }

    .staffworks-public-week-row {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .staffworks-public-week-row h3 {
        padding: 10px 12px;
    }

    .staffworks-public-week-row h3 strong {
        font-size: 17px;
    }

    .staffworks-public-week-shifts {
        display: grid;
        min-height: 64px;
        padding: 7px;
    }

    .staffworks-public-shift {
        width: 100%;
    }

    .staffworks-punch-actions button {
        min-height: 96px;
        font-size: 50px;
        padding: 8px 2px;
    }
}

/* =====================================================================
   ライトグレーテーマのディテール調整（角丸・影）
   コンテナに付く .sw-theme-light のときだけ有効。標準テーマには影響しない。
   ===================================================================== */
.sw-theme-light.staffworks-app,
.sw-theme-light.staffworks-public {
    --sw-radius: 14px;
    --sw-radius-sm: 11px;
    --sw-soft-line: rgba(0, 0, 0, 0.07);
    --sw-soft-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
    --sw-soft-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.18);
}

/* 浮いて見せる主要カード（角丸＋やわらかい影＋淡い境界） */
.sw-theme-light .staffworks-card,
.sw-theme-light .staffworks-calendar,
.sw-theme-light .staffworks-payroll-summary,
.sw-theme-light .staffworks-public-week-table,
.sw-theme-light .staffworks-staff-add {
    border-radius: var(--sw-radius);
    border-color: var(--sw-soft-line);
    box-shadow: var(--sw-soft-shadow);
}

/* 一覧の行・小さな囲みは、角丸と淡い境界のみ（影は付けずすっきり） */
.sw-theme-light .staffworks-row,
.sw-theme-light .staffworks-request-summary,
.sw-theme-light input,
.sw-theme-light select,
.sw-theme-light textarea,
.sw-theme-light .staffworks-iconbtn {
    border-radius: var(--sw-radius-sm);
    border-color: var(--sw-soft-line);
}

/* 主要ボタンは角丸＋ごく薄い影 */
.sw-theme-light .staffworks-primary {
    border-radius: var(--sw-radius-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* モーダルは大きめの角丸とやわらかい大きめの影 */
.sw-theme-light .staffworks-modal-box {
    border-radius: var(--sw-radius);
    border-color: var(--sw-soft-line);
    box-shadow: var(--sw-soft-shadow-lg);
}

/* =========================================================
   連絡（業務連絡タイムライン）
   ========================================================= */
.staffworks-messages-desc {
    color: var(--sw-muted);
    margin: 0 0 10px;
}

/* 連絡のルーム切り替えタブ（Bootstrap の .nav-tabs 風・全幅均等割） */
.staffworks-room-tabs {
    display: flex;
    gap: 0;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--sw-line);
}

.staffworks-room-tab {
    flex: 1 1 0;
    min-height: 40px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--sw-muted);
    padding: 8px 6px;
    margin-bottom: -1px;
    font-weight: 700;
    cursor: pointer;
}

.staffworks-room-tab.is-active {
    background: var(--sw-accent-soft);
    color: var(--sw-accent-text);
    border-bottom-color: var(--sw-accent);
}

.staffworks-message-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 56vh;
    overflow-y: auto;
    padding: 4px 2px 8px;
    margin-bottom: 12px;
}

/* 一斉連絡チャットのモーダル：入力ツールを常に最下部に固定し、メッセージだけがスクロールする。 */
.staffworks-messages-modal .staffworks-messages-box {
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    height: min(86vh, 880px);
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow: hidden;
    padding: 14px;
}

.staffworks-messages-box .staffworks-modal-head,
.staffworks-messages-box .staffworks-room-tabs,
.staffworks-messages-box .staffworks-messages-foot {
    flex: 0 0 auto;
}

/* スクロール領域（JSで .staffworks-chat-jump-wrap に包まれる前後どちらでも伸びるようにする）。 */
.staffworks-messages-box .staffworks-chat-jump-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.staffworks-messages-box > .staffworks-message-list,
.staffworks-messages-box .staffworks-chat-jump-wrap > .staffworks-message-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 0;
}

.staffworks-messages-foot {
    padding-top: 8px;
    /* iPhone のホームバー等を避ける安全余白は、スマホ全画面時はモーダルのコンテナ側
       （.staffworks-modal の padding-bottom）でまとめて確保する（二重取り防止）。 */
}

/* シフト（カレンダー/一覧）モーダル：ヘッダ・切替・月送りは固定、本文（カレンダー/一覧）だけスクロールする。 */
.staffworks-board-modal .staffworks-board-box {
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    height: min(90vh, 1000px);
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow: hidden;
    padding: 14px;
}

.staffworks-board-box > * {
    flex: 0 0 auto;
}

.staffworks-board-box .staffworks-board-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* 入れ子になる日別詳細モーダルは、カレンダーモーダルより前面に出す。 */
.staffworks-board-modal [data-shift-modal] {
    z-index: 10001;
}

/* スマホ縦：カレンダーが概ね1画面に収まるよう日セルをコンパクトに（収まらない分は本文がスクロール）。
   スマホ横や一覧は本文（.staffworks-board-body）が自然にスクロールする。 */
@media (max-width: 560px) and (orientation: portrait) {
    .staffworks-board-box .staffworks-day {
        min-height: 48px;
        padding: 2px;
    }

    .staffworks-board-box .staffworks-calendar {
        gap: 2px;
    }
}

@media (max-width: 560px) {
    /* スマホでは各モーダル（QR読み取りを除く）を端末画面いっぱいで表示する。
       一斉連絡チャットと同様、操作部・入力部が画面内に確実に収まるようにする。
       独自テンプレート（PWA, viewport-fit=cover）では本文がステータスバー（時刻・ノッチ）や
       ホームバーの下まで広がるため、セーフエリア分はコンテナ側で一括して確保する。
       こうすると各モーダル本来の内部パディング（ヘッダの全幅ボーダー等）を壊さずに、
       上は見出し・✗がステータスバーに被らず、下は余分な帯もできない。
       cover でない通常ブラウザでは env()=0 なので見た目は変わらない。 */
    .staffworks-modal:not(.staffworks-scan-modal) {
        padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
        place-items: stretch;
    }

    .staffworks-modal:not(.staffworks-scan-modal) .staffworks-modal-box {
        width: 100%;
        height: 100vh;
        height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    /* シフト詳細モーダルは入力項目を上詰めにし、チャットを縦いっぱいに広げる。
       （.staffworks-form の grid は余白を引き伸ばすため、flex 縦並びに切り替える。）
       申請内容・承認トグルなどで固定部分が画面より高くなるときは、overflow-y でフォーム全体を
       スクロールできるようにする（overflow: hidden だと下部＝追加情報・チャットに届けない）。 */
    [data-shift-form] {
        display: flex;
        flex-direction: column;
        gap: 6px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 余白・入力欄の高さを圧縮して、チャット領域をできるだけ広くする。 */
    [data-shift-form] select,
    [data-shift-form] input[type="date"],
    [data-shift-form] input[type="time"],
    [data-shift-form] input[type="text"] {
        min-height: 40px;
    }

    [data-shift-form] .staffworks-shift-flags {
        margin: 2px 0;
        padding: 8px 10px;
    }

    [data-shift-form] .staffworks-shift-flags-title {
        margin-bottom: 4px;
    }

    /* チャット領域が残りの高さを全部使う（入力欄は最下部固定、メッセージだけスクロール）。 */
    /* min-height は 0 ではなく auto：固定部分（申請内容・承認トグル等）が多い画面で、
       この親側だけが縮んでメッセージ一覧（min-height 200px）がはみ出し、
       入力欄がチャットの途中に重なって表示されるのを防ぐ（縮めず、フォーム全体をスクロールさせる）。 */
    [data-shift-form] [data-shift-thread]:not([hidden]),
    [data-shift-form] [data-shift-thread] .staffworks-request-thread,
    [data-shift-form] [data-shift-thread] .staffworks-chat-jump-wrap {
        flex: 1 1 auto;
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    [data-shift-form] [data-shift-thread] .staffworks-thread-list {
        flex: 1 1 auto;
        /* 固定部分（申請内容・承認トグル等）が多い画面でもチャットがつぶれないよう、
           最低の高さを確保する（収まらない分はフォーム全体がスクロールする）。 */
        min-height: 200px;
        max-height: none;
        margin-bottom: 8px;
    }

    [data-shift-form] [data-shift-thread] .staffworks-thread-form {
        flex: 0 0 auto;
    }
}

/* 連絡チャット・シフト内チャットの背景色プリセット（パステル6種・既定は無地）。 */
[data-chat-bg="green"],
[data-chat-bg="sky"],
[data-chat-bg="sakura"],
[data-chat-bg="cream"],
[data-chat-bg="lavender"],
[data-chat-bg="gray"] {
    border-radius: 12px;
    padding: 10px 8px;
}

[data-chat-bg="green"] { background: #eef6ef; }
[data-chat-bg="sky"] { background: #eef3fb; }
[data-chat-bg="sakura"] { background: #fceef2; }
[data-chat-bg="cream"] { background: #fbf6e7; }
[data-chat-bg="lavender"] { background: #f3eefa; }
[data-chat-bg="gray"] { background: #f0f2f3; }

.staffworks-message-item {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 86%;
}

.staffworks-message-item.is-other {
    align-self: flex-start;
}

.staffworks-message-item.is-mine {
    align-self: flex-end;
    flex-direction: row-reverse;
    /* 右向きのしっぽ（9px）が右端で切れないよう右に余白を確保。 */
    margin-right: 10px;
}

.staffworks-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.staffworks-message-bubble {
    position: relative;
    border: 1px solid var(--sw-line);
    background: var(--sw-panel);
    border-radius: 14px;
    padding: 4px 8px;
    /* 長押しメニューを安定させるため、端末の文字選択・コールアウトを抑止（コピーはメニューから）。 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.staffworks-message-item.is-mine .staffworks-message-bubble {
    background: var(--sw-accent-soft);
    border-color: var(--sw-accent-line);
}

/* よくあるチャットのような吹き出しの「尖り（しっぽ）」。
   外側（枠色）と内側（地色）の2つの三角を重ね、1pxの枠線を残す。 */
.staffworks-message-bubble::before,
.staffworks-message-bubble::after {
    content: "";
    position: absolute;
    top: 12px;
    width: 0;
    height: 0;
    border-style: solid;
}

/* 相手（左側）：左向きのしっぽ。 */
.staffworks-message-item.is-other .staffworks-message-bubble::before {
    left: -9px;
    border-width: 8px 9px 8px 0;
    border-color: transparent var(--sw-line) transparent transparent;
}

.staffworks-message-item.is-other .staffworks-message-bubble::after {
    left: -7px;
    border-width: 7px 8px 7px 0;
    border-color: transparent var(--sw-panel) transparent transparent;
}

/* 自分（右側）：右向きのしっぽ。 */
.staffworks-message-item.is-mine .staffworks-message-bubble::before {
    right: -9px;
    border-width: 8px 0 8px 9px;
    border-color: transparent transparent transparent var(--sw-accent-line);
}

.staffworks-message-item.is-mine .staffworks-message-bubble::after {
    right: -7px;
    border-width: 7px 0 7px 8px;
    border-color: transparent transparent transparent var(--sw-accent-soft);
}

/* 吹き出し内の引用（返信元）プレビュー。 */
.staffworks-message-quote {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 4px;
    padding: 3px 8px;
    border-left: 3px solid var(--sw-accent);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    font-size: 12px;
}

.staffworks-message-quote-name {
    font-weight: 700;
    color: var(--sw-accent-text);
}

.staffworks-message-quote-text {
    color: var(--sw-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* 送信取消後の本文。 */
.staffworks-message-body.is-retracted {
    color: var(--sw-muted);
    font-style: italic;
}

.staffworks-message-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0;
    font-size: 12px;
    color: var(--sw-muted);
}

/* 長押しメニュー（アクションシート）。本体の配色変数に依存せず、確実に見える固定色で描く。 */
.staffworks-chatmenu[hidden] {
    display: none;
}

.staffworks-chatmenu {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.staffworks-chatmenu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 12, 0.55);
}

.staffworks-chatmenu-sheet {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    margin: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.staffworks-chatmenu-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.staffworks-chatmenu-preview {
    padding: 12px 16px;
    font-size: 13px;
    color: #6b6b6b;
    background: #f6f6f6;
    border-bottom: 1px solid #e6e6e6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staffworks-chatmenu-card button {
    display: block;
    width: 100%;
    min-height: 54px;
    border: 0;
    border-top: 1px solid #ececec;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.staffworks-chatmenu-card button:first-of-type {
    border-top: 0;
}

.staffworks-chatmenu-card button[hidden] {
    display: none;
}

.staffworks-chatmenu-card button:active {
    background: #f0f0f0;
}

.staffworks-chatmenu-card button.is-danger,
.staffworks-chatmenu-card button[data-cm="retract"] {
    color: #d8352a;
}

.staffworks-chatmenu-cancel {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 16px;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.staffworks-chatmenu-cancel:active {
    background: #f0f0f0;
}

/* 返信中バー（送信欄の上）。 */
.staffworks-reply-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-left: 3px solid var(--sw-accent);
    background: var(--sw-accent-soft);
    border-radius: 8px;
    font-size: 13px;
}

.staffworks-reply-preview[hidden] {
    display: none;
}

.staffworks-reply-preview-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sw-text);
}

.staffworks-reply-preview-cancel {
    flex: 0 0 auto;
    min-width: 28px;
    min-height: 28px;
    border: 1px solid var(--sw-field-line);
    background: var(--sw-subtle);
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.staffworks-message-name {
    font-weight: 700;
    color: var(--sw-text);
}

.staffworks-message-tag {
    border: 1px solid var(--sw-accent-line);
    color: var(--sw-accent-text);
    border-radius: 999px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 1.6;
}

.staffworks-message-time {
    margin-left: auto;
}

.staffworks-message-body {
    color: var(--sw-text);
    line-height: 1.55;
    word-break: break-word;
}

/* 本文中の絵文字（Twemoji 画像）。文字サイズに馴染ませる。 */
img.staffworks-emoji {
    width: 1.3em;
    height: 1.3em;
    margin: 0 0.05em;
    vertical-align: -0.25em;
    display: inline-block;
}

/* チャットの画像添付（サムネイル）。タップで拡大。 */
.staffworks-message-photo {
    display: inline-block;
    margin-bottom: 4px;
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

.staffworks-message-photo img {
    display: block;
    max-width: min(220px, 60vw);
    max-height: 260px;
    width: auto;
    height: auto;
    object-fit: cover;
}

/* 入力欄のツール（絵文字・写真・カメラ）。 */
/* LINE 風の入力ツール：写真・カメラの簡易アイコン。入力中は隠して入力欄を最大化する。 */
.staffworks-compose-lead {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
}

.staffworks-message-compose.is-active .staffworks-compose-lead {
    display: none;
}

/* アイコンボタンは入力欄・送信ボタンと同じ高さ（44px）にそろえ、画像を中央に置く。 */
.staffworks-app .staffworks-compose-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    width: 40px;
    min-width: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1;
    color: var(--sw-muted);
}

.staffworks-compose-icon .staffworks-icon {
    display: block;
    width: 26px;
    height: 26px;
}

/* 入力欄ラッパ（中に絵文字ボタンを収める）。 */
.staffworks-compose-field {
    position: relative;
    flex: 1 1 auto;
    display: flex;
}

.staffworks-app .staffworks-compose-emoji {
    position: absolute;
    right: 4px;
    bottom: 7px;
    min-height: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1;
    color: var(--sw-muted);
}

.staffworks-compose-emoji .staffworks-icon {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
}

/* 送信前の添付プレビュー。 */
.staffworks-compose-attach {
    margin-bottom: 6px;
}

.staffworks-compose-attach-item {
    position: relative;
    display: inline-block;
}

.staffworks-compose-attach-item img {
    display: block;
    max-width: 120px;
    max-height: 120px;
    border-radius: 10px;
    border: 1px solid var(--sw-line);
}

.staffworks-app .staffworks-compose-attach-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    min-height: 0;
    padding: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    line-height: 1;
}

/* 一斉連絡の通知先ピル（全員ルームのみ）。選んだ相手だけに通知する。 */
.staffworks-notify-bar {
    margin: 4px 0 8px;
    padding: 6px 8px;
    background: var(--sw-subtle);
    border-radius: 10px;
}

.staffworks-notify-bar[hidden] {
    display: none;
}

.staffworks-notify-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

/* 右上の「？」ヘルプと吹き出し。 */
.staffworks-notify-help-wrap {
    position: relative;
    margin-left: auto;
    display: inline-flex;
}

.staffworks-app .staffworks-notify-help {
    min-height: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--sw-line);
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--sw-muted);
    transition: border-color .15s, color .15s, box-shadow .15s;
}

.staffworks-app .staffworks-notify-help:hover,
.staffworks-app .staffworks-notify-help[aria-expanded="true"] {
    border-color: var(--sw-accent, #2563eb);
    color: var(--sw-accent, #2563eb);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.14);
}

/* モダンな吹き出し（やわらかい影・細い枠・角丸・ふわっと表示）。 */
.staffworks-notify-note {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 30;
    width: 256px;
    max-width: 78vw;
    padding: 11px 13px;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(16, 24, 40, 0.16), 0 3px 8px rgba(16, 24, 40, 0.06);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--sw-text, #333);
    transform-origin: top right;
    animation: sw-note-pop 0.16s ease;
}

@keyframes sw-note-pop {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.staffworks-notify-note[hidden] {
    display: none;
}

/* 吹き出しの三角（右上の「？」を指す）。 */
.staffworks-notify-note::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 8px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-left: 1px solid #eef0f3;
    border-top: 1px solid #eef0f3;
    transform: rotate(45deg);
}

/* 操作ブロック直上の見出し。h3 のすぐ右横に「？」ヘルプを並べ、余分な余白を作らない。 */
.staffworks-panel-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}

.staffworks-panel-heading h3 {
    margin: 0;
    font-size: 17px;
}

.staffworks-panel-heading .staffworks-help {
    flex: 0 0 auto;
}

/* 見出し行の右端に寄せる操作ボタン（例：スタッフ情報を更新）。行を高くしないよう小さめに。 */
.staffworks-panel-heading .staffworks-heading-action {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 34px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700;
}

/* 複数ボタンを右端でひとまとめにする（例：スタッフ画面の「＋追加」「更新」を隣接配置）。 */
.staffworks-panel-heading .staffworks-heading-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.staffworks-panel-heading .staffworks-heading-actions .staffworks-heading-action {
    margin-left: 0;
}

/* モーダルのタイトル（h3）の右横に「？」を並べる。 */
.staffworks-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.staffworks-help {
    position: relative;
    display: inline-flex;
}

.staffworks-app .staffworks-help-q {
    min-height: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--sw-line);
    background: #fff;
    color: var(--sw-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: border-color .15s, color .15s, box-shadow .15s;
}

.staffworks-app .staffworks-help-q:hover,
.staffworks-app .staffworks-help-q[aria-expanded="true"] {
    border-color: var(--sw-accent, #2563eb);
    color: var(--sw-accent, #2563eb);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.14);
}

.staffworks-help-pop {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 40;
    width: 284px;
    max-width: 80vw;
    padding: 11px 13px;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(16, 24, 40, 0.16), 0 3px 8px rgba(16, 24, 40, 0.06);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--sw-text, #333);
    text-align: left;
    transform-origin: top right;
    animation: sw-note-pop 0.16s ease;
}

.staffworks-help-pop[hidden] {
    display: none;
}

.staffworks-help-pop::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 8px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-left: 1px solid #eef0f3;
    border-top: 1px solid #eef0f3;
    transform: rotate(45deg);
}

/* 画面外にはみ出すときは上向きで開く（JSが付与）。矢印も下向きにする。 */
.staffworks-help-pop.is-up {
    transform-origin: bottom right;
}

.staffworks-help-pop.is-up::before {
    top: auto;
    bottom: -7px;
    border-left: none;
    border-top: none;
    border-right: 1px solid #eef0f3;
    border-bottom: 1px solid #eef0f3;
}

/* ヘルプは吹き出しではなく中央モーダルで表示する（文字を大きく読みやすくするため）。
   元データの .staffworks-help-pop は常に hidden（display:none）のままで、本文だけ流用する。 */
.staffworks-help-modal {
    position: fixed;
    inset: 0;
    /* シフト・給与・画像などのモーダル（最大 z-index 100001）より前面に出す。 */
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.staffworks-help-modal[hidden] {
    display: none;
}

.staffworks-help-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
}

.staffworks-help-modal-card {
    position: relative;
    width: 460px;
    max-width: 100%;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: var(--sw-panel, #fff);
    border: 1px solid var(--sw-line, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
    overflow: hidden;
    animation: sw-note-pop 0.16s ease;
}

.staffworks-help-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 14px 11px;
    border-bottom: 1px solid var(--sw-line, #eef0f3);
}

.staffworks-help-modal-head strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--sw-text, #333);
}

.staffworks-help-modal-body {
    padding: 16px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.9;
    color: var(--sw-text, #333);
    text-align: left;
}

/* 使い方マニュアルのモーダル（iframe表示）。ヘルプモーダルと同系の見た目で、ほぼ全画面にする。 */
.staffworks-manual-modal {
    position: fixed;
    inset: 0;
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.staffworks-manual-modal[hidden] {
    display: none;
}

.staffworks-manual-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
}

.staffworks-manual-modal-card {
    position: relative;
    width: 900px;
    max-width: 100%;
    height: min(94vh, 100%);
    display: flex;
    flex-direction: column;
    background: var(--sw-panel, #fff);
    border: 1px solid var(--sw-line, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
    overflow: hidden;
    animation: sw-note-pop 0.16s ease;
}

.staffworks-manual-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 8px 16px;
    border-bottom: 1px solid var(--sw-line, #e5e7eb);
    flex: 0 0 auto;
}

.staffworks-manual-modal-head strong {
    font-size: 15px;
    color: var(--sw-text, #333);
}

.staffworks-manual-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #fff;
}

/* スマホでは全画面表示にして読みやすくする。 */
@media (max-width: 600px) {
    .staffworks-manual-modal {
        padding: 0;
    }

    .staffworks-manual-modal-card {
        height: 100%;
        border-radius: 0;
        border: 0;
    }
}

/* シフトのモーダル上部の一行メッセージは少し小さめにして、なるべく1行に収める。 */
.staffworks-modal-box [data-shift-modal-message]:not(.is-alert) {
    font-size: 12.5px;
    line-height: 1.5;
}

/* メッセージが空のときは行ごと消して、余白を作らない（チャット領域を広く保つ）。 */
.staffworks-modal-box [data-shift-modal-message]:empty {
    display: none;
}

.staffworks-notify-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--sw-muted);
}

.staffworks-app .staffworks-notify-bulk {
    min-height: 0;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    touch-action: manipulation;
}

.staffworks-app .staffworks-notify-bulk.is-today {
    border-color: #e0a96d;
    background: #fdf3e3;
    color: #9a5b1e;
}

.staffworks-notify-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* 通常人数では内部スクロールを起こさない高さにする（スクロールしなければタップが即時に反応する）。
       人数が非常に多いときだけスクロールする。 */
    max-height: 38vh;
    overflow-y: auto;
    touch-action: pan-y;
}

.staffworks-app .staffworks-notify-pill {
    min-height: 0;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--sw-line);
    background: var(--sw-panel);
    color: var(--sw-text);
    cursor: pointer;
    /* スクロール領域内でもタップが拾われやすいように（タップとスクロールの競合・遅延を抑える）。 */
    touch-action: manipulation;
    /* タップが文字選択・長押しメニューに化けないようにし、選択反映を即時にする。 */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .08s ease, border-color .08s ease, color .08s ease;
}

/* 今日の出勤者は色で区別（未選択時）。 */
.staffworks-app .staffworks-notify-pill.is-today {
    border-color: #e0a96d;
    background: #fdf3e3;
    color: #9a5b1e;
}

/* 選択中はアクセント色で塗る（出勤者かどうかに関わらず）。 */
.staffworks-app .staffworks-notify-pill.is-selected {
    border-color: var(--sw-accent);
    background: var(--sw-accent);
    color: #fff;
}

/* 絵文字パレット（下部シート）。 */
.staffworks-emoji-picker {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(440px, 100%);
    max-height: 56vh;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: var(--sw-panel);
    border: 1px solid var(--sw-line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}

.staffworks-emoji-picker[hidden] {
    display: none;
}

.staffworks-emoji-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-weight: 800;
    border-bottom: 1px solid var(--sw-line);
}

.staffworks-app .staffworks-emoji-close {
    min-height: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    line-height: 1;
}

.staffworks-emoji-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--sw-line);
}

.staffworks-app .staffworks-emoji-tab {
    flex: 0 0 auto;
    min-height: 0;
    width: 38px;
    height: 38px;
    padding: 4px;
    border: 0;
    background: transparent;
}

.staffworks-app .staffworks-emoji-tab.is-active {
    background: var(--sw-subtle);
}

.staffworks-emoji-tab img.staffworks-emoji {
    width: 24px;
    height: 24px;
    margin: 0;
    vertical-align: middle;
}

.staffworks-emoji-panels {
    overflow-y: auto;
    padding: 8px;
}

.staffworks-emoji-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 2px;
}

.staffworks-emoji-grid.is-active {
    display: grid;
}

.staffworks-app .staffworks-emoji-cell {
    min-height: 0;
    height: 40px;
    padding: 4px;
    border: 0;
    background: transparent;
    border-radius: 8px;
}

.staffworks-app .staffworks-emoji-cell:hover {
    background: var(--sw-subtle);
}

.staffworks-emoji-cell img.staffworks-emoji {
    width: 26px;
    height: 26px;
    margin: 0;
    vertical-align: middle;
}

/* 画像の拡大表示（ライトボックス）。 */
.staffworks-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staffworks-lightbox[hidden] {
    display: none;
}

.staffworks-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
}

.staffworks-lightbox-img {
    position: relative;
    max-width: 94vw;
    max-height: 88vh;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.staffworks-app .staffworks-lightbox-close,
.staffworks-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    font-size: 22px;
    line-height: 1;
}

.staffworks-lightbox-download {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.staffworks-message-reads {
    margin-top: 0;
    font-size: 11px;
    color: var(--sw-muted);
    cursor: default;
}

.staffworks-message-item.is-mine .staffworks-message-reads {
    text-align: right;
}

.staffworks-message-form {
    border-top: 1px solid var(--sw-line);
    padding-top: 12px;
}

/* 送信状態メッセージ（data-message-status）は通常は空。
   空のときは高さ・余白を持たせず、入力欄の下に無駄な余白を作らない。 */
.staffworks-message-form .staffworks-message {
    margin: 6px 0 0;
}
.staffworks-message-form .staffworks-message:empty {
    margin: 0;
    min-height: 0;
}

.staffworks-message-target {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sw-muted);
    margin-bottom: 8px;
}

.staffworks-message-compose {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.staffworks-message-compose textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 44px;
    /* 高さは入力量に応じて JS で自動調整するので、手動リサイズは無効化（LINE と同様）。 */
    resize: none;
    /* 1行目（placeholder含む）を高さ44pxの中で上下中央に見せる。右は絵文字ボタン分あける。 */
    padding: 11px 38px 11px 12px;
    /* テーマが付ける textarea の余白を打ち消し、送信ボタンと下端をそろえる。 */
    margin: 0;
    box-sizing: border-box;
    vertical-align: bottom;
    line-height: 1.4;
}

.staffworks-message-compose .staffworks-primary {
    flex: 0 0 auto;
    min-height: 44px;
    margin: 0;
    box-sizing: border-box;
}

/* 申請の相談スレッド（シフト詳細モーダル内・管理申請カード内で使う） */
.staffworks-shift-thread,
.staffworks-request-thread-area {
    margin-top: 8px;
}

.staffworks-request-thread {
    border-top: 1px solid var(--sw-line);
    padding-top: 10px;
}

.staffworks-thread-list {
    max-height: 38vh;
    margin-bottom: 10px;
}

/* チャットの右下に重ねる「最新へ飛ぶ」ボタン。スクロール領域だけを包むラッパに対して配置する。 */
.staffworks-chat-jump-wrap {
    position: relative;
}

.staffworks-app .staffworks-chat-jump {
    position: absolute;
    right: 14px;
    bottom: 18px;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--sw-line);
    background: var(--sw-panel);
    color: var(--sw-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .92;
    z-index: 5;
}

.staffworks-chat-jump[hidden] {
    display: none;
}

.staffworks-chat-jump .staffworks-icon {
    width: 22px;
    height: 22px;
}

/* 一斉連絡の「以前のメッセージを読み込む」（過去の分割読み込み）。リストの先頭に中央寄せで出す。 */
.staffworks-msg-more {
    text-align: center;
    padding: 4px 0 8px;
}

.staffworks-msg-more .staffworks-text-link {
    font-size: 13px;
}

.staffworks-thread-form {
    border-top: 0;
    padding-top: 0;
}

/* 申請カード（小型）：名前＋変更前後の日時だけ。タップでレビューモーダルを開く */
.staffworks-request-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.staffworks-request-row-name {
    font-weight: 700;
}

.staffworks-request-row-change {
    font-size: 13px;
    color: var(--sw-muted);
}

/* 申請レビューモーダル：承認/却下を上部に固定し、下に変更前後＋連絡チャット */
.staffworks-review-actions {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 8px;
    background: var(--sw-panel);
    padding: 4px 0 10px;
}

.staffworks-review-actions .staffworks-approve,
.staffworks-review-actions .staffworks-reject {
    flex: 1 1 0;
    min-height: 44px;
}

.staffworks-review-thread {
    margin-top: 12px;
}

/* シフト詳細モーダル上部（✗の横）の「シフトの削除申請」チェック */
/* 「.staffworks-form label { display:grid }」に負けないよう詳細度を上げる（チェックボックスが巨大化する不具合の対策） */
.staffworks-modal-head-tools .staffworks-delete-request {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #c0392b;
    cursor: pointer;
    white-space: nowrap;
}

.staffworks-modal-head-tools .staffworks-delete-request input {
    width: auto;
    margin: 0;
}

.staffworks-modal-head-tools .staffworks-delete-request[hidden] {
    display: none;
}

/* シフトに新着の連絡があることを示す💬バッジ（カレンダー／一覧のシフト枠に表示） */
.staffworks-chat-flag {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: var(--sw-accent-2);
    color: #17211b;
    border-radius: 999px;
    padding: 2px 6px;
    margin-right: 4px;
    vertical-align: middle;
}

/* 変更・削除の申請があるシフトに出す目印（チャット未読マークに類似）。 */
.staffworks-request-flag {
    display: inline-flex;
    align-items: center;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    background: #f59e0b;
    color: #3a2606;
    border-radius: 999px;
    padding: 2px 6px;
    margin-right: 4px;
    vertical-align: middle;
}

/* 承認されないまま日が過ぎた申請（削未）。要対応ではないため、グレーで控えめに示す。 */
.staffworks-request-flag.is-expired {
    background: #9ca3af;
    color: #26292e;
}

/* シフトモーダル内の承認/却下の見出し。 */
.staffworks-decision-title {
    margin: 0 0 6px;
    font-weight: 800;
    font-size: 13px;
    color: var(--sw-text);
}

/* 前渡し（仮払い）の記録・超過メモ（フロントの給与運用画面）。 */
.staffworks-advance-card,
.staffworks-advance-alert-card {
    margin-top: 14px;
}

.staffworks-advance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.staffworks-advance-table th,
.staffworks-advance-table td {
    border: 1px solid var(--sw-line);
    padding: 6px 8px;
    text-align: left;
}

.staffworks-advance-table td.num {
    text-align: right;
    white-space: nowrap;
}

.staffworks-advance-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    border: 1px solid #e2a3a3;
    border-left: 4px solid #c53d3d;
    border-radius: 7px;
    background: #fff2f2;
    padding: 8px 12px;
    color: #702323;
}

.staffworks-advance-alert-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.staffworks-advance-alert-body small {
    color: #7b4a4a;
}

/* 給与明細の差引内訳：前渡し・超過の行。 */
.staffworks-payroll-advance strong {
    color: var(--sw-text);
}

.staffworks-payroll-over strong {
    color: #b23535;
}

/* 未ログイン・権限不足時の案内カード（PWAでログアウトしても行き止まりにしない）。 */
.staffworks-access-notice {
    max-width: 420px;
    margin: 24px auto;
    padding: 22px 20px;
    background: var(--sw-panel, #fff);
    border: 1px solid var(--sw-line, #e2e6e2);
    border-radius: 14px;
    text-align: center;
}
.staffworks-access-notice-text {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sw-text, #1b1f1b);
}
.staffworks-access-notice-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.staffworks-app a.staffworks-access-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
}
.staffworks-app a.staffworks-access-login:hover {
    text-decoration: none;
    opacity: 0.92;
}
@media (max-width: 680px) {
    .staffworks-app a.staffworks-access-login {
        width: 100%;
    }
}

/* 保存成功などを知らせる中央トースト（モーダル風）。各保存ボタンの成功時に表示する。 */
.staffworks-savetoast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 100020;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 48px);
    padding: 14px 20px;
    border-radius: 12px;
    background: rgba(20, 28, 24, 0.92);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.staffworks-savetoast.is-show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.staffworks-savetoast-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2e9c6a;
    flex: 0 0 auto;
}
.staffworks-savetoast.is-error .staffworks-savetoast-ico {
    background: #d9534f;
}

/* ============================================================
   基本設定ウィザード（フロント・オーナー専用）
   ============================================================ */
.staffworks-wizard-box {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: 90vh;
    overflow: hidden;
    padding: 0;
}
.staffworks-wizard-box > .staffworks-modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sw-line);
    margin: 0;
}
.staffworks-wiz-headinfo { min-width: 0; }
.staffworks-wiz-progress { display: block; font-size: 12px; font-weight: 700; color: var(--sw-muted); }
.staffworks-wiz-title { margin: 2px 0 0; font-size: 1.05rem; }
.staffworks-wiz-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px; }
.staffworks-wiz-stepintro { margin: 0 0 14px; color: var(--sw-muted); font-size: 13px; }
.staffworks-wiz-welcome { margin: 8px 0 0 1.2em; }
.staffworks-wiz-welcome li { margin: 6px 0; }

/* 利用規定の許諾（はじめに） */
.staffworks-wiz-terms {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--sw-line);
    border-radius: 10px;
    background: var(--sw-subtle);
}
.staffworks-wiz-terms-head { margin: 0 0 6px; }
.staffworks-wiz-terms-body { margin: 0 0 10px; font-size: 13px; line-height: 1.7; }
.staffworks-wiz-terms-body p { margin: 0 0 8px; }
.staffworks-wiz-terms-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 700;
}
.staffworks-wiz-terms-check input[type="checkbox"] { width: auto; min-height: 0; flex: 0 0 auto; margin-top: 2px; }
.staffworks-wiz-terms-hint { margin: 8px 0 0; font-size: 12px; color: #d70015; }
.staffworks-wiz-terms-agreed { margin: 8px 0 0; font-size: 12px; color: var(--sw-muted); }
.staffworks-wiz-terms-check input[type="checkbox"]:disabled { opacity: .6; }

/* 源泉などの補足（見える注記） */
.staffworks-wiz-subnote { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--sw-muted); }

/* 源泉所得税かんたんガイドへのリンク（見出し右横など） */
.staffworks-guidelink,
.staffworks-wiz-guidelink {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sw-accent);
    text-decoration: underline;
    white-space: nowrap;
}

/* 同意前の「次へ」抑止 */
.staffworks-app .staffworks-wiz-nav .staffworks-primary.is-disabled,
.staffworks-app .staffworks-wiz-nav .staffworks-primary:disabled { opacity: .5; cursor: not-allowed; }

/* 1項目＝カード */
.staffworks-wiz-field {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--sw-line);
    border-radius: 10px;
    background: var(--sw-panel);
}
.staffworks-wiz-label { font-weight: 800; margin: 0 0 6px; }
.staffworks-wiz-tip {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sw-text);
    background: var(--sw-subtle);
    border-left: 3px solid var(--sw-accent);
    padding: 8px 10px;
    border-radius: 4px;
}
.staffworks-wiz-control select,
.staffworks-wiz-control input[type="text"],
.staffworks-wiz-control input[type="number"],
.staffworks-wiz-control input[type="time"] { max-width: 100%; }
.staffworks-wiz-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 10px 6px 0; }
.staffworks-wiz-inline-check { display: block; margin-top: 8px; }
.staffworks-wiz-more { margin-top: 8px; }
.staffworks-wiz-more > summary { cursor: pointer; color: var(--sw-accent); font-size: 12px; }
.staffworks-wiz-more-body { margin-top: 6px; font-size: 12px; color: var(--sw-muted); line-height: 1.6; }

/* アイコン／ロゴ */
.staffworks-wiz-media { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.staffworks-wiz-media-preview { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--sw-line); object-fit: cover; background: #fff; }
.staffworks-wiz-media-preview.is-empty { background: var(--sw-subtle); }
/* ロゴは正方形に切り取らず、縮小した画像全体が見えるようにする。 */
.staffworks-wiz-media[data-wiz-media="logo"] .staffworks-wiz-media-preview { width: auto; max-width: 140px; height: 48px; object-fit: contain; }

/* 店舗 */
.staffworks-wiz-station { display: grid; gap: 8px; }
.staffworks-wiz-sub { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--sw-muted); }
.staffworks-wiz-geo-row { display: flex; gap: 10px; }
.staffworks-wiz-geo-row > * { flex: 1; }
.staffworks-wiz-geo-msg { font-size: 12px; color: var(--sw-muted); }

/* 手当・控除 */
.staffworks-wiz-defs { display: grid; gap: 6px; }
.staffworks-wiz-defrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.staffworks-wiz-defrow input[type="text"],
.staffworks-wiz-defrow select { min-width: 0; }
/* 手当：項目名60% / 単位20% / 課税20% を1行に収める。 */
.staffworks-wiz-defs[data-wiz-defs="allowance"] .staffworks-wiz-defrow input[type="text"] { flex: 6 1 0; }
.staffworks-wiz-defs[data-wiz-defs="allowance"] .staffworks-wiz-defrow select { flex: 2 1 0; }
.staffworks-wiz-defs[data-wiz-defs="allowance"] .staffworks-wiz-defrow .staffworks-wiz-tax { flex: 2 1 0; justify-content: center; }
/* 控除：項目名70% / 単位30% を1行に収める。 */
.staffworks-wiz-defs[data-wiz-defs="deduction"] .staffworks-wiz-defrow input[type="text"] { flex: 7 1 0; }
.staffworks-wiz-defs[data-wiz-defs="deduction"] .staffworks-wiz-defrow select { flex: 3 1 0; }
.staffworks-wiz-tax { font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
/* ウィザードの手当・控除：選択値欄は行の下に全幅、削除は小さな×、追加は行の下。 */
.staffworks-wiz-def-options { flex: 1 1 100%; margin-top: 2px; }

/* スマホ：かんたん設定の手当・控除の行は、項目名・単位・課税・入力方式・削除を1行に
   並べると狭すぎて見切れるため、2段に分ける（1段目＝項目名の全幅／2段目＝単位・課税・入力方式・削除）。
   行ごとに枠を付けて、どこまでが1項目かも分かりやすくする。
   注意：select には共通の width:100% が効いているため、flex-basis を 0 にして
   2段目の中で均等に分け合わせる（basis:auto だと width:100% が効いて1つずつ縦に落ちる）。 */
@media (max-width: 560px) {
    .staffworks-wiz-defrow {
        row-gap: 6px;
        padding: 8px;
        border: 1px solid var(--sw-line);
        border-radius: 8px;
        background: var(--sw-panel);
    }

    .staffworks-wiz-defs[data-wiz-defs="allowance"] .staffworks-wiz-defrow input[type="text"],
    .staffworks-wiz-defs[data-wiz-defs="deduction"] .staffworks-wiz-defrow input[type="text"] {
        flex: 1 1 100%;
    }

    .staffworks-wiz-defs[data-wiz-defs="allowance"] .staffworks-wiz-defrow select,
    .staffworks-wiz-defs[data-wiz-defs="deduction"] .staffworks-wiz-defrow select {
        flex: 1 1 0;
        min-width: 0;
    }

    .staffworks-wiz-defs[data-wiz-defs="allowance"] .staffworks-wiz-defrow .staffworks-wiz-tax,
    .staffworks-wiz-defrow .staffworks-wiz-def-del {
        flex: 0 0 auto;
    }
}
.staffworks-wiz-def-del { flex: 0 0 auto; background: none; border: none; color: #b23; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.staffworks-wiz-def-add { margin-top: 4px; }

/* 個人設定モーダル（メニューの「個人設定」）。文字の大きさ・通知設定など本人ごとの設定。 */
.staffworks-app .staffworks-personal-box { max-width: 480px; }
.staffworks-app .staffworks-personal-body { display: grid; gap: 12px; }
.staffworks-app .staffworks-personal-note {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--sw-muted);
}

/* 給与明細の金額プルダウン（選択登録式）。プルダウンの下に「その他」の自由入力欄が出る。 */
.staffworks-app .staffworks-money-select { display: flex; flex-direction: column; gap: 4px; }
/* 金額プルダウンは「1,000円」などの選択値が読める幅を必ず確保する（スマホの狭いセルでも見切れない）。
   給与表は横スクロールするので、列がその分広がっても問題ない。 */
.staffworks-app .staffworks-money-select select { width: 100%; min-width: 110px; }
.staffworks-app .staffworks-money-other { width: 100%; }
/* 「その他」以外を選んでいるときは自由入力欄を隠す。給与明細セル内 input への
   display:inline-block !important（レイアウト調整用）に負けないよう、より詳細度の高い
   !important で確実に非表示にする（0や選択肢内の値では出さない）。 */
.staffworks-app .staffworks-money-other[hidden] { display: none !important; }

/* 休憩 */
.staffworks-wiz-breaks { display: grid; gap: 8px; }
.staffworks-wiz-breaks input { width: 84px; }

/* マネージャー権限：項目名を左、チェックを右端に置き、間に区切り線を入れる。 */
.staffworks-wiz-perms { display: grid; gap: 0; }
.staffworks-wiz-perm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--sw-line);
    font-weight: 600;
}
.staffworks-wiz-perm:last-child { border-bottom: 0; }
.staffworks-wiz-perm-name { flex: 1 1 auto; min-width: 0; }
.staffworks-wiz-perm input[type="checkbox"] { flex: 0 0 auto; }

/* フッター */
.staffworks-wiz-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--sw-line);
}
.staffworks-wiz-nav { display: flex; gap: 8px; }

/* セカンダリボタン（ウィザード内で使用） */
.staffworks-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--sw-line);
    background: var(--sw-panel);
    color: var(--sw-text);
    font-weight: 700;
    cursor: pointer;
}
.staffworks-secondary:hover { background: var(--sw-subtle); }

/* ステップの表示切替（テーマCSSに display を打ち消されても確実に隠す）。 */
.staffworks-wiz-step[hidden] { display: none !important; }

/* カラーチップ付きセレクト（外観テーマ・アクセント・チャット背景）。 */
.staffworks-wiz-colorpick { display: inline-flex; align-items: center; }
.staffworks-wiz-colorpick .staffworks-color-chip {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex: 0 0 auto;
    background: transparent;
}

/* 2項目を左右50%ずつ横並びに配置する。 */
.staffworks-wiz-pair { display: flex; gap: 10px; align-items: flex-end; }
.staffworks-wiz-pair > * { flex: 1 1 0; min-width: 0; }
.staffworks-wiz-pair .staffworks-wiz-sub > span,
.staffworks-wiz-pair select,
.staffworks-wiz-pair input { width: 100%; }

/* 公開シフトの表示期間：入力と「日先まで」を横並びにし、入力幅を抑える。 */
.staffworks-wiz-daysahead { flex-wrap: nowrap; }
.staffworks-wiz-daysahead input[type="number"] { width: 90px; }

/* ウィザード内のチェックボックス／ラジオは標準サイズに戻す（.staffworks-app input の width:100% を打ち消す）。 */
.staffworks-wiz-body input[type="checkbox"],
.staffworks-wiz-body input[type="radio"] {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

/* はじめに・完了の挨拶文は読みやすく18px。 */
.staffworks-wiz-step[data-wiz-step="0"] p,
.staffworks-wiz-step[data-wiz-step="0"] li,
.staffworks-wiz-step[data-wiz-step="7"] p { font-size: 18px; line-height: 1.7; }

/* アイコン付きセグメント選択（ラインアイコン＋ラベル）。 */
.staffworks-wiz-iconchoice { display: flex; gap: 8px; }
.staffworks-wiz-iconbtn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    border: 1px solid var(--sw-line);
    border-radius: 10px;
    background: var(--sw-panel);
    color: var(--sw-text);
    font-weight: 700;
    cursor: pointer;
}
.staffworks-wiz-iconbtn .staffworks-icon { width: 22px; height: 22px; }
.staffworks-wiz-iconbtn.is-active {
    border-color: var(--sw-accent);
    background: var(--sw-subtle);
    color: var(--sw-accent);
}

/* 見出しのQRアイコンボタン（基本設定ウィザードの左横）。 */
.staffworks-panel-heading .staffworks-heading-action-icon {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.staffworks-panel-heading .staffworks-heading-action-icon .staffworks-icon { width: 18px; height: 18px; }

/* 打刻QR・NFC モーダル。 */
.staffworks-qr-body { display: grid; gap: 12px; }
.staffworks-qr-intro { margin: 0; font-size: 13px; color: var(--sw-muted); }
.staffworks-qr-figure { text-align: center; }
.staffworks-qr-img {
    width: 240px;
    height: 240px;
    max-width: 100%;
    border: 8px solid #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    background: #fff;
}
.staffworks-qr-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.staffworks-qr-url { display: grid; gap: 6px; }
.staffworks-qr-url-row { display: flex; gap: 8px; align-items: center; }
.staffworks-qr-url-row input { flex: 1 1 auto; min-width: 0; }
.staffworks-qr-url-row .staffworks-secondary { flex: 0 0 auto; }
.staffworks-qr-note { font-size: 12px; }
/* 打刻QR・NFCの「使い方」（常時表示・16px）。 */
.staffworks-qr-howto {
    font-size: 16px;
    line-height: 1.7;
    border-top: 1px solid var(--sw-line);
    padding-top: 12px;
}
.staffworks-qr-howto p { margin: 0 0 10px; font-size: 16px; line-height: 1.7; }
.staffworks-qr-howto p:last-child { margin-bottom: 0; }
.staffworks-qr-howto-head { color: var(--sw-text); }
.staffworks-wiz-finish-head { margin-top: 14px; }

/* 案内ポップアップ（OKで閉じる）。document.body 直下に出すため、
   .staffworks-app スコープのCSS変数に頼らず固定色で描く。 */
.staffworks-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100030;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .5);
}
.staffworks-popup-box {
    width: min(420px, 100%);
    background: #ffffff;
    color: #17211b;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .3);
}
.staffworks-popup-text {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.8;
    color: #17211b;
    font-weight: 600;
    white-space: pre-line; /* 確認文の改行（\n）をそのまま表示する */
}
.staffworks-popup-ok {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 16px;
    border: 0;
    border-radius: 10px;
    background: #146c53;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}
.staffworks-popup-ok:hover { background: #115c46; }
/* 確認ダイアログ（swConfirm）：キャンセル＋実行の2ボタン。破壊的操作は赤で示す。 */
.staffworks-popup-actions {
    display: flex;
    gap: 10px;
}
.staffworks-popup-actions .staffworks-popup-ok { flex: 1 1 0; }
.staffworks-popup-cancel {
    flex: 1 1 0;
    min-height: 46px;
    padding: 11px 16px;
    border: 1px solid #cfd8d2;
    border-radius: 10px;
    background: #ffffff;
    color: #17211b;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}
.staffworks-popup-cancel:hover { background: #f2f5f3; }
.staffworks-popup-ok.is-danger { background: #c0392b; }
.staffworks-popup-ok.is-danger:hover { background: #a93226; }

/* タイムカード打刻承認モーダル。 */
.staffworks-tc-approve-intro { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--sw-muted); }
.staffworks-tc-approve-item {
    border: 1px solid var(--sw-line);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 12px;
    background: var(--sw-panel);
}
.staffworks-tc-approve-item:last-child { margin-bottom: 0; }
.staffworks-tc-approve-name { font-weight: 800; margin-bottom: 8px; }
.staffworks-tc-approve-item .staffworks-chip { margin-bottom: 8px; }
.staffworks-tc-approve-field {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sw-muted);
    margin-bottom: 10px;
}
.staffworks-tc-approve-note {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--sw-muted);
    white-space: pre-line;
}
/* 承認・取消ボタンは横並びで幅いっぱいに分け合う。 */
.staffworks-tc-approve-actions { display: flex; gap: 8px; }
.staffworks-tc-approve-actions .staffworks-tc-approve-yes,
.staffworks-tc-approve-actions .staffworks-tc-approve-no { flex: 1 1 0; min-width: 0; }
.staffworks-tc-back { display: inline-block; margin-top: 10px; }

/* 承認待ち一覧（複数件のときの選択リスト）。 */
.staffworks-tc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.staffworks-tc-listrow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--sw-line);
    border-radius: 10px;
    background: var(--sw-panel);
    color: var(--sw-text);
    cursor: pointer;
}
@media (hover: hover) {
    .staffworks-tc-listrow:hover { background: var(--sw-subtle); }
}
.staffworks-tc-listrow-main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.staffworks-tc-listrow-name { font-weight: 800; }
.staffworks-tc-listrow-time { font-size: 12px; color: var(--sw-muted); }

/* QRが読めないときの「管理者の要承認で打刻する」ボタン（読み取りをやめるの下・小さめ）。
   .staffworks-app button の min-height:44px / font-size:16px を上書きするため詳細度を上げる。 */
.staffworks-scan-fallback-wrap { margin: 8px 0 0; text-align: center; }
.staffworks-app .staffworks-scan-fallback-btn {
    display: inline-block;
    width: auto;
    min-height: 0;
    padding: 4px 10px;
    border: 1px solid var(--sw-line);
    border-radius: 7px;
    background: var(--sw-panel);
    color: var(--sw-muted);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.staffworks-app .staffworks-scan-fallback-btn:hover { background: var(--sw-subtle); }