:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #1f2933;
  --muted: #6b7785;
  --line: #d9dee4;
  --primary: #2f6f9f;
  --primary-dark: #245777;
  --side: #1f3a4d;
  --side-text: #dce6ee;
  --ok: #2e7d4f;
  --warn: #b7791f;
  --err: #c0392b;
  --sat: #2b6cb0;
  --sun: #c53030;
  --tint: #eaf3fb;
  --tint-line: #b6d0e8;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
a { color: var(--primary); }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 0 0 12px; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 210px; flex-shrink: 0; background: var(--side); color: var(--side-text); display: flex; flex-direction: column; padding: 12px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar a { color: var(--side-text); text-decoration: none; padding: 8px 18px; display: block; }
.sidebar a:hover { background: rgba(255,255,255,.08); }
.sidebar a.active { background: var(--primary); color: #fff; }
.sidebar .brand { font-weight: bold; font-size: 16px; padding-bottom: 14px; }
.nav-group { font-size: 11px; opacity: .7; padding: 14px 18px 4px; letter-spacing: .05em; }
.nav-user { margin-top: auto; padding: 12px 18px; font-size: 12px; border-top: 1px solid rgba(255,255,255,.15); }
.main { flex: 1; padding: 24px 28px; min-width: 0; }
.center-page { display: flex; flex-direction: column; align-items: center; padding-top: 6vh; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; margin-bottom: 18px; }
.narrow { width: 380px; max-width: calc(100vw - 32px); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.flash.success { background: #e6f4ea; color: var(--ok); }
.flash.error { background: #fdecea; color: var(--err); }
.flash.info { background: var(--tint); color: var(--primary-dark); }
.alerts { margin: 0; padding-left: 18px; }
.alerts li.error, .alerts li.err { color: var(--err); font-weight: bold; }
.alerts li.warn { color: var(--warn); }
.error-box { white-space: pre-wrap; background: #fff; border: 1px solid var(--line); padding: 12px; max-height: 60vh; overflow: auto; }

.btn, button.btn { display: inline-block; border: 1px solid var(--line); background: #fff; color: var(--text); padding: 7px 14px; border-radius: 6px; cursor: pointer; text-decoration: none; font-size: 14px; }
.btn:hover { background: #f0f3f6; }
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-dark); }
.btn.danger { color: var(--err); border-color: #e7b3ad; }
.btn.small { padding: 3px 8px; font-size: 12px; }
button.link { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; font-size: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar form { display: flex; gap: 6px; align-items: center; margin: 0; }

.form { display: grid; gap: 12px; }
.form label, .grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.form label.inline, .grid label.inline { flex-direction: row; align-items: center; gap: 6px; color: var(--text); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.grid .wide { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 0 0 16px; }
legend { font-weight: bold; padding: 0 6px; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--text); }
/* R44: キーボードで Tab を押したときだけ出る「本文へ移動」(左のメニューを飛ばす) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10001; padding: 8px 14px; background: #fff; color: #1a3d6b; border: 2px solid #1a3d6b; border-radius: 0 0 8px 0; font-weight: bold; }
.skip-link:focus { left: 0; }
#main-content:focus { outline: none; }
/* R44: 長い選択肢の select が、枠・画面の外にはみ出さないように(表の中は、列の幅をつぶさないよう除く) */
select { max-width: 100%; }
td select, th select { max-width: none; }
input[type=checkbox] { width: 16px; height: 16px; }
textarea { min-height: 60px; resize: vertical; }
.checks { display: flex; gap: 10px; flex-wrap: wrap; color: var(--text); }

.table-wrap { overflow-x: auto; }
.table { border-collapse: collapse; width: 100%; background: #fff; }
.table th, .table td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.table th { background: #eef2f5; font-weight: normal; color: #3b4652; white-space: nowrap; }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.table tr.total td { font-weight: bold; background: #f7f9fb; }
.table input[type=text], .table input:not([type]), .table input[type=number], .table input[type=time], .table select { width: 100%; min-width: 60px; }
.table textarea { width: 100%; min-width: 200px; min-height: 40px; }

.cal { border-collapse: collapse; font-size: 12px; background: #fff; }
.cal th, .cal td { border: 1px solid var(--line); padding: 2px; text-align: center; min-width: 30px; }
.cal th.name, .cal td.name { text-align: left; white-space: nowrap; padding: 2px 8px; position: sticky; left: 0; background: #fff; z-index: 1; }
.cal th { background: #eef2f5; font-weight: normal; }
.cal .sat { color: var(--sat); }
.cal .sun { color: var(--sun); }
.cal td.closed { background: #f1f1f1; }
.cal select { font-size: 11px; padding: 1px; border: 0; background: transparent; width: 44px; }
.cal td.on { background: #dceefb; }
.over { color: var(--err); font-weight: bold; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #eef2f5; }
.badge.ok { background: #e6f4ea; color: var(--ok); }
.badge.warn { background: #fdf3e1; color: var(--warn); }
.badge.err { background: #fdecea; color: var(--err); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.stat .label { font-size: 12px; color: var(--muted); }
.stat .value { font-size: 22px; font-weight: bold; margin-top: 4px; }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs a.active { color: var(--primary); border-color: var(--primary); }
.doc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.doc-list .card { margin: 0; }
.doc-list p { margin: 4px 0 10px; }

/* 画面が狭いとき(半画面など)は、左のメニューはそのままで、本文を横にスクロールさせる。スマホ幅(520px以下)だけ縦に積む */
@media (min-width: 521px) {
  .layout { min-width: 930px; }
  .sidebar { left: 0; z-index: 5; }
}
@media (max-width: 520px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; padding: 6px; }
  .sidebar a { padding: 6px 10px; }
  .nav-group { width: 100%; padding: 6px 10px 2px; }
  .nav-user { width: 100%; margin-top: 6px; }
  .nav-sortable, .nav-block { display: contents; } /* 狭い画面では、並べ替えの囲みも横並びに流す */
  .main { padding: 16px; }
}
@media print {
  .sidebar, .actions, .toolbar, .no-print { display: none !important; }
  /* R39: 画面の操作の部品(タブ・知らせの帯・「ⓘ 説明を見る」・ボタン・表の中の編集/削除)を、印刷に出さない。紙に残したい知らせは .print-keep */
  .tabs, .flash:not(.print-keep), details.note, .main .btn, .main .btn-mini, .main button.link, .table td button, .u4-allbar, .clamp-btn { display: none !important; }
  /* R39: 表の見出しは、印刷では折り返す(画面の nowrap のままだと、列の多い表が用紙の幅を超えて、右の列が切れた) */
  .table th { white-space: normal; }
  .main { padding: 0; }
  .card { border: 0; }
}

/* シフト */
.tabs.seg { border-bottom: 0; margin-bottom: 8px; }
.tabs.seg a { border: 1px solid var(--line); border-radius: 4px; }
.tabs.seg a.active { background: var(--tint); border-color: var(--primary); }
.cal .shift-name { font-weight: bold; }
.req { color: #777; font-size: 11px; }
.req.ng { color: var(--sun); }
.shift-list td.sat { color: var(--sat); }
.shift-list td.sun { color: var(--sun); }
.shift-list tr.closed td { background: #f1f1f1; }
.bulk { background: #f6f9fc; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; }
.bulk-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.shift-grid select { width: 82px; font-size: 11px; }
.shift-grid select.changed { background: #fff6d6; }
.shift-grid td.name { min-width: 64px; }
.shift-grid { width: 100%; table-layout: fixed; }
.shift-grid th.name, .shift-grid td.name { width: 58px; min-width: 0; padding: 2px 4px; position: static; }
.shift-grid th, .shift-grid td { min-width: 0; }
.shift-grid select { width: 100%; min-width: 0; padding: 0; }
.shift-grid .req { font-size: 10px; word-break: break-all; }
@media (max-width: 700px) { /* スマホ: 1日の欄が細くなりすぎないよう、表を広げて横にスクロールする */
  .shift-grid { width: auto; table-layout: auto; }
  .shift-grid th:not(.name), .shift-grid td:not(.name) { min-width: 44px; }
  .shift-grid select { min-width: 40px; }
}
.table-wrap + .table-wrap { margin-top: 10px; }
.cal td.pad { border: 0; background: transparent; }
.shift-grid .time-cell { font-size: 10px; line-height: 1.2; color: #444; height: 26px; }
.shift-grid .time-cell { padding: 1px; height: auto; }
.shift-grid .time-cell input { width: 100%; box-sizing: border-box; font-size: 10px; padding: 1px 0; text-align: center; border: 1px solid #ccd; display: block; }
.shift-grid .time-cell.bad input { border-color: var(--sun); background: #fff0f0; }
/* 時間の入力欄: 未入力は薄い灰色の文字、入力済みは緑の枠と背景(エラーの赤と区別) */
.shift-grid .time-cell input::placeholder { color: #aab; }
.shift-grid .time-cell input:not(:placeholder-shown) { border-color: #2f9e62; background: #e9f7ef; color: #14532d; font-weight: bold; }
.shift-grid .time-cell.bad input:not(:placeholder-shown) { border-color: var(--sun); background: #fff0f0; color: #a02020; }
.deadline { background: #fff8e1; border: 1px solid #f0d78c; border-radius: 6px; padding: 8px 14px; margin-bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.deadline.over { background: #fff0f0; border-color: #e0a0a0; color: #a02020; }
.deadline .ok { color: #14532d; }
.badge-unsub { color: var(--sun); font-size: 10px; white-space: nowrap; }
.btn.submit { background: #2f9e62; border-color: #2f9e62; color: #fff; }
.sub-no { color: var(--sun); font-weight: bold; }
.sub-ok { color: #14532d; font-weight: bold; }
/* 必須項目の印 */
.req-mark { color: #c53030; font-weight: bold; margin: 0 3px; }
.req-note { color: #666; font-size: 12px; margin: 4px 0 8px; }
.req-note .req-mark { margin: 0; }
/* 必須の設定が未了(左のメニュー・タブ・欄)。src/lib/setup_check.js */
.sidebar a.nav-todo { color: #ffd2c2; background: rgba(229, 83, 61, .18); }
.sidebar a.nav-todo.active { background: var(--primary); color: #fff; }
.nav-todo-mark { display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 10px; line-height: 16px; border-radius: 8px; background: #e5533d; color: #fff; vertical-align: 1px; }
.tabs a.tab-todo { color: #b42318; background: #fff1ee; border-radius: 4px 4px 0 0; }
.tabs a.tab-todo.active { border-color: #c53030; }
label.req-todo input, label.req-todo select, label.req-todo textarea { background: #fff1ee; border-color: #e5533d; }
/* 勤務体制一覧表: これからの日(予定)・日ごとの配置の不足 */
.kinmu td.kinmu-plan, .kinmu-plan-sample { color: #8a94a3; font-style: italic; background: #f6f7f9; }
.kinmu td.kinmu-short { background: #fdecea; color: #b42318; font-weight: 700; }
.kinmu tr.kinmu-daily th { text-align: left; font-weight: 600; background: #f3f6fa; }
/* ホームの表: 列を詰める */
table.hm-today th, table.hm-today td { padding: 4px 6px; font-size: 13px; white-space: nowrap; }
table.hm-today td.hm-act { white-space: normal; min-width: 6em; }
.req-todo-box { background: #fff1ee; border: 1px solid #f3b4a8; border-radius: 6px; padding: 6px 8px; }

.cal-draft .row-label { width: 34px; font-size: 11px; background: #eef2f5; font-weight: normal; }
.cal-draft .req-row td { background: #fafafa; height: 20px; }
.cal-draft .req-row td.closed, .cal-draft .draft-row td.closed { background: #f1f1f1; }
.cal-draft td { min-width: 38px; }
.cal .cell-in { width: 100%; min-width: 36px; box-sizing: border-box; font-size: 11px; padding: 2px 1px; text-align: center; border: 1px solid transparent; background: transparent; }
.cal .cell-in:focus { border-color: #4a90c2; background: #fff; }
.cal .cell-in.changed { background: #fffbe0; }
.btn-mini { font-size: 10px; padding: 0 4px; cursor: pointer; }
.chip { display: inline-block; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; margin: 2px; }

.cal-draft .time-cell { padding: 1px; }
.cal-draft .time-cell input { width: 100%; min-width: 34px; box-sizing: border-box; font-size: 10px; padding: 1px 0; text-align: center; border: 1px solid #ccd; display: block; }
.cal-draft .time-cell input::placeholder { color: #aab; }
.cal-draft .time-cell input:not(:placeholder-shown) { border-color: #2f9e62; background: #e9f7ef; color: #14532d; font-weight: bold; }
.cal-draft .time-cell.bad input:not(:placeholder-shown) { border-color: var(--sun); background: #fff0f0; color: #a02020; }
.cal-draft td.name .btn-mini { margin-top: 3px; }

.cal-draft .check-row td { height: 18px; background: #fafcff; }
.cal-draft .chk, .cal-draft .chk-col { margin: 0; width: 13px; height: 13px; }

/* 利用予定: 通所時間 */
.cal .time-row td.time-cell { padding: 1px; background: #f7f7f7; }
.cal .time-row td.time-cell.on { background: #e9f7ef; }
.cal .time-row input { width: 100%; min-width: 40px; letter-spacing: -0.2px; box-sizing: border-box; font-size: 10px; padding: 1px 0; text-align: center; border: 1px solid #ccd; display: block; }
.cal .time-row input:disabled { background: transparent; border-color: transparent; }
.cal .time-row input:not(:placeholder-shown):not(:disabled) { border-color: #2f9e62; background: #fff; font-weight: bold; }
.cal input.tm { display: block; width: 100%; min-width: 34px; box-sizing: border-box; font-size: 10px; padding: 1px 0; text-align: center; border: 1px solid #ccd; }
.cal input.tm:not(:placeholder-shown):not(:disabled) { border-color: #2f9e62; background: #fff; font-weight: bold; }
.cal input.tm:disabled { background: transparent; border-color: transparent; }
.cal .kcell { display: flex; flex-direction: column; align-items: center; margin-bottom: 2px; }
.cal .kind-ctl { white-space: nowrap; margin-top: 2px; }

/* 日別一覧 */
.day-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 8px 0; }
.day-panel { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; background: #fff; }
.day-panel h3 { margin: 0 0 6px; font-size: 1.05em; display: flex; justify-content: space-between; align-items: baseline; }
.day-panel .day-count { font-size: 1.5em; font-weight: bold; }
.day-panel .day-count small { font-size: .55em; font-weight: normal; margin-left: 2px; }
.day-panel.pick { border-top: 4px solid #2b8a3e; }
.day-panel.use { border-top: 4px solid #1c7ed6; }
.day-panel.meal { border-top: 4px solid #f08c00; }
.day-panel.drop { border-top: 4px solid #7048e8; }
.day-panel ul { list-style: none; margin: 0; padding: 0; }
.day-panel li { display: flex; gap: 10px; padding: 4px 0; border-top: 1px solid #eef1f4; align-items: baseline; }
.day-panel li:first-child { border-top: 0; }
.day-panel .t { min-width: 6.5em; font-weight: bold; font-variant-numeric: tabular-nums; }
.day-panel .t.none { color: #999; font-weight: normal; font-size: .85em; }
.day-panel .t.odd { color: #c92a2a; }

/* 利用者設定: 曜日ごとの詳細 */
.wd-detail { margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: #f7fafc; }
.wd-detail summary { cursor: pointer; font-weight: bold; }
.wd-table { width: auto; margin-top: 6px; }
.wd-table td, .wd-table th { padding: 3px 8px; text-align: center; }
.wd-table input[type=time] { width: 7.5em; }
.wd-table input:disabled { opacity: .35; }

/* 当日の強調(日付の列・行) */
.cal th.today-col { background: #ffd43b; font-weight: bold; }
.cal td.today-col { box-shadow: inset 2px 0 0 #f59f00, inset -2px 0 0 #f59f00; }
.cal td.today-col:not(.on):not(.closed):not(.time-cell) { background: #fff3bf; }
tr.today-row td { background: #fff3bf; }
.btn.today-btn { box-shadow: inset 0 -3px 0 #f59f00; }

.cal tr.staff-row td { background: #f1f8f4; padding: 2px; }
.cal tr.staff-row td.name { white-space: nowrap; }
.cal tr.staff-row input { width: 2.6em; padding: 2px 0; text-align: center; box-sizing: border-box; }
.cal tr.sum-row td { background: #eef4fb; font-weight: bold; text-align: center; }
.cal tr.sum-row td.name { text-align: left; white-space: nowrap; }
#wq-msg { color: var(--err); display: block; margin-top: 4px; } #wq-msg[hidden] { display: none; }
.cal tr.staff-row td { text-align: center; font-weight: bold; }
.btn.line-ask { background: #06c755; border-color: #06c755; color: #fff; }
.cal tr.thick-b td { border-bottom: 3px solid #5a6b7d; }
.cal-wrap { max-height: calc(100vh - 150px); overflow: auto; }
.cal tr.stuck th, .cal tr.stuck td { position: sticky; z-index: 3; }
.cal tr.stuck th.name, .cal tr.stuck td.name { z-index: 4; }
.cal tr.stuck th { background: #eef2f5; }
/* 固定行は罫線が一緒に動かず透けるため、罫線を box-shadow で描く */
.cal tr.stuck th, .cal tr.stuck td { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.cal tr.stuck.thick-b td { border-bottom: 1px solid var(--line); box-shadow: inset -1px 0 0 var(--line), inset 0 -3px 0 #5a6b7d; }

/* タイムスケジュール */
.tl-wrap { overflow: auto; max-height: 75vh; }
table.tl { border-collapse: separate; border-spacing: 0; }
table.tl th, table.tl td { border: 1px solid var(--line); padding: 4px 6px; min-width: 7.5em; background: #fff; vertical-align: middle; }
table.tl thead th { position: sticky; top: 0; z-index: 2; background: #f1f4f8; }
table.tl th.tl-h { position: sticky; left: 0; z-index: 1; min-width: 11em; text-align: left; background: #f1f4f8; }
table.tl thead th.tl-h { z-index: 3; }
table.tl select, table.tl input[type=time] { width: 100%; box-sizing: border-box; margin: 1px 0; }
table.tl .tl-na { color: #bbb; text-align: center; background: #f6f6f6; }
tr.tl-pick th.tl-h { box-shadow: inset 4px 0 #2b8a3e; }
tr.tl-drop th.tl-h { box-shadow: inset 4px 0 #7048e8; }
tr.tl-act th.tl-h { box-shadow: inset 4px 0 #1c7ed6; }

/* 利用予定表: 固定行がスクロールで透けないよう、罫線をセル自身に持たせる(border-collapse を使わない) */
.cal.sched { border-collapse: separate; border-spacing: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal.sched th, .cal.sched td { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal.sched tr.thick-b td, .cal.sched tr.stuck.thick-b td { border-bottom: 3px solid #5a6b7d; box-shadow: none; }
.cal.sched tr.stuck th, .cal.sched tr.stuck td { box-shadow: none; }
.cal.sched td.today-col { box-shadow: none; border-left: 2px solid #f59f00; border-right: 2px solid #f59f00; }
.cal.sched td.pad { background: #fff; }

/* 印刷・PDF */
.print-only { display: none; }
.tabs .print-btn { margin-left: auto; align-self: center; }
@page { margin: 10mm; } /* D-189: 用紙の向きは、全体では決めない(縦が自然な帳票が横にならないように)。横にしたい画面は views/partials/header.ejs の LANDSCAPE_PRINT、印刷のボタンのある画面は public/print-fit.js が指定 */
@media print {
  .print-only { display: block; margin: 0 0 6px; font-size: 14pt; }
  body { background: #fff; }
  .cal-wrap, .tl-wrap, .table-wrap { max-height: none !important; overflow: visible !important; }
  .cal tr.stuck th, .cal tr.stuck td, table.tl thead th, table.tl th.tl-h { position: static !important; }
  table, .day-panel { break-inside: auto; }
  tr, .day-panel { break-inside: avoid; }
  table.tl select, table.tl input[type=time], .cal select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.cal tr.usage-row th, .cal tr.usage-row td { background: #eef4fb; font-weight: bold; }
.cal tr.usage-row th.name { text-align: left; white-space: nowrap; }
.cal tr.usage-row td.closed { background: #f1f1f1; }
/* 暫定シフト: 施設外就労の予定・日ごとの必要数と過不足 */
.cal tr.off-row th, .cal tr.off-row td { background: #f3f8ee; }
.cal tr.need-row th, .cal tr.need-row td { background: #fbf8ee; font-weight: normal; }
.cal td.off-cell { padding: 1px; }
.cal td.off-cell input { width: 100%; min-width: 34px; box-sizing: border-box; font-size: 10px; padding: 1px 0; text-align: center; border: 1px solid #ccd; display: block; }
.cal td.diff-short { background: #fde2e2 !important; color: #a02020; font-weight: bold; }
.cal td.diff-ok { background: #e9f7ef !important; color: #14532d; }
/* 配置の目安(シフト一覧の上) */
.staffing-box h3 { margin-top: 0; }
.staffing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.sg-item { border: 1px solid #dde3ea; border-radius: 8px; padding: 8px 12px; background: #f8fafc; }
.sg-label { font-size: 12px; color: #556; }
.sg-num { font-size: 24px; font-weight: bold; }
.sg-item.sg-short { border-color: #e7a0a0; background: #fdeeee; }
.sg-item.sg-short .sg-num { color: #b42318; }
.sg-item.sg-ok .sg-num { color: #14532d; }
.sg-warn { color: #b42318; font-weight: bold; margin: 8px 0 0; }
.br-row { margin: 4px 0; }
.cal tr.conf-row .cell-in { min-width: 40px; }
.cal tr.conf-row td.time-cell input::placeholder { color: #999; }

/* 送迎ルート表 */
.rt-sec { margin: 10px 0 18px; }
.rt-sec h3 { margin: 6px 0; }
.rt-board { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.rt-col { flex: 0 0 190px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; }
.rt-col h4 { margin: 0; padding: 6px 8px; background: #eef2f5; border-radius: 6px 6px 0 0; font-size: .95em; }
.rt-col.rt-un h4 { background: #fff3bf; }
.rt-col.rt-car h4 { background: #dceefb; }
.rt-col select { width: 100%; margin-top: 4px; }
.rt-list { min-height: 70px; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.rt-list.over { background: #e7f5ff; outline: 2px dashed #4a90c2; outline-offset: -3px; }
.rt-card { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; background: #fff; border: 1px solid #ccd5df; border-radius: 5px; cursor: grab; user-select: none; }
.rt-card.dragging { opacity: .4; }
.rt-time { font-weight: bold; font-variant-numeric: tabular-nums; min-width: 3.4em; }
.rt-time.none { color: #c92a2a; font-weight: normal; font-size: .8em; }
.rt-addwrap { flex: 0 0 auto; align-self: flex-start; }
.rt-tpl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
@media print {
  .rt-board { overflow: visible; flex-wrap: wrap; }
  .rt-addwrap, .rt-del, .rt-col select { display: none; }
  .rt-card { cursor: default; }
}

.rt-card { flex-wrap: wrap; }
.rt-place { flex: 1 0 100%; box-sizing: border-box; font-size: .85em; padding: 2px 4px; border: 1px solid #ccd5df; border-radius: 3px; background: #fffef5; user-select: text; cursor: text; }
.rt-place:placeholder-shown { background: #fff; }
@media print { .rt-place { border: 0; background: transparent; padding: 0; } .rt-place:placeholder-shown { display: none; } }

/* 利用者の打刻 */
.punch-clock { font-size: 1.6em; font-weight: bold; font-variant-numeric: tabular-nums; }
.punch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.punch-sep { grid-column: 1 / -1; margin: 10px 0 0; font-size: 1em; color: var(--muted); }
.punch-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; }
.punch-card[hidden] { display: none; }
.punch-card.in { background: #ebfbee; border-color: #2b8a3e; }
.punch-card.done { background: #f1f3f5; }
.punch-name { font-weight: bold; font-size: 1.1em; margin-bottom: 4px; }
.punch-btns { display: flex; gap: 8px; margin-top: 8px; }
.punch-btns .btn { flex: 1; padding: 10px 0; font-size: 1.05em; }

/* 支援記録の詳細入力 */
.card .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin: 10px 0; }
.card .form-grid label, .rec-wide { display: flex; flex-direction: column; gap: 3px; font-size: .9em; }
.rec-wide { margin: 10px 0; }
.rec-wide textarea, .rec-wide input { width: 100%; box-sizing: border-box; }
.rec-acts { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.rec-acts label.inline { margin-right: 12px; flex-direction: row; }
fieldset[hidden] { display: none; }

/* 日別支援予定の印刷 */
.plan-card .print-btn { margin-left: auto; }
@media print {
  .plan-card table { border-collapse: collapse; width: 100%; }
  .plan-card th, .plan-card td { border: 1px solid #666; padding: 3px 6px; }
  .plan-card select, .plan-card input[type=time], .plan-card input:not([type=checkbox]) { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; width: auto; }
  .plan-card select { text-overflow: clip; }
}
.punch-card .punch-name a { text-decoration: none; color: inherit; }
.punch-card .punch-go { display: block; text-align: center; margin-top: 8px; padding: 10px 0; }
.punch-one { max-width: 560px; }
.punch-opts { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.punch-opts select { padding: 6px 8px; }
.punch-grid.by-kana .ord-handle { display: none; }
/* 打刻の表示の大きさ(標準 / 大 / 特大 / 最大)。利用者の一覧と、1人の打刻画面の両方 */
html[data-punch-size="1"] .punch-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
html[data-punch-size="1"] .punch-name { font-size: 1.6em; }
html[data-punch-size="1"] .punch-time { font-size: 1.15em; }
html[data-punch-size="1"] .punch-card .punch-go { padding: 16px 0; font-size: 1.4em; }
html[data-punch-size="2"] .punch-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
html[data-punch-size="2"] .punch-name { font-size: 2.2em; }
html[data-punch-size="2"] .punch-time { font-size: 1.5em; }
html[data-punch-size="2"] .punch-card .punch-go { padding: 22px 0; font-size: 1.9em; }
html[data-punch-size="3"] .punch-grid { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); }
html[data-punch-size="3"] .punch-name { font-size: 3em; }
html[data-punch-size="3"] .punch-time { font-size: 2em; }
html[data-punch-size="3"] .punch-card .punch-go { padding: 30px 0; font-size: 2.6em; }
html[data-punch-size="1"] .punch-one { max-width: 760px; }
html[data-punch-size="2"] .punch-one { max-width: 960px; }
html[data-punch-size="3"] .punch-one { max-width: 1200px; }
html[data-punch-size="1"] .punch-big { font-size: 4.5em; }
html[data-punch-size="2"] .punch-big { font-size: 6em; }
html[data-punch-size="3"] .punch-big { font-size: 8em; }
html[data-punch-size="1"] .punch-one-btns .btn { padding: 32px 0; font-size: 2.2em; }
html[data-punch-size="2"] .punch-one-btns .btn { padding: 44px 0; font-size: 3em; }
html[data-punch-size="3"] .punch-one-btns .btn { padding: 60px 0; font-size: 4em; }
html[data-punch-size="1"] .punch-one h2, html[data-punch-size="1"] .punch-state { font-size: 1.5em; }
html[data-punch-size="2"] .punch-one h2, html[data-punch-size="2"] .punch-state { font-size: 2em; }
html[data-punch-size="3"] .punch-one h2, html[data-punch-size="3"] .punch-state { font-size: 2.6em; }
.punch-big { font-size: 3.2em; margin: 8px 0; }
.punch-state { font-size: 1.2em; }
.punch-one-btns .btn { padding: 22px 0; font-size: 1.6em; }
.punch-card .punch-go { background: #2b8a3e; border-color: #2b8a3e; color: #fff; font-weight: bold; }
.punch-card .punch-go:hover { background: #237032; }
.punch-card.in .punch-go { background: #e8590c; border-color: #e8590c; }
.punch-card.in .punch-go:hover { background: #c44a0a; }
.punch-card.done .punch-go { background: #868e96; border-color: #868e96; }

/* 勤務体制一覧表 */
table.kinmu th, table.kinmu td { border: 1px solid var(--line); padding: 3px 5px; }
table.kinmu td.num { text-align: center; }
table.kinmu .nowrap { white-space: nowrap; }
table.kinmu tr.kinmu-cross td { background: #f3f6fa; }
.offsite-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 8px; }
.offsite-kind label.inline { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; color: var(--text); }
.offsite-kind label.inline input[type=radio] { width: auto; margin: 0; }
@media print { .kinmu-card table { border-collapse: collapse; width: 100%; font-size: 9pt; } .kinmu-card table th, .kinmu-card table td { border: 1px solid #666; } }

/* 支援記録: 作業のチェック(押しやすいチップ形式) */
.rec-acts .act-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.act-chip { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-size: 1em; user-select: none; }
.act-chip input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.act-chip:hover { background: #f1f6fb; }
.act-chip:has(input:checked) { background: var(--tint); border-color: var(--primary); color: var(--primary); font-weight: bold; }

.punch-sub-btns { margin-top: 10px; }
.punch-sub-btns .btn { padding: 14px 0; font-size: 1.15em; }
.full-day { margin-top: 10px; }

/* 目標工賃達成指導員・調理員のシフト */
.role-box { margin-top: 18px; }
.role-sec { margin: 8px 0 14px; }
.role-sec h4 { margin: 4px 0; }
.role-cal td.time-cell input[type=time] { width: 70px; display: block; font-size: .8em; padding: 1px 2px; }
.role-cal td.closed { background: #f1f1f1; }
.role-warn { color: #b45309; }
.role-add { margin: 4px 0; }
.role-brk { display: block; font-size: .75em; white-space: nowrap; cursor: pointer; }
.role-brk input { margin-right: 2px; }
.role-brk-note { margin-left: 8px; }

/* 連絡ツールの起動ボタン(サイドバー) */
.nav-sub { padding: 4px 14px 0; font-size: .75em; color: #9fb3c8; }
.nav-comm { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 8px; }
.sidebar .nav-comm a.comm-btn { padding: 4px 10px; border-radius: 4px; color: #fff; font-size: .85em; text-decoration: none; }
.comm-line { background: #06c755; } .comm-chatwork { background: #e6402a; } .comm-mail { background: #5b7083; }

/* 設定画面の小見出し */
.sub-head { margin: 14px 0 4px; padding: 3px 0 3px 10px; border-left: 5px solid var(--primary); font-size: 1.05em; font-weight: bold; color: #1a202c; }
.sub-head + .muted.small { margin: 0 0 6px 15px; }

/* 請求書・領収書 */
.doc-sheet { max-width: 800px; margin: 0 auto; background: #fff; }
.doc-title { text-align: center; letter-spacing: .3em; margin: 6px 0 16px; }
.doc-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.doc-partner { font-size: 1.3em; border-bottom: 2px solid #333; padding-bottom: 2px; margin-bottom: 4px; }
.doc-from { text-align: right; }
.doc-total { font-size: 1.2em; border-bottom: 2px solid #333; margin: 10px 0 6px; padding: 4px 0; }
.doc-total b { font-size: 1.4em; margin-left: 10px; }
.doc-subject { margin: 4px 0; }
.doc-items { margin-top: 12px; }
.doc-note { margin-top: 14px; border: 1px solid var(--line); padding: 8px; white-space: pre-wrap; }

/* ドラッグで並べ替え */
.drag-h { cursor: grab; color: #888; width: 24px; text-align: center; user-select: none; }
table.sortable tr.dragging { opacity: .4; }
table.sortable tr.drag-over td { border-top: 3px solid var(--primary); }

.self-box { margin: 4px 0 10px; padding: 8px 10px; background: #f3f8fc; border: 1px solid var(--line); border-radius: 4px; }

/* 取引先別集計: 列幅を固定し、売上・経費の表で同じ幅にそろえる */
table.sum-table { table-layout: fixed; width: 780px; }
table.sum-table th:first-child { width: 260px; }
table.sum-table th.num { width: 130px; }
table.sum-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.doc-greeting { margin: 10px 0; line-height: 1.7; }

/* 請求書作成: 売上の引用ボックス */
.quote-bar { margin: 12px 0; padding: 8px 12px 10px; background: var(--tint); border: 1px solid var(--tint-line); border-left: 5px solid var(--primary); border-radius: 4px; }
.quote-bar .quote-title { font-weight: bold; color: var(--primary); margin-bottom: 4px; }
.quote-bar .toolbar { margin: 0; }
.quote-sep { display: inline-block; width: 1px; height: 28px; background: var(--tint-line); margin: 0 8px; }

/* 保存ボタン: どのページでも目立たせる(JSで .btn-save を付与)。入力があると光って「未保存」を知らせる */
.btn.btn-save, button.btn.btn-save { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: bold; padding: 8px 20px; box-shadow: 0 2px 4px rgba(47, 111, 159, .35); }
.btn.btn-save:hover { background: var(--primary-dark); }
.btn.btn-save.dirty:not(:disabled) { animation: save-glow 1.4s ease-in-out infinite; }
@keyframes save-glow { 0%, 100% { box-shadow: 0 2px 4px rgba(47, 111, 159, .35); } 50% { box-shadow: 0 0 0 4px rgba(245, 159, 0, .55); } }
@media print { .btn.btn-save { display: none; } }

/* 請求書の送付ボタン(発行方法別) */
.btn.send-line { background: #06c755; border-color: #06c755; color: #fff; }
.btn.send-chatwork { background: #e6402a; border-color: #e6402a; color: #fff; }
.btn.send-mail { background: #5b7083; border-color: #5b7083; color: #fff; }
.nowrap { white-space: nowrap; }

/* ロゴ・提供元の表記 */
.sidebar .brand .brand-logo { display: block; max-width: 100%; max-height: 56px; margin-bottom: 6px; }
.center-page .card.narrow { width: 480px; max-width: calc(100vw - 32px); }

/* 個別支援計画 */
.isp-summary { margin: 8px 0; }
.isp-table td { vertical-align: top; }
.isp-table tr.isp-err td:first-child { border-left: 4px solid var(--err); }
.isp-table tr.isp-warn td:first-child { border-left: 4px solid var(--warn); }
.isp-table tr.isp-ok td:first-child { border-left: 4px solid var(--ok); }
.isp-alerts { margin: 0; padding-left: 18px; font-size: 12px; }
.isp-alerts li.err { color: #b02a1c; font-weight: bold; }
.isp-alerts li.warn { color: #9a6b00; }
.isp-steps { display: flex; gap: 3px; margin-bottom: 2px; }
.isp-dot { width: 14px; height: 14px; border-radius: 50%; background: #d5dde5; display: inline-block; }
.isp-dot.done { background: #2e9e5b; }
.isp-dot.cur { background: #fff; border: 3px solid var(--primary); }
.isp-flow { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 10px 0; }
.isp-flow li { flex: 1 1 110px; background: #eef2f6; border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; font-size: 13px; border-bottom: 4px solid #d5dde5; }
.isp-flow li.done { background: #e4f4ea; border-bottom-color: #2e9e5b; }
.isp-flow li.cur { background: #e8f1fb; border-bottom-color: var(--primary); font-weight: bold; }
.isp-flow li small { color: var(--muted); font-weight: normal; min-height: 1.2em; }
.isp-date { display: flex; gap: 4px; }
.isp-date input { flex: 1; }

.isp-old { display: inline-block; font-size: 18px; line-height: 1; padding: 2px 3px; text-decoration: none; color: var(--primary); }
.isp-old:hover { background: #e8f1fb; border-radius: 4px; }

/* 書類の印影(赤) */
.doc-seal { position: absolute; right: 4px; top: 18px; width: 72px; height: 72px; object-fit: contain; mix-blend-mode: multiply; opacity: .92; pointer-events: none; }

/* 収支タブ: 工賃支払総額の右に、仕訳・PDFのボタンを右詰めで置く */
.stats.stats-with-actions { grid-template-columns: repeat(4, minmax(170px, 1fr)) auto; }
.stats-actions { display: flex; flex-direction: column; gap: 6px; justify-self: end; align-self: center; }
.stats-actions .btn { text-align: center; white-space: nowrap; }
@media (max-width: 1100px) { .stats.stats-with-actions { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .stats-actions { justify-self: start; flex-direction: row; flex-wrap: wrap; } }

/* 個別支援計画: 工程ボタンでの移動・在宅/食事/施設外の欄 */
html { scroll-behavior: smooth; }
fieldset[id], section[id] { scroll-margin-top: 12px; }
.isp-flow li { padding: 0; }
.isp-flow li a { display: flex; flex-direction: column; padding: 6px 8px; color: inherit; text-decoration: none; height: 100%; }
.isp-flow li a:hover { background: rgba(47, 111, 159, .1); border-radius: 6px; }
.isp-opt { border-left: 4px solid var(--tint-line); padding: 4px 10px; margin: 8px 0; background: #f7fafd; }
.isp-opt-body { margin-top: 6px; }

/* 個別支援計画の詳細: 利用者名と工程の行を固定し、その下をスクロールする */
.isp-sticky { position: sticky; top: 0; z-index: 20; background: var(--bg, #f5f7fa); padding: 6px 0 2px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.isp-sticky .toolbar { margin: 0 0 4px; }
.isp-sticky .isp-flow { margin: 4px 0; }
#isp-form fieldset[id], #monitoring { scroll-margin-top: 130px; }
@media print { .isp-sticky { position: static; } }

/* 利用者設定: 利用終了者は薄いグレー */
.table tr.client-ended td { background: #eceff2; color: #7b8590; }
.table tr.client-ended a { color: #7b8590; }

/* サイドメニュー: リンクの先頭に「・」を付けて見やすくする */
.sidebar > a:not(.brand):not(.nav-home)::before, .nav-sortable > a::before { content: "・"; opacity: .7; margin-right: 2px; }
.sidebar > a:not(.brand):hover::before, .sidebar > a.active::before, .nav-sortable > a:hover::before, .nav-sortable > a.active::before { opacity: 1; }

/* 支援記録の一覧: 項目が多いので、利用者名の列を左に固定して横にスクロールできるようにする */
.rec-list td, .rec-list th { vertical-align: top; }
.rec-list th:first-child, .rec-list td:first-child { position: sticky; left: 0; z-index: 2; background: inherit; box-shadow: 1px 0 0 var(--line); }
.rec-list thead th:first-child { background: #eef2f6; }
.rec-list td:first-child { background-color: #fff; }
.rec-list tr[style*="background"] td:first-child { background-color: inherit; }
.rec-list textarea { width: 100%; }
.rec-acts-cell { min-width: 150px; }
.rec-acts-cell .act-chip { display: inline-block; margin: 0 6px 2px 0; white-space: nowrap; }

/* 複数選択のプルダウン(作業など) */
.multi-dd { position: relative; display: block; }
.multi-dd > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 6px 28px 6px 8px; min-width: 130px; max-width: 220px; position: relative; font-size: 14px; }
.multi-dd > summary::-webkit-details-marker { display: none; }
.multi-dd > summary::after { content: "▼"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--muted); }
.multi-dd[open] > summary { border-color: var(--primary); }
.multi-dd-panel { position: fixed; z-index: 50; background: #fff; border: 1px solid var(--primary); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); padding: 6px 8px; max-height: 260px; overflow-y: auto; }
.multi-dd-panel label { display: flex; align-items: center; gap: 6px; padding: 4px 2px; white-space: nowrap; cursor: pointer; }

/* 支援記録の一覧: 8名ごとに横スクロール(各段の列幅は固定) */
.rec-chunk { overflow-x: scroll; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 6px; }
.rec-list td input:not([type="checkbox"]):not([type="radio"]), .rec-list td select, .rec-list td textarea { width: 100%; box-sizing: border-box; min-width: 0 !important; }
.rec-list td, .rec-list th { overflow-wrap: anywhere; }

/* 支援記録の一覧: 項目名の行を画面の上に固定する(横スクロールは各段とそろえる) */
.rec-head { position: sticky; top: 0; z-index: 30; overflow: hidden; border: 1px solid var(--line); border-radius: 6px 6px 0 0; background: #eef2f6; margin-bottom: 6px; }
.rec-head .rec-list thead th { background: #eef2f6; }

/* 広報 */
.pr-article { border-left: 4px solid var(--tint-line); padding: 4px 10px; margin: 8px 0; background: #f7fafd; }

/* 事業所報の写真入力 */
.pr-img-box { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--tint-line); border-radius: 8px; background: #fff; }
.pr-img-title { font-size: 13px; font-weight: bold; margin-bottom: 4px; }
.pr-img-preview { margin: 4px 0; min-height: 28px; }
.pr-img-preview img { max-height: 120px; max-width: 100%; border-radius: 6px; border: 1px solid var(--line); }

.pr-ai { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pr-ai .pr-ai-text { flex: 1; min-width: 260px; }

.pr-tai { margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pr-tai .pr-tai-memo { flex: 1; min-width: 260px; }

.pr-hs { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 4px 0 8px; }
/* チェック欄を横に並べる(支援記録の「請求(国保連)に使う項目」など) */
.checks label.inline { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: .95em; color: var(--text); }
.checks label.inline input[type=checkbox] { width: auto; margin: 0; }
/* 左メニューの並べ替え(ドラッグ中) */
.nav-sortable a[draggable] { cursor: grab; }
/* 並び替え: 項目のないグループは、並び替え中だけ表示する(そこへ移せるように) */
.sidebar:not(.nav-sorting) .nav-block.nav-empty { display: none; }
.sidebar.nav-sorting .nav-sortable { min-height: 34px; outline: 1px dashed rgba(255,255,255,.35); outline-offset: -3px; margin: 0 6px 4px; }
.sidebar.nav-sorting .nav-sortable > a { cursor: grab; }
.nav-sort-toggle { display: flex; align-items: center; gap: 6px; padding: 10px 18px 4px; font-size: 12px; color: var(--side-text); opacity: .85; cursor: pointer; }
.nav-sort-toggle input { width: auto; margin: 0; }
.nav-sortable a.nav-dragging { opacity: .5; background: rgba(255,255,255,.15); }

/* 情報発信: AIで文章を作成 */
.post-ai { background: #eef5fa; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.post-ai-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.post-ai textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 80px; }
.post-ai-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* 記事・ページ作成: 見出しと本文のまとまり */
.pg-sec { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.pg-sec textarea, .pg-sec input { width: 100%; box-sizing: border-box; }
.post-ai-note { font-size: 12px; color: var(--muted); }
.post-ai-note summary { cursor: pointer; }
.post-ai-note ul { margin: 6px 0 0; padding-left: 20px; }
.ai-dialog { border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; max-width: 460px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.ai-dialog::backdrop { background: rgba(0,0,0,.35); }
.ai-dialog h3 { margin: 0 0 8px; font-size: 16px; }
.ai-dialog p { margin: 0 0 14px; line-height: 1.6; }
.ai-dialog .actions { display: flex; gap: 10px; justify-content: flex-end; }
.keep-dialog { max-width: 520px; }
.keep-dialog .keep-actions { flex-wrap: wrap; }
.keep-dialog .keep-actions p { flex-basis: 100%; margin: 0; }
.snapshot-history summary { cursor: pointer; }
.post-paper { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.post-paper[hidden], #post-print[hidden], #img-download[hidden] { display: none !important; }
.post-img-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 8px; }
.post-paper { flex-direction: column; align-items: flex-start; gap: 10px; }
.post-paper-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.fl-chip { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.fl-chip i { display: block; width: 18px; height: 18px; border-radius: 3px; }
.post-imgs { display: flex; flex-direction: column; gap: 8px; }
.post-imgs .pr-img-box { margin: 0; }
.post-img-layout[hidden], #post-img-layout[hidden] { display: none !important; }
.post-short { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.post-preview-btn[hidden] { display: none !important; }
/* 左メニュー: スタッフメニューと管理者メニューの間を広げ、見出しを読みやすくする */
.nav-block .nav-group { font-size: 14px; font-weight: bold; opacity: 1; padding-top: 12px; }
.nav-group { font-size: 14px; font-weight: bold; opacity: 1; }
.sidebar a.nav-home { font-size: 14px; font-weight: bold; }
.nav-block[data-group="admin"] { margin-top: 26px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .25); }
[hidden] { display: none !important; } /* .btn などの display に負けないようにする */

/* 利用者設定: 在宅・施設外就労・施設外支援 */
.use-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.use-chip { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; min-width: 250px; background: #fff; cursor: pointer; }
.use-chip:has(input:checked) { border-color: var(--primary); background: var(--tint); }
.use-chip small { display: block; color: var(--muted); font-weight: normal; margin-top: 2px; }
.use-chip.use-off { background: #f2f2f2; color: #888; }
.home-detail { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.home-note { background: #fff8e6; border: 1px solid #f0d58a; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; }
.home-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 12px; background: #fcfdfe; display: flex; flex-direction: column; gap: 8px; }
.home-box.wide { grid-column: 1 / -1; }
.home-box h4 { margin: 0; font-size: 14px; color: var(--primary-dark); }
.home-box label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.home-box label.inline { flex-direction: row; align-items: center; gap: 6px; }
.home-box label.block { display: flex; flex-direction: row; align-items: flex-start; gap: 6px; }

/* 在宅支援 */
.hs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; align-items: start; }
.hs-card { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--ok); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.hs-card.hs-off { border-left-color: #c5ccd3; background: #fafbfc; }
.hs-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hs-card h3 { margin: 0; font-size: 17px; }
.hs-links { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.hs-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hs-logs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hs-logs li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 4px 8px; background: #f4f8fb; border-radius: 6px; }
.hs-logs li.from-user { background: #fff8e6; }
.hs-logs .t { font-variant-numeric: tabular-nums; color: var(--muted); }
.hs-logs .c { flex: 1 1 200px; }
.hs-del { margin-left: auto; }
.hs-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.hs-form label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.hs-form label.inline { flex-direction: row; color: var(--text); }
.hs-form .hs-content { flex: 1 1 260px; }
.hs-form .hs-content input { width: 100%; font-size: 15px; }
.hs-form .hs-wide { flex: 1 1 100%; }
.hs-form .hs-wide textarea, .hs-form .hs-wide input[type=text], .hs-form .hs-wide input:not([type=checkbox]) { width: 100%; }
.hs-form .btn-save { min-height: 38px; }
.hs-chips { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px; }
.hs-chips .chip { background: #fff; cursor: pointer; font-size: 12px; padding: 2px 10px; }
.hs-chips .chip:hover { background: var(--tint); border-color: var(--primary); }
.hs-undo { text-align: right; }
.hs-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hs-week { display: inline-block; border-radius: 8px; padding: 2px 8px; margin: 2px 4px 2px 0; border: 1px solid var(--line); }
.hs-week.ok { background: #e6f4ea; border-color: #b9dcc4; color: var(--ok); }
.hs-week.ng { background: #fdecea; border-color: #f1b9b3; color: var(--err); }
.hs-evalpick { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 8px; }
.hs-evalpick label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.hs-summary { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; border: 1px solid; }
.hs-summary.ok { background: #e6f4ea; border-color: #b9dcc4; }
.hs-summary.ng { background: #fdecea; border-color: #f1b9b3; }
.hs-check h3 { margin-top: 0; }
.hs-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 3px; margin-bottom: 6px; }
.hs-day { border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; min-height: 52px; font-size: 11px; display: flex; flex-direction: column; background: #fafbfc; color: #aaa; }
.hs-day .d { font-weight: bold; font-size: 12px; }
.hs-day.sun .d { color: var(--sun); } .hs-day.sat .d { color: var(--sat); }
.hs-day.ok { background: #e6f4ea; border-color: #b9dcc4; color: var(--ok); }
.hs-day.warn { background: #fdf3e1; border-color: #ecd29a; color: var(--warn); }
.hs-day.ng { background: #fdecea; border-color: #f1b9b3; color: var(--err); }
.hs-issues { margin: 6px 0 0; padding-left: 20px; color: var(--err); }
.hs-office { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 4px; }
.hs-office li { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line); }
.hs-office li.ok { background: #f1faf4; } .hs-office li.ng { background: #fff5f4; }
.hs-office .req { display: inline-block; min-width: 3.5em; font-weight: bold; color: var(--primary-dark); }
.hs-req td:first-child { white-space: nowrap; font-weight: bold; color: var(--primary-dark); }
.hs-upload { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.hs-upload label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.hs-upload .wide { grid-column: 1 / -1; }
.hs-upload label.inline { flex-direction: row; align-items: center; gap: 6px; }
.hs-drop { border: 2px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--muted); }
.hs-drop.over { border-color: var(--primary); background: var(--tint); }
.hs-result { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.hs-result .ok { color: var(--ok); } .hs-result .ng { color: var(--err); }
.hs-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.hs-item { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.hs-view { background: #20262c; display: flex; justify-content: center; align-items: center; min-height: 150px; }
.hs-view img, .hs-view video { max-width: 100%; max-height: 240px; display: block; }
.hs-view audio { width: 92%; margin: 40px 0; }
.hs-item figcaption { padding: 8px 10px; font-size: 13px; }
.hs-edit { margin-top: 6px; } .hs-edit form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.hs-edit label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.hs-edit label.inline { flex-direction: row; color: var(--text); gap: 6px; }
.hs-unassigned { border-left: 5px solid var(--warn); }
.hs-assign { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.hs-thumb img { width: 90px; height: 70px; object-fit: cover; border-radius: 6px; display: block; }
.hs-kind { display: inline-block; padding: 6px 10px; background: #eef2f5; border-radius: 6px; }
.pre { white-space: pre-wrap; }

/* 事業所設定: 工賃の設定 / 利用者設定: 工賃・同意書の保管 */
.top-actions { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.wage-rules { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fcfdfe; }
.wr-list { display: flex; flex-direction: column; gap: 8px; }
.wr-row { display: grid; grid-template-columns: 190px 1fr; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); align-items: start; }
.wr-row:first-child { border-top: 0; }
.wr-name { font-weight: bold; display: flex; gap: 6px; align-items: center; }
.wr-body { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.wr-body label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.wr-body label.inline { flex-direction: row; align-items: center; gap: 6px; color: var(--text); }
.wr-body .muted.small { flex: 1 1 100%; }
.wr-extras .table { width: 100%; }
@media (max-width: 700px) { .wr-row { grid-template-columns: 1fr; } }
.wage-cfg { margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.home-docs { border-top: 1px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.doc-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.doc-up { display: flex; flex-direction: column; gap: 4px; }
label.wr-name, .wr-name { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
.wr-line { flex: 1 1 100%; font-size: 13px; }
.wr-tiers { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; background: #f4f8fb; border-radius: 8px; }
.wr-tier { font-size: 13px; }
.wr-body .wr-formula { background: #fff8e6; padding: 4px 8px; border-radius: 6px; }
.wr-body .wr-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.wr-body .wr-kind > label.inline { flex-direction: row; align-items: center; font-size: 14px; }
.wr-body .wr-kind .wr-formula { flex: 1 1 320px; }
.wr-body .wr-sub { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; padding-left: 24px; }

/* 音声入力のマイクボタン */
.mic-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mic-btn { border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 14px; padding: 1px 10px; font-size: 12px; cursor: pointer; line-height: 1.6; }
.mic-btn:hover { background: var(--tint); border-color: var(--primary); }
.mic-btn.on { background: #fdecea; color: var(--err); border-color: var(--err); font-weight: bold; animation: mic-pulse 1.2s infinite; }
@keyframes mic-pulse { 50% { opacity: .6; } }
.no-print .mic-btn, .print-only .mic-btn { }
@media print { .mic-btn { display: none !important; } }
.mic-btn.mic-mini { padding: 0 6px; margin-bottom: 2px; }

/* ホーム: 本日の数字・お知らせの折りたたみ */
.hm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.hm-tile { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; text-decoration: none; color: var(--text); }
a.hm-tile:hover { border-color: var(--primary); background: #f7fafc; }
.hm-tile.static { cursor: default; }
.hm-n { font-size: 26px; font-weight: 700; line-height: 1.1; }
.hm-l { font-size: 12px; color: var(--muted); }
.hm-tile.ok .hm-n { color: var(--ok); }
.hm-tile.warn { border-color: #e6c36a; background: #fffaf0; }
.hm-tile.warn .hm-n { color: var(--warn); }
.hm-tile.err { border-color: #e7b3ad; background: #fff5f4; }
.hm-tile.err .hm-n { color: var(--err); }
.hm-fold { margin-top: 8px; }
.hm-fold > summary { cursor: pointer; list-style: none; color: var(--primary); font-size: 13px; padding: 4px 0; }
.hm-fold > summary::-webkit-details-marker { display: none; }
.hm-fold > summary::before { content: '▶ '; font-size: 11px; }
.hm-fold[open] > summary::before { content: '▼ '; }
.hm-fold[open] > summary { margin-bottom: 6px; }
.hm-fold[open] .hm-more { display: none; }
.hm-fold[open] > summary::after { content: '閉じる'; }
.hm-count { font-size: 14px; font-weight: normal; color: var(--muted); }
.hm-badge { display: inline-block; font-size: 12px; font-weight: normal; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line); }
.hm-badge.err { color: var(--err); border-color: #e7b3ad; background: #fdecea; }
.hm-badge.warn { color: var(--warn); border-color: #e6c36a; background: #fffaf0; }
.hm-badge.ok { color: var(--ok); border-color: #b9dcc3; background: #e6f4ea; }
.hm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.hm-list { margin: 0 0 8px; padding: 0; list-style: none; }
.hm-list li { padding: 5px 0; border-bottom: 1px solid #eef1f4; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 画面の一番下に、常に見える提供元の表記(高さは app.js が測って --credit-h に入れる) */
body { padding-bottom: var(--credit-h, 64px); }
.sidebar { height: calc(100vh - var(--credit-h, 64px)); }
.credit-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; text-align: center; font-size: 11px; line-height: 1.5; color: var(--muted); background: var(--panel); border-top: 1px solid var(--line); padding: 6px 16px; }
.credit-bar a { color: inherit; }
@media print { body { padding-bottom: 0; } }
/* 押せないボタン(エラーが残っている提出など)は、灰色にして、押せないことをはっきりさせる */
.btn:disabled, .btn[disabled], button.btn.btn-save:disabled { background: #c9ced6; border-color: #c9ced6; color: #6b7280; cursor: not-allowed; box-shadow: none; }
.err-note { color: var(--err); font-weight: bold; }

/* 委員会・研修管理 */
.tm-head { text-align: center; font-size: 11px; padding: 6px 2px; min-width: 30px; }
.tm-cell { text-align: center; padding: 4px 2px; white-space: nowrap; }
.tm { font-size: 13px; }
.tm-held { color: var(--ok); }
.tm-plan { color: var(--warn); }

/* 月次推移: 利用の状況(延べ日数・1日平均・1日あたりの金額)を、表の先頭で目立たせる */
.table tr.usage th { background: var(--primary); color: #fff; font-size: 13px; text-align: left; }
.table tr.usage td { background: var(--tint); font-weight: bold; font-size: 15px; border-bottom: 1px solid #c9dcec; }
.table tr.usage td:first-child { border-left: 4px solid var(--primary); }

/* 説明のポップアップ: タイトルにカーソルを合わせる(またはタップ・フォーカス)と表示され、外すと消える */
.tip { position: relative; display: inline-block; cursor: help; outline: none; }
.tip-mark { display: inline-block; width: 18px; height: 18px; line-height: 18px; margin-left: 6px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: bold; text-align: center; vertical-align: 2px; }
.tip-box { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; width: min(560px, 86vw); padding: 10px 14px; background: #fff; color: #222; border: 1px solid var(--primary); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); font-size: 13px; font-weight: normal; line-height: 1.6; text-align: left; }
.tip:hover .tip-box, .tip:focus .tip-box, .tip:focus-within .tip-box { display: block; }

/* 並べ替え(ドラッグ)と、横スクロール・縮小のボタン */
.ord-handle { display: inline-block; cursor: grab; user-select: none; color: #8899aa; font-weight: bold; letter-spacing: -2px; margin-right: 6px; padding: 0 2px; }
.ord-handle:hover { color: var(--primary); }
.ord-handle:active { cursor: grabbing; }
.ord-drag { opacity: .45; }
.ord-toast { display: none; position: fixed; right: 18px; bottom: 18px; z-index: 200; background: #2f9e62; color: #fff; padding: 8px 16px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25); font-size: 14px; }
.ord-toast.bad { background: #c0392b; }
.hs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: #445566; background: #eef4fa; border: 1px solid #c9dcec; border-radius: 6px; padding: 4px 8px; margin: 4px 0; }
.hs-bar[hidden] { display: none; }
.hs-bar .hs-btn { padding: 2px 10px; font-size: 13px; }
.hs-bar .hs-zoom { margin-left: 6px; font-weight: bold; }
.hs-bottom { position: sticky; bottom: 0; z-index: 30; box-shadow: 0 -2px 8px rgba(0,0,0,.12); }
@media print { .hs-bar { display: none !important; } .ord-handle { display: none; } }
/* 契約書類・規定(本文の編集と、印刷用の表示) */
.doc-body { width: 100%; font-family: "BIZ UDMincho", "Yu Mincho", "MS Mincho", serif; font-size: 14px; line-height: 1.7; tab-size: 12; }
.ph-chips .ph-chip { background: #fff; cursor: pointer; font-size: 12px; padding: 2px 10px; }
.ph-chips .ph-chip:hover { background: var(--tint); border-color: var(--primary); }
.badge.muted { background: #eef2f5; color: #667; }
.small.ok { color: var(--ok); } .small.ng { color: var(--err); } .small.warn { color: var(--warn); }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.doc-sheet { max-width: 210mm; margin: 0 auto; padding: 18mm 18mm; font-family: "BIZ UDMincho", "Yu Mincho", "MS Mincho", serif; font-size: 10.5pt; line-height: 1.8; }
.doc-sheet .d-title { text-align: center; font-weight: bold; font-size: 16pt; margin: 4px 0 14px; }
.doc-sheet .d-head { font-weight: bold; margin-top: 10px; }
.doc-sheet .d-p { white-space: pre-wrap; }
.doc-sheet .d-blank { height: 0.9em; }
.doc-sheet .d-row { display: grid; grid-template-columns: 11em 1fr; gap: 8px; }
.doc-sheet .d-row span:nth-child(n+3) { grid-column: 2; }
@media print { .doc-sheet { box-shadow: none; border: 0; padding: 0; max-width: none; } }

.ai-box { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 8px; }
#ai-result .sub-head { margin-top: 6px; }
.ai-notes { background: #fffbea; border: 1px solid #ecd29a; border-radius: 6px; padding: 6px 12px; margin: 6px 0; font-size: 13px; }
.ai-notes ul { margin: 4px 0 0 18px; padding: 0; }

.inline-del { display: inline; margin: 0 0 0 6px; }
button.link.danger-link { color: var(--err); }
/* 情報発信: 制作ツールへの取り込み・自動投稿 */
.pub-box { border: 1px solid #cfe0f1; background: #f5f9fd; border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.pub-box h3 { margin: 0 0 6px; }
.pub-log { margin: 4px 0 0 18px; padding: 0; } .pub-log li.ok { color: var(--ok); } .pub-log li.ng { color: var(--err); }

/* 勤務実績(打刻実績・申請) */
.badge.info { background: #e8f0fb; color: var(--primary); }
table.actual-grid { border-collapse: collapse; font-size: 12px; }
table.actual-grid th, table.actual-grid td { border: 1px solid var(--line); padding: 2px 3px; text-align: center; vertical-align: top; min-width: 44px; }
table.actual-grid td.name { text-align: left; white-space: nowrap; min-width: 110px; }
table.actual-grid td.closed { background: #f4f5f7; }
table.actual-grid td.need { background: #fdecea; }
table.actual-grid td.pend { background: #fffaf0; }
table.actual-grid .ac-shift { color: #667; font-size: 10px; }
table.actual-grid .ac-t { white-space: nowrap; }
table.actual-grid .badge { padding: 0 4px; font-size: 10px; margin: 1px; }
.attend-list td { vertical-align: top; }
.attend-list .req-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.attend-list .req-form input[type=time] { width: 110px; }
.attend-list .req-form input[name=reason], .attend-list .req-form input[name=admin_note] { min-width: 180px; flex: 1; }
.attend-legend .badge { margin-right: 4px; }
table.shift-grid tr.punch-row td.need { background: #fdecea; }
table.shift-grid tr.punch-row td.pend { background: #fffaf0; }
table.shift-grid tr.punch-row .badge { padding: 0 4px; font-size: 10px; }
.attend-list tr.row-need td { background: #fff5f4; }
.attend-list details.req-new summary { display: inline-block; cursor: pointer; list-style: none; }
/* まとめて申請・まとめて受理 */
.attend-list .req-form[hidden], .req-err[hidden] { display: none; }
.attend-list .req-form input[name^=reason_] { min-width: 180px; flex: 1; }
.attend-list .req-new label.req-need { color: var(--err, #b42318); font-weight: 600; }
.attend-list .req-err { flex-basis: 100%; color: var(--err, #b42318); font-weight: 600; }
.attend-list tr.row-err td { background: #fdecea; }
.attend-list tr.row-err td:first-child { box-shadow: inset 4px 0 0 var(--err, #b42318); }
.req-bulk { flex-wrap: wrap; }
.req-bulk .muted { flex-basis: 100%; }

/* 給料計算 */
.slip-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
table.slip input.slip-in { width: 120px; text-align: right; }
table.slip input.slip-in.edited { background: #fff7e0; border-color: #e6c36a; }
.slip-net { font-size: 1.2em; text-align: right; margin: 10px 0; }
.slip-net b { font-size: 1.4em; }
table.slip-work th { font-weight: normal; color: var(--muted); white-space: nowrap; }
table.bonus-table input.edited { background: #fff7e0; border-color: #e6c36a; }

/* チャットボット */
.chat-fab { position: fixed; right: 18px; bottom: 74px; z-index: 900; border: none; border-radius: 22px; padding: 10px 16px; background: var(--primary); color: #fff; font-size: 15px; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }
.chat-panel { position: fixed; right: 18px; bottom: 124px; z-index: 901; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 170px)); background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.25); display: flex; flex-direction: column; }
.chat-panel[hidden] { display: none; }
.chat-panel.inline { position: static; width: auto; height: 70vh; box-shadow: none; }
.chat-head { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.chat-head .chat-x { margin-left: auto; border: none; background: none; font-size: 20px; cursor: pointer; }
.chat-head a { margin-left: auto; }
.chat-head a + .chat-x { margin-left: 4px; }
.chat-log { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 88%; padding: 8px 10px; border-radius: 10px; white-space: pre-wrap; line-height: 1.5; font-size: 14px; }
.chat-msg.bot { background: #f1f4f8; align-self: flex-start; }
.chat-msg.bot.ai { background: #eef6ee; }
.chat-msg.me { background: var(--primary); color: #fff; align-self: flex-end; }
.chat-link { display: block; margin-top: 4px; font-size: 13px; }
.chat-ai { margin-top: 6px; display: block; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--line); }
.chat-chip { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.chat-form { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; }
@media print { .chat-fab, .chat-panel { display: none !important; } }
.ar-terms { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ar-terms select { font-size: 12px; padding: 2px; width: auto; }
#ar-partners td:last-child { min-width: 360px; }
.nav-user .nav-mypage { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 10px; font-size: 12px; color: inherit; text-decoration: none; }
.nav-user .nav-mypage.active { background: rgba(255,255,255,.2); }

/* 見た目の設定(色)。候補は src/lib/appearance.js。標準(青)は :root の値 */
html[data-ui-theme="ai"] { --bg: #f4f6fb; --primary: #34569b; --primary-dark: #27427a; --side: #1d2c4d; --side-text: #dde4f2; --tint: #e7edf8; --tint-line: #bccae6; }
html[data-ui-theme="seiji"] { --bg: #f2f8f8; --primary: #257a76; --primary-dark: #1b5e5b; --side: #1c403e; --side-text: #d6ecea; --tint: #e3f3f2; --tint-line: #b2d8d5; }
html[data-ui-theme="wakakusa"] { --bg: #f3f8f4; --primary: #3a7d57; --primary-dark: #2c6244; --side: #27412f; --side-text: #dcebe0; --tint: #e8f4ec; --tint-line: #b9d9c4; }
html[data-ui-theme="sakura"] { --bg: #fbf5f7; --primary: #b4506f; --primary-dark: #8f3c56; --side: #4a2f3b; --side-text: #f3e1e8; --tint: #fceef3; --tint-line: #efc3d2; }
html[data-ui-theme="sango"] { --bg: #fbf6f3; --primary: #bd4b3a; --primary-dark: #963a2c; --side: #4a2e29; --side-text: #f3e2de; --tint: #fdeee9; --tint-line: #efc6bd; }
html[data-ui-theme="hachimitsu"] { --bg: #fbf8f0; --primary: #99660f; --primary-dark: #7a500b; --side: #40331a; --side-text: #f1e7d0; --tint: #faf1d9; --tint-line: #e6d1a0; }
html[data-ui-theme="fuji"] { --bg: #f7f5fb; --primary: #715aa8; --primary-dark: #59458a; --side: #383058; --side-text: #e6e0f3; --tint: #efeaf8; --tint-line: #cfc4e6; }
html[data-ui-theme="sumi"] { --bg: #f5f5f6; --primary: #4a5568; --primary-dark: #374151; --side: #22272e; --side-text: #e2e5ea; --tint: #eceef2; --tint-line: #c9ced6; }
/* 見た目の設定(フォント)。読み込みが要るものは、選んだときだけ Google Fonts から読み込む */
html[data-ui-font="biz"] body { font-family: "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif; }
html[data-ui-font="noto"] body { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; }
html[data-ui-font="zenkaku"] body { font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; }
html[data-ui-font="zenmaru"] body { font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; }
html[data-ui-font="mplus"] body { font-family: "M PLUS Rounded 1c", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; }
html[data-ui-font="kosugi"] body { font-family: "Kosugi Maru", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; }
button, .btn { font-family: inherit; }
html[data-ui-theme="mizu"] { --bg: #f6fafd; --primary: #36779f; --primary-dark: #2a5d7d; --side: #dcecf6; --side-text: #24445a; --tint: #e9f4fb; --tint-line: #c3dcec; }
html[data-ui-theme="momo"] { --bg: #fffafb; --primary: #b85c7d; --primary-dark: #964763; --side: #fbe3ea; --side-text: #5a2f3e; --tint: #fdeef3; --tint-line: #f2cad8; }
html[data-ui-theme="matcha"] { --bg: #fafdf6; --primary: #4c7d3c; --primary-dark: #3b622e; --side: #e3f0d9; --side-text: #2f4a25; --tint: #eff7e8; --tint-line: #cfe3bf; }
html[data-ui-theme="lemon"] { --bg: #fffef6; --primary: #85710c; --primary-dark: #6a5909; --side: #f8f0c4; --side-text: #4d4208; --tint: #fcf7d9; --tint-line: #ebe0a0; }
html[data-ui-theme="lavender"] { --bg: #fbfaff; --primary: #7a63b0; --primary-dark: #614d93; --side: #e9e3f6; --side-text: #3f3262; --tint: #f0ecfa; --tint-line: #d6cdee; }
html[data-ui-theme="anzu"] { --bg: #fffaf6; --primary: #c0653a; --primary-dark: #9a4f2c; --side: #fde6d8; --side-text: #5c3420; --tint: #feeee3; --tint-line: #f2cdb5; }
html[data-ui-theme="mint"] { --bg: #f5fcfa; --primary: #2f8a7a; --primary-dark: #226b5f; --side: #d8f1ea; --side-text: #1f4a42; --tint: #e4f6f1; --tint-line: #b8e0d6; }
/* 明るい色(サイドメニューが淡い色): 文字は濃い色。ホバー・注意・並び替えの枠も、濃い色で見えるように */
html[data-ui-theme="mizu"] .sidebar a:hover, html[data-ui-theme="momo"] .sidebar a:hover, html[data-ui-theme="matcha"] .sidebar a:hover, html[data-ui-theme="lemon"] .sidebar a:hover, html[data-ui-theme="lavender"] .sidebar a:hover, html[data-ui-theme="anzu"] .sidebar a:hover, html[data-ui-theme="mint"] .sidebar a:hover { background: rgba(0,0,0,.07); }
html[data-ui-theme="mizu"] .sidebar a.nav-todo, html[data-ui-theme="momo"] .sidebar a.nav-todo, html[data-ui-theme="matcha"] .sidebar a.nav-todo, html[data-ui-theme="lemon"] .sidebar a.nav-todo, html[data-ui-theme="lavender"] .sidebar a.nav-todo, html[data-ui-theme="anzu"] .sidebar a.nav-todo, html[data-ui-theme="mint"] .sidebar a.nav-todo { color: #a8341c; background: rgba(229, 83, 61, .14); }
html[data-ui-theme="mizu"] .sidebar.nav-sorting .nav-sortable, html[data-ui-theme="momo"] .sidebar.nav-sorting .nav-sortable, html[data-ui-theme="matcha"] .sidebar.nav-sorting .nav-sortable, html[data-ui-theme="lemon"] .sidebar.nav-sorting .nav-sortable, html[data-ui-theme="lavender"] .sidebar.nav-sorting .nav-sortable, html[data-ui-theme="anzu"] .sidebar.nav-sorting .nav-sortable, html[data-ui-theme="mint"] .sidebar.nav-sorting .nav-sortable { outline-color: rgba(0,0,0,.35); }
html[data-ui-theme="mizu"] .sidebar a.active, html[data-ui-theme="momo"] .sidebar a.active, html[data-ui-theme="matcha"] .sidebar a.active, html[data-ui-theme="lemon"] .sidebar a.active, html[data-ui-theme="lavender"] .sidebar a.active, html[data-ui-theme="anzu"] .sidebar a.active, html[data-ui-theme="mint"] .sidebar a.active { color: #fff; }
html[data-ui-theme="mugi"] { --bg: #fdf6e8; --primary: #a2631a; --primary-dark: #7f4c12; --side: #ecc27c; --side-text: #3d2e12; --tint: #faecd0; --tint-line: #e6c88e; }
html[data-ui-theme="mugi"] .sidebar a:hover { background: rgba(0,0,0,.07); }
html[data-ui-theme="mugi"] .sidebar a.nav-todo { color: #a8341c; background: rgba(229, 83, 61, .14); }
html[data-ui-theme="mugi"] .sidebar.nav-sorting .nav-sortable { outline-color: rgba(0,0,0,.35); }
html[data-ui-theme="mugi"] .sidebar a.active { color: #fff; }

/* 右上: アカウント名・マイページ・ログアウト */
.userbar { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin: -8px 0 8px; font-size: 13px; }
.userbar form { margin: 0; }
.userbar-name { font-weight: bold; margin-right: 4px; }
.userbar-btn { display: inline-block; padding: 3px 12px; border: 1px solid var(--primary); border-radius: 14px; background: #fff; color: var(--primary); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.userbar-btn:hover, .userbar-btn.active { background: var(--primary); color: #fff; }
@media print { .userbar { display: none !important; } }

/* 左メニューのタブ(スタッフ / 管理者 / 経営)。並び替え中は、すべて出す(別のグループへ移せるように) */
.nav-tabs { display: flex; gap: 4px; padding: 10px 10px 4px; }
.nav-tab { flex: 1; padding: 7px 2px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px 6px 0 0; background: transparent; color: var(--side-text); font: inherit; font-size: 13px; font-weight: bold; cursor: pointer; opacity: .75; }
.nav-tab:hover { opacity: 1; background: rgba(255,255,255,.08); }
.nav-tab.on { background: var(--primary); color: #fff; border-color: var(--primary); opacity: 1; }
.sidebar.nav-tabs-on:not(.nav-sorting) .nav-block:not(.nav-active-tab) { display: none; }
.sidebar.nav-tabs-on:not(.nav-sorting) .nav-block .nav-group { display: none; }
.sidebar.nav-tabs-on:not(.nav-sorting) .nav-block[data-group="admin"] { margin-top: 0; border-top: 0; }
.sidebar.nav-tabs-on.nav-sorting .nav-tabs { display: none; }
html[data-ui-theme="mizu"] .nav-tab, html[data-ui-theme="momo"] .nav-tab, html[data-ui-theme="matcha"] .nav-tab, html[data-ui-theme="lemon"] .nav-tab, html[data-ui-theme="lavender"] .nav-tab, html[data-ui-theme="anzu"] .nav-tab, html[data-ui-theme="mint"] .nav-tab, html[data-ui-theme="mugi"] .nav-tab { border-color: rgba(0,0,0,.3); }
html[data-ui-theme="mizu"] .nav-tab.on, html[data-ui-theme="momo"] .nav-tab.on, html[data-ui-theme="matcha"] .nav-tab.on, html[data-ui-theme="lemon"] .nav-tab.on, html[data-ui-theme="lavender"] .nav-tab.on, html[data-ui-theme="anzu"] .nav-tab.on, html[data-ui-theme="mint"] .nav-tab.on, html[data-ui-theme="mugi"] .nav-tab.on { border-color: var(--primary); }

/* ===== 見やすさの見直し(全画面): 文字を少し大きく、角を丸く、ボタン・メニューを大きく ===== */
body { font-size: 15px; line-height: 1.55; }
h1 { font-size: 26px; font-weight: bold; margin-bottom: 18px; }
h2 { font-size: 19px; font-weight: bold; }
h3 { font-size: 16px; }
.small { font-size: 13px; }
.main { padding: 26px 32px; }
.card { border-radius: 16px; border-color: #e1e6ec; padding: 20px 24px; box-shadow: 0 1px 3px rgba(31, 41, 51, .06), 0 4px 14px rgba(31, 41, 51, .05); }
.flash { border-radius: 12px; padding: 12px 16px; font-size: 15px; }
.btn, button.btn { padding: 9px 18px; border-radius: 10px; font-size: 15px; }
.btn.small { padding: 5px 12px; font-size: 13px; border-radius: 8px; }
.btn.btn-save, button.btn.btn-save { padding: 10px 24px; border-radius: 10px; font-size: 15px; }
input, select, textarea { padding: 8px 10px; border-radius: 8px; font-size: 15px; }
.form label, .grid label { font-size: 14px; }
.tabs { gap: 6px; }
.tabs a { padding: 10px 16px; font-size: 15px; border-radius: 10px 10px 0 0; }
.tabs a:hover { background: var(--tint); }
.tabs.seg a { border-radius: 10px; }
.badge { padding: 2px 10px; font-size: 13px; }
.table th, .table td { padding: 8px 10px; }
/* 左のメニュー: 幅を広げ、文字を大きく、項目を丸いボタンの形に(画面が狭いスマホ幅は、そのまま) */
@media (min-width: 521px) {
  .sidebar { width: 252px; }
  .layout { min-width: 980px; }
  .sidebar a { font-size: 16px; padding: 10px 14px; margin: 2px 10px; border-radius: 10px; }
  .sidebar .brand { font-size: 19px; padding: 6px 18px 14px; margin: 0; border-radius: 0; }
  .sidebar a.nav-home { font-size: 17px; }
  .nav-tabs { padding: 12px 10px 6px; gap: 6px; }
  .nav-tab { font-size: 15px; padding: 10px 2px; border-radius: 10px; }
  .nav-group, .nav-block .nav-group { font-size: 15px; padding: 14px 18px 6px; }
  .nav-sort-toggle { font-size: 13px; }
  .sidebar .nav-comm a.comm-btn { margin: 0; padding: 6px 14px; font-size: 14px; border-radius: 8px; }
  .nav-user { font-size: 13px; }
}
.userbar { font-size: 14px; }
.userbar-btn { padding: 5px 14px; font-size: 14px; }

/* 数字のタイル: 説明が2行のタイルがあっても、数字の高さをそろえる(説明は上、数字は下) */
.stat { display: flex; flex-direction: column; border-radius: 14px; }
.stat .label { line-height: 1.4; font-size: 13px; }
.stat .value { margin-top: auto; padding-top: 6px; }
/* ===== 高齢の方にも見やすく: 文字をさらに大きく、薄い文字を濃く、押す場所を大きく ===== */
body { font-size: 17px; line-height: 1.65; }
h1 { font-size: 29px; }
h2 { font-size: 22px; }
h3 { font-size: 19px; }
.small { font-size: 14.5px; }
.muted { color: #4f5a66; }
.btn, button.btn { font-size: 16.5px; padding: 11px 20px; min-height: 44px; }
.btn.small { font-size: 14.5px; padding: 7px 14px; min-height: 36px; }
.btn.btn-save, button.btn.btn-save { font-size: 17px; padding: 12px 28px; }
input, select, textarea { font-size: 16.5px; padding: 10px 12px; }
.form label, .grid label { font-size: 15.5px; }
.table th, .table td { font-size: 16px; padding: 9px 11px; }
.tabs a { font-size: 16.5px; padding: 11px 18px; }
.badge { font-size: 14px; }
.flash { font-size: 16.5px; }
.stat .label { font-size: 14.5px; }
.stat .value { font-size: 26px; }
.userbar, .userbar-btn { font-size: 15px; }
.note { margin: 4px 0 12px; }
.note > summary { cursor: pointer; color: var(--primary); font-weight: bold; font-size: 15px; padding: 5px 0; list-style: none; }
.note > summary::-webkit-details-marker { display: none; }
.note[open] > summary { margin-bottom: 4px; }
@media (min-width: 521px) {
  .sidebar { width: 274px; }
  .layout { min-width: 1020px; }
  .sidebar a { font-size: 17px; padding: 11px 14px; }
  .sidebar a.nav-home { font-size: 18px; }
  .nav-tab { font-size: 16px; padding: 11px 2px; }
  .nav-group, .nav-block .nav-group { font-size: 16px; }
  .sidebar .nav-comm a.comm-btn { font-size: 15px; }
}

/* ソフト名(=ホームへのリンク)を、メニューの項目と同じ丸い形に。ホームを開いているときは、色が付く */
.sidebar a.brand { margin: 4px 10px 8px; padding: 12px 14px; border-radius: 10px; font-size: 19px; font-weight: bold; line-height: 1.35; }
.sidebar a.brand .brand-logo { margin-bottom: 8px; }

/* ページの見出し(ホームなど)と、アカウント・マイページ・ログアウトを、最上段の同じ行に並べる(見出しは左、アカウントは右) */
.userbar { float: right; display: flex; margin: 2px 0 8px 20px; justify-content: flex-end; }
.main > h1 { margin-top: 0; }

/* タブが多いときは、折り返す(文字を縦に割らない) */
.tabs { flex-wrap: wrap; }
.tabs a { white-space: nowrap; }

/* fieldset の中身が広いとき、ページ全体が横にはみ出さないようにする(中身が、fieldset の中で、横に動く) */
fieldset { min-width: 0; }
fieldset > .table, fieldset .table-wrap { max-width: 100%; }

/* タブレット(たて向きなど、幅が狭いとき): 左のメニューを細くして、本文の幅を広げる(横にスクロールしないで済むように) */
@media (min-width: 521px) and (max-width: 1100px) {
  .layout { min-width: 0; }
  .sidebar { width: 206px; }
  .sidebar a { font-size: 16px; padding: 10px 10px; margin: 2px 6px; }
  .sidebar a.brand { font-size: 17px; padding: 10px 10px; margin: 4px 6px 8px; }
  .nav-tab { font-size: 14px; }
  .main { padding: 18px 16px; }
  .userbar { float: none; justify-content: flex-start; margin: 0 0 8px; }
}

/* ガイドツアー(ゲームのチュートリアル風): 〇で囲み、矢印で示す。ポップアップは、角の取れた四角を横に2つずつ */
.tour-blocker, .tour-dim { position: fixed; inset: 0; z-index: 9000; }
.tour-dim { background: rgba(0,0,0,.55); }
.tour-layer { position: static; background: none; padding: 0; display: block; }
.tour-spot { position: fixed; z-index: 9001; pointer-events: none; border: 4px solid #ffb300; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55), 0 0 18px 6px rgba(255,179,0,.8); animation: tour-pulse 1.4s ease-in-out infinite; }
@keyframes tour-pulse { 0%, 100% { border-color: #ffb300; } 50% { border-color: #fff3c4; } }
.tour-arrow { position: fixed; z-index: 9002; pointer-events: none; font-size: 40px; line-height: 44px; height: 44px; color: #ffb300; text-shadow: 0 0 4px #000, 0 0 8px rgba(0,0,0,.6); }
.tour-arrow-up { animation: tour-up 0.8s ease-in-out infinite; }
.tour-arrow-down { animation: tour-down 0.8s ease-in-out infinite; }
@keyframes tour-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tour-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.tour-box { position: fixed; z-index: 9003; background: #fff; color: #222; border-radius: 18px; padding: 16px 20px; border: 3px solid var(--primary); box-shadow: 0 8px 28px rgba(0,0,0,.35); max-height: 92vh; overflow-y: auto; }
.tour-box.tour-center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 24px)); }
.tour-welcome { width: min(520px, calc(100vw - 24px)); text-align: center; }
.tour-sub { color: #555; margin: -2px 0 12px; font-size: 15px; }
.tour-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 14px; }
.tour-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 108px; padding: 12px 8px; background: #f2f7ff; border: 2px solid var(--primary); border-radius: 20px; color: #222; font: inherit; text-decoration: none; cursor: pointer; }
.tour-tile:hover, .tour-tile:focus { background: var(--primary); color: #fff; }
.tour-tile-more { background: #fafafa; border-style: dashed; }
.tour-icon { font-size: 34px; line-height: 1; }
.tour-tile-title { font-size: 17px; font-weight: bold; line-height: 1.4; }
.tour-actions-end { justify-content: space-between; }
.tour-step .tour-text { margin-bottom: 8px; }
.tour-next { min-width: 96px; }
.tour-count { font-size: 12px; color: #666; margin-bottom: 4px; }
.tour-title { font-size: 21px; font-weight: bold; margin-bottom: 8px; }
.tour-text { font-size: 18px; line-height: 1.7; white-space: pre-wrap; margin-bottom: 12px; }
.tour-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
/* ガイドツアー: 進み具合の棒・小見出し・流れの図・書いてある所・迷いやすい点(tour_content.js の part / flow / where / tips) */
.tour-progress { height: 6px; background: #e6ebf1; border-radius: 3px; overflow: hidden; margin: 2px 0 10px; }
.tour-progress > span { display: block; height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s; }
.tour-part { display: inline-block; font-size: 13px; font-weight: bold; color: var(--primary); background: #eef4ff; border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }
.tour-flow { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 4px; padding: 0; margin: 4px 0 12px; }
.tour-flow-step { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1.3; padding: 4px 8px 4px 4px; border: 1.5px solid #c9d3df; border-radius: 999px; background: #fff; color: #333; }
.tour-flow-step:not(:last-child)::after { content: '→'; margin-left: 6px; color: #8a96a3; font-weight: bold; }
.tour-flow-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: #c9d3df; color: #fff; font-size: 12px; font-weight: bold; }
.tour-flow-step.done { border-color: #9cc9a6; color: #2d6a3a; }
.tour-flow-step.done .tour-flow-n { background: #4c9a5e; }
.tour-flow-step.cur { border-color: #ffb300; background: #fff6d9; font-weight: bold; box-shadow: 0 0 0 2px rgba(255,179,0,.35); }
.tour-flow-step.cur .tour-flow-n { background: #e69500; }
.tour-where { font-size: 15px; line-height: 1.6; background: #f2f7ff; border-left: 4px solid var(--primary); border-radius: 6px; padding: 6px 10px; margin: 0 0 10px; }
.tour-tips { font-size: 15px; line-height: 1.6; background: #fff8e6; border-left: 4px solid #e69500; border-radius: 6px; padding: 6px 10px; margin: 0 0 10px; }
.tour-tips ul { margin: 2px 0 0; padding-left: 1.2em; }
.tour-rich .tour-text { font-size: 17px; margin-bottom: 10px; }
.tour-tile-rec { position: relative; border-width: 3px; border-color: #e69500; background: #fff6d9; }
.tour-rec { position: absolute; top: -10px; right: 10px; background: #e69500; color: #fff; font-size: 12px; font-weight: bold; border-radius: 999px; padding: 2px 10px; }
@media (max-width: 600px) {
  .tour-box { padding: 12px 14px; }
  .tour-title { font-size: 19px; }
  .tour-text, .tour-rich .tour-text { font-size: 16px; }
  .tour-where, .tour-tips { font-size: 14px; }
}
/* ホームの「はじめの設定」のガイドのすすめ(管理者・必須の設定がまだのとき) */
.setup-guide { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border: 2px solid #e69500; background: #fffaf0; }
.setup-guide[hidden] { display: none; }
.setup-guide-icon { font-size: 34px; line-height: 1; }
.setup-guide-body { flex: 1 1 240px; min-width: 0; }
.setup-guide-body h2 { margin: 0 0 4px; font-size: 18px; }
.setup-guide-body p { margin: 0; }
.setup-guide-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media print { .tour-blocker, .tour-dim, .tour-spot, .tour-arrow, .tour-box { display: none !important; } }

.flash.warn { background: #fff4e0; color: #8a5200; border: 1px solid #f0c27a; }
a.btn.disabled { opacity: .6; pointer-events: none; }
.punch-cancel { margin-top: 18px; padding: 10px 14px; border: 1px dashed #bbb; border-radius: 10px; }
.punch-cancel summary { cursor: pointer; font-weight: bold; }

/* ホームの「今日やること」・期限の一覧 */
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo-list li a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 2px solid #cfd8e3; background: #f7faff; color: inherit; text-decoration: none; font-size: 17px; }
.todo-list li.error a { border-color: #e57373; background: #fdecea; }
.todo-list li.warn a { border-color: #f0c27a; background: #fff4e0; }
.todo-text { flex: 1; font-weight: bold; }
.todo-n { font-size: 20px; font-weight: bold; }
.todo-go { color: var(--primary); font-weight: bold; white-space: nowrap; }
tr.dl-error td { background: #fdecea; }
tr.dl-warn td { background: #fff4e0; }
.dl-over { color: var(--err); }

/* 打刻の一覧: 1タップの打刻 */
.punch-quick { margin: 0; }
.punch-quick .punch-go { width: 100%; cursor: pointer; }
.punch-card .punch-out-btn { background: #e8590c; border-color: #e8590c; }
.punch-card .punch-done { background: #868e96; border-color: #868e96; }
.punch-more { display: block; text-align: center; margin-top: 6px; color: var(--primary); }
.userbar-search input { padding: 3px 12px; border: 1px solid var(--primary); border-radius: 14px; font-size: 13px; width: 190px; }
.search-list li { margin: 6px 0; }

/* 誕生日 */
tr.bd-soon td { background: #fff4e0; }
tr.bd-week td { background: #fffbea; }
.bd-done { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bd-done input { min-width: 150px; }

/* 支援モード(パソコンが苦手な人向けの、簡単な左メニュー) */
.sidebar.support-nav .support-group { margin: 14px 10px 34px; display: grid; gap: 8px; }
.sidebar.support-nav .support-group a { font-size: 21px; font-weight: bold; padding: 18px 16px; border-radius: 12px; background: rgba(255,255,255,.1); text-align: center; line-height: 1.3; }
.sidebar.support-nav .support-group a.active { background: var(--primary); }
.sidebar.support-nav .support-toggle { text-align: center; margin: 24px 8px; }
.sidebar.support-nav .support-toggle .link { color: var(--side-text); opacity: .85; text-decoration: underline; background: none; border: 0; cursor: pointer; font-size: 14px; }

/* 利用者ごとの支援記録: 大きく・順番に・必要なものだけ見える形 */
.rec-form { font-size: 17px; }
.rec-form label { font-weight: bold; }
.rec-form input:not([type="checkbox"]):not([type="radio"]), .rec-form select, .rec-form textarea { font-size: 17px; padding: 9px 10px; }
.rec-form textarea { line-height: 1.6; }
.rec-form h2 { font-size: 26px; margin: 4px 0 14px; padding: 12px 16px; background: var(--tint); border-radius: 12px; }
.rec-h { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 3px solid var(--primary); }
.rec-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 17px; font-weight: bold; flex: none; }
.rec-basic { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rec-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 18px; }
.rec-form .act-chip { font-size: 17px; padding: 8px 14px; }
.rec-more { margin: 24px 0 10px; border: 1px solid #cfd8e3; border-radius: 12px; padding: 4px 14px 12px; background: #fafcff; }
.rec-more > summary { cursor: pointer; font-size: 18px; font-weight: bold; padding: 10px 0; display: flex; align-items: center; gap: 10px; }
.rec-form .rec-save-bar { border-top: 2px solid var(--primary); padding: 14px 0; margin-top: 24px; } /* 画面の上にも、保存のボタンが付く(top-actions) */
.rec-form .rec-save-bar .btn { font-size: 19px; padding: 14px 26px; }

/* シフト一覧: 見やすく */
.table-wrap:has(> table.cal) { max-height: 78vh; overflow: auto; }
.cal:not(.shift-grid) { font-size: 14px; }
.cal:not(.shift-grid) th, .cal td { min-width: 40px; padding: 4px 3px; }
.cal:not(.shift-grid) thead tr:first-child th { position: sticky; top: 0; z-index: 3; background: #dfe7ef; }
.cal:not(.shift-grid) th.name, .cal td.name { z-index: 4; min-width: 130px; font-size: 15px; font-weight: bold; }
/* 縦に送ったとき、左上の「スタッフ」が、下の行の名前(利用予定人数など)より手前に出るように。日付の行も、行の名前より手前に */
.cal:not(.shift-grid) thead tr:first-child th { z-index: 5; }
.cal:not(.shift-grid) thead tr:first-child th.name { z-index: 6; }
/* 日付の行のすぐ下の、横のスクロールバー(hscroll.js が作る。表を縦に送っても、日付の行と一緒に留まる) */
.cal tr.hs-gap td { position: sticky; z-index: 5; height: 18px; padding: 0; border: 0; background: var(--panel, #fff); }
.hs-mirror { position: absolute; z-index: 7; height: 18px; overflow-x: auto; overflow-y: hidden; }
.hs-mirror > div { height: 1px; }
.hs-mirror { scrollbar-width: auto; scrollbar-color: var(--primary) var(--tint); }
.hs-mirror::-webkit-scrollbar { height: 14px; }
.hs-mirror::-webkit-scrollbar-track { background: var(--tint); border-radius: 8px; }
.hs-mirror::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 8px; border: 3px solid var(--tint); }
.hs-host { position: relative; }
@media print { .cal tr.hs-gap, .hs-mirror { display: none !important; } }
.cal:not(.shift-grid) .cell-in { font-size: 15px; min-width: 44px; padding: 5px 2px; }
.cal:not(.shift-grid) th.sat { color: #1d6fd1; background: #eaf3ff; }
.cal:not(.shift-grid) th.sun { color: #d6336c; background: #ffeef3; }
.cal:not(.shift-grid) td.diff-short { background: #ffd6d6; color: #b00020; font-weight: bold; }
.cal:not(.shift-grid) td.diff-ok { color: #2b8a3e; }
.cal:not(.shift-grid) td.on[data-p="1"], .chip[data-p="1"] { background: #dceefb; }
.cal:not(.shift-grid) td.on[data-p="2"], .chip[data-p="2"] { background: #fde7c8; }
.cal:not(.shift-grid) td.on[data-p="3"], .chip[data-p="3"] { background: #e3f6d6; }
.cal:not(.shift-grid) td.on[data-p="4"], .chip[data-p="4"] { background: #f1defa; }
.cal:not(.shift-grid) td.on[data-p="5"], .chip[data-p="5"] { background: #ffe3e3; }
.cal:not(.shift-grid) td.on[data-p="6"], .chip[data-p="6"] { background: #d8f5f0; }
.cal:not(.shift-grid) td.on[data-p="7"], .chip[data-p="7"] { background: #fff3bf; }
.cal:not(.shift-grid) td.on[data-p="8"], .chip[data-p="8"] { background: #e6e0d4; }
.staffing-box > summary.sg-summary { cursor: pointer; font-size: 17px; padding: 6px 4px; list-style: none; }
.staffing-box > summary.sg-short { color: #b00020; }
.staffing-box > summary.sg-ok { color: #2b8a3e; }
.staffing-box[open] > summary { margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.more-actions { margin: 10px 0; border: 1px solid #cfd8e3; border-radius: 10px; padding: 2px 12px 8px; background: #fafcff; }
.more-actions > summary { cursor: pointer; font-weight: bold; padding: 8px 0; }
.help-fold { margin: 8px 0; }
.help-fold > summary { cursor: pointer; color: var(--primary); font-size: 14px; }
/* 自分のシフト(支援モードから) */
.mine-next { font-size: 24px; padding: 16px 20px; margin: 10px 0; background: #e8f5e9; border: 2px solid #2b8a3e; border-radius: 14px; }
.mine-time { font-size: 1.15em; font-weight: bold; }
.mine-list { display: grid; gap: 6px; margin-top: 10px; }
.mine-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); font-size: 20px; }
.mine-row.work { background: #f1f8ff; border-color: #9cc5ee; }
.mine-row.off { color: #868e96; font-size: 17px; padding: 8px 16px; }
.mine-row.today { outline: 3px solid #ffb300; }
.mine-row.sat .mine-day { color: #1d6fd1; } .mine-row.sun .mine-day { color: #d6336c; }
.mine-day { min-width: 130px; font-weight: bold; }
.cal.cal-brief tr.usage-row.detail { display: none; }
.cal-detail-toggle { margin: 6px 0; font-size: 14px; }

/* 個別支援計画: 前回の計画のポップアップ(開いたまま、いまの計画を直せる。動かせる・大きさを変えられる) */
.prev-dialog { position: fixed; right: 18px; top: 110px; left: auto; margin: 0; width: min(440px, 92vw); height: 68vh; min-width: 260px; min-height: 120px; resize: both; overflow: auto; z-index: 8000; border: 3px solid var(--primary); border-radius: 16px; padding: 0 16px 12px; font-size: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.prev-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; background: #fff; border-bottom: 2px solid var(--primary); cursor: move; touch-action: none; }
.prev-head h3 { margin: 0; font-size: 18px; }
.prev-dialog.prev-min { height: auto; min-height: 0; resize: none; overflow: hidden; }
.prev-dialog.prev-min .prev-body, .prev-dialog.prev-min .prev-note, .prev-dialog.prev-min .actions, .prev-dialog.prev-min > p { display: none; }
.prev-dialog h4 { margin: 16px 0 4px; padding-left: 8px; border-left: 5px solid var(--primary); }
.prev-text { white-space: pre-wrap; background: #f7faff; border: 1px solid #cfd8e3; border-radius: 10px; padding: 10px 12px; line-height: 1.7; margin-bottom: 6px; }
.prev-items li { margin-bottom: 8px; line-height: 1.7; }
.prev-open { background: #fff4e0; border-color: #f0c27a; }

/* 個別支援計画: 前回の計画のボタンを、薄い色で、すこし目立たせる */
.btn.prev-open { background: #fff1d6; border: 2px solid #e8a317; color: #7a4a00; font-weight: bold; }
.btn.prev-open:hover { background: #ffe3a8; }
.isp-bottom-actions { gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 0; }
.isp-bottom-actions .btn-save { font-size: 18px; padding: 12px 26px; }
fieldset legend .btn.small[data-prev-open] { margin-left: 8px; background: #fff1d6; border: 1px solid #e8a317; color: #7a4a00; font-weight: bold; }

/* 個別支援計画の画面: 工程ごとに、はっきり区切る(メリハリ) */
form:has(#isp-basic) fieldset { border: 2px solid #cfd8e3; border-radius: 14px; padding: 12px 16px 16px; margin: 20px 0; background: #fff; }
form:has(#isp-basic) fieldset > legend { background: var(--primary); color: #fff; padding: 4px 18px; border-radius: 999px; font-size: 17px; font-weight: bold; }
form:has(#isp-basic) fieldset label { font-weight: bold; color: #243447; }
form:has(#isp-basic) input:not([type="checkbox"]):not([type="radio"]), form:has(#isp-basic) select, form:has(#isp-basic) textarea { font-size: 16px; }
form:has(#isp-basic) textarea { line-height: 1.6; }
form:has(#isp-basic) fieldset h3 { margin: 18px 0 8px; padding-left: 8px; border-left: 5px solid var(--primary); font-size: 17px; }
#deliveries h2, #monitoring h2 { padding: 8px 14px; background: var(--tint); border-left: 6px solid var(--primary); border-radius: 8px; font-size: 20px; }

/* 個別支援計画書(交付した形式のプレビュー・印刷) */
.isp-paper { max-width: 900px; margin: 0 auto; background: #fff; padding: 28px 34px; font-size: 16px; line-height: 1.7; }
.isp-paper-title { text-align: center; font-size: 24px; margin: 0 0 16px; letter-spacing: .1em; }
.isp-paper table { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.isp-paper th, .isp-paper td { border: 1px solid #555; padding: 6px 10px; vertical-align: top; text-align: left; }
.isp-paper th { background: #eef2f5; font-weight: bold; white-space: nowrap; width: 1%; }
.isp-paper-table td, .isp-paper-foot td { white-space: pre-wrap; }
.isp-paper-items th { width: auto; white-space: normal; text-align: center; }
.isp-paper-items td { white-space: pre-wrap; }
.isp-paper-h { margin: 18px 0 6px; font-size: 18px; }
.isp-paper-consent { margin: 18px 0 8px; }
.isp-paper-sign { margin: 8px 0; font-size: 17px; }
.isp-paper-blank { display: inline-block; width: 260px; border-bottom: 1px solid #333; }
@media print { .isp-paper { max-width: none; padding: 0; } .isp-paper th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* 申し送り・バックアップ・打刻のイニシャル */
.ho-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ho-list li { border: 1px solid #cfd8e3; border-radius: 12px; padding: 10px 14px; background: #fff; }
.ho-list li.ho-unread { border: 2px solid #f0a020; background: #fffaf0; }
.ho-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.ho-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 17px; line-height: 1.7; }
.ho-foot { margin: 4px 0; }
.bk-last { font-size: 18px; padding: 12px 16px; border-radius: 12px; }
.bk-ok { background: #e8f5e9; border: 2px solid #2b8a3e; }
.bk-warn { background: #fff4e0; border: 2px solid #e8a317; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; border-radius: 50%; color: #fff; font-weight: bold; margin-right: 8px; font-size: .95em; flex: none; }

/* ヒヤリハット・受給者証の更新 */
tr.inc-hot td { background: #fff4f0; }
.cr-box { border: 2px solid #cfd8e3; border-radius: 14px; padding: 12px 16px; margin: 12px 0; background: #fff; }
.cr-box.cr-soon { border-color: #e8a317; background: #fffaf0; }
.cr-box.cr-over { border-color: #d33; background: #fff4f0; }
.cr-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 17px; }
.cr-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.cr-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.cr-steps li.cr-done { background: #e8f5e9; color: #2b6a3a; }
.cr-no { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; align-items: center; justify-content: center; font-weight: bold; }
.cr-label { flex: 1; min-width: 220px; }
.al-now { white-space: pre-wrap; background: #f7faff; border: 1px solid #cfd8e3; border-radius: 10px; padding: 8px 12px; font-family: inherit; margin: 4px 0 8px; }

/* 支援記録の目標・写真、連絡帳、体調のグラフ */
.rec-goal { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; margin: 6px 0 4px; background: #eef7ee; border: 2px solid #8ac08a; border-radius: 12px; }
.rec-goal input { flex: 1; min-width: 220px; }
.rec-photos { margin: 16px 0; padding: 10px 14px; border: 1px dashed #aab; border-radius: 12px; }
.photo-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.photo-item { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; }
.photo-item img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid #ccd; }
.cb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cb-list li { border: 1px solid #cfd8e3; border-radius: 12px; padding: 10px 14px; background: #fff; }
.cb-list li.cb-from_family { border-left: 6px solid #e8a317; }
.cb-list li.cb-to_family { border-left: 6px solid #2b8a3e; }
.cb-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 17px; line-height: 1.7; margin: 4px 0; }
.trend-svg { width: 100%; max-width: 680px; height: auto; background: #fbfcfe; border: 1px solid #dde3ea; border-radius: 10px; }

/* 送迎の自動案・交代願い・緊急連絡先 */
.rt-auto { margin: 8px 0 14px; padding: 8px 12px; border: 1px dashed #99a; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.rt-col.rt-over { outline: 3px solid #d33; background: #fff4f0; }
.sw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sw-list li { border: 1px solid #cfd8e3; border-radius: 12px; padding: 10px 14px; background: #fff; }
.sw-list li.sw-open, .sw-list li.sw-taken { border: 2px solid #e8a317; background: #fffaf0; }
.em-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.em-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #cfd8e3; border-radius: 12px; }
.em-label { font-size: 19px; font-weight: bold; min-width: 160px; }
.em-tel { font-size: 20px; padding: 12px 22px; }
.em-link { margin: 6px 0; }

/* 達成度のグラフ・前回との違い・本人用の計画書 */
.mon-scores .mon-score { display: flex; gap: 10px; align-items: center; margin: 4px 0; }
.mon-goal { min-width: 180px; font-weight: bold; }
.mon-h { margin: 14px 0 6px; padding-left: 8px; border-left: 5px solid var(--primary); }
.mon-cell { min-width: 90px; }
.mon-bar { display: block; height: 12px; border-radius: 6px; margin-bottom: 2px; }
.df-add { background: #d8f5d0; border-bottom: 2px solid #2b8a3e; padding: 0 3px; }
.df-del { background: #ffe0e0; text-decoration: line-through; color: #a02020; padding: 0 3px; }
.df-same { color: #666; padding: 0 3px; }
.df-box { background: #fff; border: 1px solid #cfd8e3; border-radius: 10px; padding: 10px 14px; line-height: 1.9; white-space: pre-wrap; }
.df-h { margin: 14px 0 4px; }
.easy-paper { max-width: 900px; margin: 0 auto; background: #fff; padding: 24px 30px; }
.easy-title { font-size: 28px; text-align: center; }
.easy-name { display: block; font-size: 30px; margin-top: 8px; }
.easy-sub { text-align: center; font-size: 20px; }
.easy-text { width: 100%; font-size: 24px; line-height: 2; border: 2px solid #cfd8e3; border-radius: 12px; padding: 14px; box-sizing: border-box; }
.easy-sign { font-size: 20px; margin-top: 20px; }
@media print { .easy-text { border: 0; resize: none; overflow: visible; } }

/* 工賃の見込み・本人用のお知らせ・受注の納期 */
.wg-forecast { border: 2px solid #8ab0d8; background: #f2f8ff; margin-bottom: 10px; }
/* 工賃の控除(食事・通所の交通費・預り金その他)の3つの入力欄(R18。名前は表示だけの飾り) */
.wg-ded label { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: .85em; }
.wg-ded label::before { content: attr(data-lbl); color: #555; min-width: 7em; }
.wn-paper { max-width: 760px; margin: 0 auto; background: #fff; text-align: center; padding: 30px; }
.wn-title { font-size: 34px; } .wn-sub { font-size: 24px; }
.wn-big { font-size: 64px; font-weight: bold; margin: 14px 0; } .wn-big span { font-size: 30px; }
.wn-table { margin: 0 auto; font-size: 28px; border-collapse: collapse; } .wn-table th, .wn-table td { padding: 8px 20px; border-bottom: 2px solid #ddd; text-align: left; }
.wn-foot { margin-top: 24px; font-size: 22px; }
.od-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.od-list li { padding: 8px 12px; border: 1px solid #cfd8e3; border-radius: 10px; }
.od-list li.od-soon { border: 2px solid #e8a317; background: #fffaf0; } .od-list li.od-over { border: 2px solid #d33; background: #fff4f0; }
.od-cal { width: 100%; border-collapse: collapse; table-layout: fixed; } .od-cal th, .od-cal td { border: 1px solid #ccd; vertical-align: top; padding: 3px; height: 70px; }
.od-d { font-size: 12px; color: #555; } .od-today { background: #fffbe0; }
.od-i { font-size: 12px; background: #dbe9f7; border-radius: 4px; padding: 1px 4px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .od-i.od-done { background: #e0e0e0; text-decoration: line-through; }

/* 補助金・返戻の原因・空き枠の見込み */
.sb-box.sb-soon { border: 2px solid #e8a317; } .sb-box.sb-over { border: 2px solid #d33; background: #fff4f0; }
.sb-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 17px; }
.sb-checks { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; } .sb-checks li.sb-done { color: #2b6a3a; }
.sb-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; margin-bottom: 8px; }
.sb-cat { min-width: 0; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; align-content: start; } .sb-cat.sb-unfit { opacity: .6; }
.sb-flow { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0; } .sb-late { color: #b91c1c; font-weight: bold; }
.sb-sub { margin-top: 6px; } .sb-files, .sb-logs { margin: 6px 0; padding-left: 18px; display: grid; gap: 3px; }
.hn-list { display: grid; gap: 8px; padding-left: 20px; } .hn-item summary { cursor: pointer; font-size: 17px; }
.fc-best { font-size: 17px; padding: 8px 12px; background: #e8f5e9; border: 2px solid #8ac08a; border-radius: 10px; }
.fc-bar { display: inline-block; width: 120px; height: 10px; background: #e5e9ee; border-radius: 5px; vertical-align: middle; overflow: hidden; } .fc-bar span { display: block; height: 100%; background: #4a90c2; } .fc-bar span.fc-over { background: #d33; }

/* 緊急時の手順・自己点検 */
.em-step-list { font-size: 19px; line-height: 1.9; padding-left: 28px; } .em-step-list li { margin-bottom: 6px; }
.sc-sum { font-size: 17px; padding: 8px 12px; background: #f2f8ff; border: 1px solid #b8d0ea; border-radius: 10px; }
.sc-table select, .sc-table input { width: 100%; box-sizing: border-box; }
@media print { .sc-table select { appearance: none; border: 0; } }

/* 文字の大きさ・やさしい表示・ガイドの画像・エラーの案内 */
.userbar-zoom { display: inline-flex; gap: 4px; margin-right: 6px; }
.userbar-btn[aria-pressed="true"] { background: var(--primary); color: #fff; }
.gl { border-bottom: 2px dotted #e8a317; cursor: pointer; }
.gl-tip { position: fixed; z-index: 9500; max-width: 300px; padding: 10px 14px; background: #fff8e1; border: 2px solid #e8a317; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.25); font-size: 16px; line-height: 1.6; }
.gl-list { display: grid; gap: 8px; } .gl-item { border: 1px solid #cfd8e3; border-radius: 10px; padding: 8px 14px; background: #fff; } .gl-item dt { font-size: 19px; font-weight: bold; } .gl-item dd { margin: 4px 0 0; }
.tut-media { margin: 8px 0; } .tut-media img, .tut-media video { max-width: 100%; border: 1px solid #cfd8e3; border-radius: 10px; }
.err-info textarea { width: 100%; box-sizing: border-box; font-family: monospace; }

.cm-enter { margin: 0 0 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nav-clientmode { margin: 8px 10px; }
.nav-clientmode .btn { width: 100%; }
.cm-note { margin: 8px 12px; font-weight: bold; }
.menu-group-bar { margin: 0 0 12px; }
.home-staffpunch { margin: 0 0 12px; }
.btn-big { font-size: 1.15em; padding: 14px 22px; display: inline-block; }
.rec-list td input[type="time"] { padding-left: 6px; padding-right: 4px; min-width: 0; }
.rec-list td input[type="number"] { padding-left: 6px; padding-right: 6px; }

.gl-head { font-size: 20px; font-weight: bold; margin: 14px 0 4px; padding: 2px 10px; background: #fff3d6; border-left: 6px solid #e8a317; border-radius: 4px; }
.gl-tabs { margin: 8px 0; flex-wrap: wrap; }

/* 左メニューの一番下の「表示の設定」(文字の大きさ・やさしい表示・用語集・色と文字) */
.nav-display { margin-top: auto; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.15); }
.nav-display + .nav-user { margin-top: 0; }
.nav-display-title { font-size: 12px; opacity: .8; margin-bottom: 6px; }
.nav-display-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.nav-display .userbar-btn { padding: 2px 10px; font-size: 12px; background: transparent; border-color: rgba(255,255,255,.55); color: inherit; }
.nav-display .userbar-btn:hover, .nav-display .userbar-btn.active, .nav-display .userbar-btn[aria-pressed="true"] { background: rgba(255,255,255,.25); color: inherit; }

/* 利用者モード: しばらく操作がないとき、画面を隠す(さわると、もどる) */
.cm-lock { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 25, 40, .96); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 28px; cursor: pointer; }
.cm-lock[hidden] { display: none; }
.cm-lock p { font-size: 20px; opacity: .85; margin-top: 12px; }

/* 支援記録の一覧: カード表示(1人ずつ。タブレット・スマホ向け) */
.rec-cards .rec-head { display: none; }
.rec-cards .rec-chunk { overflow: visible; }
.rec-cards table.rec-list, .rec-cards table.rec-list tbody { display: block; width: 100% !important; }
.rec-cards table.rec-list colgroup { display: none; }
.rec-cards tr.rec-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 12px 0; }
.rec-cards tr.rec-row > td { display: block; position: static !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; background: transparent !important; width: auto !important; min-width: 0; }
.rec-cards tr.rec-row > td::before { content: attr(data-label); display: block; font-size: 12px; color: #667; margin-bottom: 2px; }
.rec-cards tr.rec-row > td:first-child, .rec-cards tr.rec-row > td.rec-tawide, .rec-cards tr.rec-row > td.rec-acts-cell { grid-column: 1 / -1; }
.rec-cards tr.rec-row > td:first-child::before { display: none; }
.rec-cards tr.rec-row > td:first-child { font-size: 1.15em; }
.rec-cards tr.rec-row textarea { min-height: 4.5em; }
/* カード表示: 迎・送・食(チェック)は、3つを横に並べる(6列の格子: ふつうの欄は2つで1行、チェックは3つで1行) */
.rec-cards tr.rec-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rec-cards tr.rec-row > td { grid-column: span 3; }
.rec-cards tr.rec-row > td.rec-chk { grid-column: span 2; display: flex !important; align-items: center; gap: 8px; }
.rec-cards tr.rec-row > td.rec-chk::before { display: inline; margin: 0; font-size: 15px; font-weight: 700; color: inherit; }
.rec-cards tr.rec-row > td.rec-chk input { width: 26px; height: 26px; }
.rec-cards tr.rec-row > td.rec-chk1 { grid-column: 1 / span 2; } /* 迎は、行の頭から(3つで1行) */
/* 食事の記録は「食」にチェックがあるとき、欠席時の対応内容は欠席のときだけ(表では、列をそろえるため、見えなくするだけ) */
tr.rec-row.no-meal > td.rec-meal-f > *, tr.rec-row.no-abs > td.rec-abs-f > * { visibility: hidden; }
.rec-cards tr.rec-row.no-meal > td.rec-meal-f, .rec-cards tr.rec-row.no-abs > td.rec-abs-f { display: none !important; }
@media (max-width: 520px) { .rec-cards tr.rec-row > td { grid-column: 1 / -1; } .rec-cards tr.rec-row > td.rec-chk { grid-column: span 2; } .rec-cards tr.rec-row > td.rec-chk1 { grid-column: 1 / span 2; } }

/* 狭い画面(スマホ)・中くらいの画面で、表や入力欄が、画面の外にはみ出さないように(はみ出す表は、その中で横に動かせる) */
.wr-body table { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  table.table { display: block; max-width: 100%; overflow-x: auto; }
  .wr-body, .wr-name { min-width: 0; max-width: 100%; }
  .main input:not([type="checkbox"]):not([type="radio"]), .main select, .main textarea { max-width: 100%; box-sizing: border-box; }
  .wr-body label { min-width: 0; max-width: 100%; }
}

fieldset { min-width: 0; } /* 中身の幅で、枠が画面より広がらないように */
.wr-body { max-width: 100%; min-width: 0; }
/* 新しい画面のブラウザー確認の回 */
/* 必須の * : 縦並びのラベル(.grid・.form・.form-grid)で、* がラベルの文字のすぐ後ろ(子)にあるときも、項目名と同じ行に出す(前は、* だけが1行になり、欄の上に浮いていた) */
.form label:not(.inline):has(> .req-mark), .grid label:not(.inline):has(> .req-mark), .card .form-grid label:not(.inline):has(> .req-mark) { display: block; }
.form label:not(.inline):has(> .req-mark) > :is(input:not([type=checkbox]):not([type=radio]), select, textarea),
.grid label:not(.inline):has(> .req-mark) > :is(input:not([type=checkbox]):not([type=radio]), select, textarea),
.card .form-grid label:not(.inline):has(> .req-mark) > :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { display: block; width: 100%; margin-top: 4px; }
/* 縦に並べるフォーム(class="stack"。給料計算 → 有給設定の「付与のしかた」): 選択肢・チェックを1行ずつ(前は、横に続けて流れ、どこまでが1つの項目か分かりにくかった) */
.stack > strong { display: block; margin-bottom: 2px; }
.stack > label.inline { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0; }
.stack > label.inline > input[type=radio], .stack > label.inline > input[type=checkbox] { flex: none; margin: .3em 0 0; }
.stack > label.inline:has(> select) { flex-wrap: wrap; align-items: center; }
.stack > label.inline > select { max-width: 100%; min-width: 0; }
/* 確認の窓(控えを残すか・AIの確認): スマホでも、画面の端に付けない */
.ai-dialog { max-width: min(460px, calc(100vw - 24px)); }
.keep-dialog { max-width: min(520px, calc(100vw - 24px)); }
/* ガイドの説明の箱: 説明が長くて箱の中をスクロールするときも、「次へ」などのボタンを、箱の下に出したままにする(前は、箱の中を下まで送らないと、ボタンが見えなかった) */
.tour-box .tour-actions { position: sticky; bottom: -16px; z-index: 1; background: #fff; margin: 10px 0 -16px; padding: 10px 0 16px; box-shadow: 0 -8px 10px -8px rgba(0,0,0,.18); }
@media (max-width: 600px) { .tour-box .tour-actions { bottom: -12px; margin-bottom: -12px; padding-bottom: 12px; } }

/* R25: 手続き・研修の項目表。列が細くならないように、最小の幅を決めて、足りないときは横にスクロール */
.table-wrap.hscroll { overflow-x: auto; max-width: 100%; }
.wide-items { min-width: 1100px; }
.wide-items input[type=text], .wide-items input:not([type]) { min-width: 14em; width: 100%; box-sizing: border-box; }
.wide-items select[multiple] { min-width: 12em; }
.proc-items th:nth-child(1), .proc-items th:nth-child(2) { min-width: 8em; }
.proc-items th:nth-child(3) { min-width: 16em; }
.proc-items th:nth-child(4) { min-width: 18em; }
.proc-items th:nth-child(5) { min-width: 12em; }
.proc-items th:nth-child(6) { min-width: 14em; }
.onb-items th:nth-child(1) { min-width: 6em; }
.onb-items th:nth-child(2) { min-width: 16em; }
.onb-items th:nth-child(3) { min-width: 18em; }
.onb-items th:nth-child(4) { min-width: 8em; }
.proc-items td:nth-child(3) input { min-width: 44em; }
.proc-items td:nth-child(4) input { min-width: 48em; }
.proc-items td:nth-child(5) select { min-width: 18em; }
.proc-items td:nth-child(6) input[type=text] { min-width: 18em; }
.onb-items td:nth-child(2) input { min-width: 30em; }
.onb-items td:nth-child(3) input { min-width: 48em; }
.wide-items { min-width: 1500px; }
.wide-items input[type=number] { min-width: 5em; }

/* R27(H1): パスワードの「表示」ボタンは、入力欄いっぱいにせず、ふつうの大きさ */
label .btn.pw-toggle, .btn.pw-toggle, button.pw-toggle { display: inline-block !important; width: auto !important; align-self: flex-start; margin-top: 4px; }
.rec-list td input[data-time="minutes"] { width: 54%; display: inline-block; }
.rec-list td select[data-time="unit"] { width: 42%; display: inline-block; padding-left: 4px; padding-right: 2px; }

/* R27: 支援記録の一覧(カード表示)をすっきりさせる。出欠・開始・終了を横に3つ、作業・作業時間・数量を横に3つ、体温・打刻・調子を横に3つ並べる(6列の格子で、1つが2列分)。
   順番は、画面の上での並びだけ(order)で決める(HTMLの順番は変えない) */
.rec-cards tr.rec-row > td:nth-child(1) { order: 1; }
.rec-cards tr.rec-row > td:nth-child(2) { order: 2; grid-column: span 2; }   /* 出欠 */
.rec-cards tr.rec-row > td:nth-child(3) { order: 3; grid-column: span 2; }   /* 開始 */
.rec-cards tr.rec-row > td:nth-child(4) { order: 4; grid-column: span 2; }   /* 終了 */
.rec-cards tr.rec-row > td:nth-child(7) { order: 5; grid-column: span 2; }   /* 作業 */
.rec-cards tr.rec-row > td:nth-child(6) { order: 6; grid-column: span 2; }   /* 作業時間 */
.rec-cards tr.rec-row > td:nth-child(8) { order: 7; grid-column: span 2; }   /* 数量 */
.rec-cards tr.rec-row > td:nth-child(9) { order: 8; grid-column: span 2; }   /* 体温 */
.rec-cards tr.rec-row > td:nth-child(5) { order: 9; grid-column: span 2; }   /* 打刻 */
.rec-cards tr.rec-row > td:nth-child(16) { order: 10; grid-column: span 2; } /* 調子 */
.rec-cards tr.rec-row > td:nth-child(10) { order: 11; grid-column: 1 / -1; } /* 数量等の進捗 */
.rec-cards tr.rec-row > td:nth-child(11) { order: 12; }
.rec-cards tr.rec-row > td:nth-child(12) { order: 13; }
.rec-cards tr.rec-row > td:nth-child(13) { order: 14; }
.rec-cards tr.rec-row > td:nth-child(14) { order: 15; grid-column: span 3; }
.rec-cards tr.rec-row > td:nth-child(15) { order: 16; grid-column: span 3; }
.rec-cards tr.rec-row > td:nth-child(17) { order: 17; grid-column: 1 / -1; }
.rec-cards tr.rec-row > td:nth-child(18) { order: 18; grid-column: 1 / -1; }
.rec-cards tr.rec-row > td:nth-child(19) { order: 19; grid-column: span 3; }
.rec-cards tr.rec-row > td:nth-child(20) { order: 20; grid-column: span 3; align-self: end; }
.rec-cards tr.rec-row > td:nth-child(5) { font-size: 13px; }
.rec-cards tr.rec-row > td:nth-child(n+2):nth-child(-n+9):not(:nth-child(6)) input:not([type="checkbox"]),
.rec-cards tr.rec-row > td:nth-child(n+2):nth-child(-n+9):not(:nth-child(6)) select,
.rec-cards tr.rec-row > td:nth-child(16) select { width: 100% !important; min-width: 0 !important; box-sizing: border-box; font-size: 15px; padding: 7px 5px; }
.rec-cards tr.rec-row > td:nth-child(3) input, .rec-cards tr.rec-row > td:nth-child(4) input { text-align: center; padding-left: 2px; padding-right: 2px; }
.rec-cards tr.rec-row > td:nth-child(7) .multi-dd-sum { font-size: 15px; padding: 7px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* R27: 音声入力のマーク(🎤)は、文字を入れる欄の中の右下(1行の欄は右の中央)に置く */
.mic-wrap { position: relative; display: block; width: 100%; }
.mic-wrap > textarea, .mic-wrap > input { width: 100% !important; box-sizing: border-box; }
.mic-wrap > .mic-btn.mic-in { position: absolute; right: 6px; bottom: 6px; margin: 0; width: 32px; height: 32px; padding: 0; border-radius: 50%; line-height: 1; font-size: 16px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; }
.mic-wrap-ta > textarea { display: block; padding-right: 60px; }
.mic-wrap-ta > .mic-btn.mic-in { right: 24px; bottom: 8px; }
.mic-wrap:not(.mic-wrap-ta) > input { padding-right: 42px; min-width: 150px; }
.mic-wrap:not(.mic-wrap-ta) > .mic-btn.mic-in { top: 50%; bottom: auto; transform: translateY(-50%); width: 30px; height: 30px; }
/* R27: カード表示の「作業」の選択が、となりの欄にはみ出さない。「作業時間」は、数字と単位を横に並べる */
.rec-cards tr.rec-row > td:nth-child(7) details.multi-dd, .rec-cards tr.rec-row > td:nth-child(7) summary.multi-dd-sum { display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
.rec-cards tr.rec-row > td:nth-child(6) input[type="number"] { display: inline-block; width: 50% !important; min-width: 0 !important; box-sizing: border-box; font-size: 15px; padding: 7px 3px 7px 4px; text-align: right; }
.rec-cards tr.rec-row > td:nth-child(6) select { display: inline-block; width: 46% !important; min-width: 0 !important; box-sizing: border-box; font-size: 15px; padding: 7px 0 7px 3px; }

/* R27: スマホ(狭い画面)は、画面の端まで、枠を広げる(左右の余白と枠の内側の余白を小さく) */
@media (max-width: 700px) {
  .main { padding: 12px 8px; }
  .card { padding: 12px 10px; border-radius: 12px; margin-bottom: 12px; }
}
/* R27: 支援記録の一覧の操作ボタン: 横に流して、場所を取らない。説明は折りたたむ */
.rec-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rec-actions .btn { padding: 8px 14px; font-size: 15px; margin: 0; }
.rec-actions .rec-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 100%; }
.rec-actions .rec-add select { flex: 1 1 140px; min-width: 0; max-width: 100%; font-size: 15px; padding: 8px; }
@media (min-width: 701px) { .rec-actions .rec-add select { max-width: 320px; } }
.rec-help { flex: 1 1 100%; }
.rec-help > summary { cursor: pointer; color: var(--primary); padding: 4px 0; font-size: 14px; }
.rec-help > p { margin: 4px 0 0; line-height: 1.6; font-size: 13px; }
/* R27: 日付の移動(前日・日付・翌日・今日)は、スマホでは、2行にまとめる(1行目: 前日・日付・翌日、2行目: 今日・曜日つきの日付) */
@media (max-width: 700px) {
  .date-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .date-nav .btn { padding: 8px 10px; font-size: 14px; white-space: nowrap; margin: 0; }
  .date-nav form { order: 2; flex: 1 1 120px; min-width: 0; margin: 0; }
  .date-nav form input { width: 100%; box-sizing: border-box; font-size: 15px; padding: 7px 6px; }
  .date-nav > a:nth-of-type(1) { order: 1; }
  .date-nav > a:nth-of-type(2) { order: 3; }
  .date-nav > a:nth-of-type(3) { order: 4; }
  .date-nav > strong { order: 5; }
}
/* R27: iPhone(幅640px以下)の文字の大きさ(A−・A＋)は、画面全体の拡大でなく、文字だけの拡大(text-size-adjust。header.ejs と app.js が指定)。
   上の `html { -webkit-text-size-adjust: 100% }` より、html の style 属性の指定が強いので、ここでは、何もしない */

/* 委員会・研修の年間予定と実施状況: 見出し(月)を表の上に固定する・凡例 */
.tm-legend { margin: 0 0 8px; line-height: 1.7; }
.tm-wrap { max-height: 70vh; overflow: auto; }
.tm-wrap > table > thead > tr > th { position: sticky; top: 0; z-index: 2; background: var(--panel, #fff); box-shadow: 0 1px 0 var(--line, #dde); }
/* 2026-11-05: 支援記録の一覧 — 見出しの上の横スクロールバー(見出しといっしょに上に留まる)・2段で表示 */
.rec-sticky { position: sticky; top: 0; z-index: 30; }
.rec-sticky .rec-head { position: static; }
.rec-topscroll { overflow-x: auto; overflow-y: hidden; height: 16px; background: #eef2f6; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; }
.rec-two .rec-two-part + .rec-two-part { margin-top: 6px; }
.rec-two .rec-two-lab { display: block; font-size: 11px; color: #667; }
.rec-two tr.rec-row > td { vertical-align: top; }
tr.rec-row.no-meal .rec-meal-f2 > * { visibility: hidden; }
@media print { .rec-topscroll { display: none; } }

/* 各種申請(/requests) */
table.kv th { text-align: left; white-space: nowrap; vertical-align: top; padding-right: 12px; }
tr.req-mine-turn td { background: var(--warn-bg, #fff7e0); }
.req-type-list { display: flex; flex-wrap: wrap; gap: 8px; }
.req-applicants { margin: 6px 0 10px; }
table.req-fields textarea { min-width: 12em; }