/* ============================================================
   c-screens.css — 給与計算・帳票印刷・ホーム・設定（Agent C）
   トークンは style.css（Agent A）の定義を使用。万一未定義でも
   崩れないよう var() に既定値を添えている。
   ============================================================ */

/* ---------- 共通部品（このファイルの画面用） ---------- */
.c-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.c-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--c-text, #1f2a2e);
  letter-spacing: .02em;
}

.c-title svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.c-sub {
  font-size: 16px;
  color: var(--c-muted, #6b7a80);
}

.c-card {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow, 0 1px 3px rgba(15, 40, 44, .08));
  padding: 18px 20px;
  margin: 0 0 16px;
}

.c-cardtitle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text, #1f2a2e);
  margin: 0 0 12px;
}

.c-cardtitle.sub {
  margin-top: 20px;
  font-size: 16px;
  color: var(--c-muted, #6b7a80);
}

.c-cardtitle svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-primary, #0e7c86);
}

.c-note {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted, #6b7a80);
  margin: 10px 0 0;
}

.c-note b {
  color: var(--c-text, #1f2a2e);
}

/* アイコンは絶対配置。本文に <b> 等を直接書いても列に割れない */
.c-note.warn {
  display: block;
  position: relative;
  background: var(--c-amber-pale, #fdf6e3);
  border: 1px solid #e8d9a8;
  border-radius: var(--radius, 10px);
  padding: 12px 14px 12px 42px;
  color: #6d5410;
  margin-bottom: 12px;
}

.c-note.warn svg {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 20px;
  height: 20px;
  color: var(--c-amber, #b7791f);
}

.c-empty {
  padding: 40px;
  text-align: center;
  color: var(--c-muted, #6b7a80);
  font-size: 16px;
}

.c-flex,
.pr-flex {
  flex: 1 1 auto;
}

/* ボタン */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 11px 16px;
  min-height: 44px;
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  background: var(--c-surface, #fff);
  color: var(--c-text, #1f2a2e);
  cursor: pointer;
  text-align: center;
}

.c-btn:hover {
  background: var(--c-primary-pale, #e6f2f3);
  border-color: var(--c-primary, #0e7c86);
}

.c-btn:active {
  transform: translateY(1px);
}

.c-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.c-btn.primary {
  background: var(--c-primary, #0e7c86);
  border-color: var(--c-primary, #0e7c86);
  color: #fff;
}

.c-btn.primary:hover {
  background: var(--c-primary-dark, #0a5d65);
  border-color: var(--c-primary-dark, #0a5d65);
}

.c-btn.ghost {
  background: transparent;
}

.c-btn.danger {
  background: var(--c-red, #c0392b);
  border-color: var(--c-red, #c0392b);
  color: #fff;
}

.c-btn.danger:hover {
  background: #a3301f;
  border-color: #a3301f;
}

.c-btn.sm {
  font-size: 15px;
  padding: 7px 12px;
  min-height: 36px;
}

.c-btn.big {
  font-size: 18px;
  padding: 15px 22px;
  min-height: 56px;
  width: 100%;
}

.c-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.c-btn[disabled]:hover {
  background: var(--c-surface, #fff);
  border-color: var(--c-line, #dde5e8);
}

/* 入力 */
.c-input,
.c-select,
.c-textarea {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  background: #fff;
  color: var(--c-text, #1f2a2e);
  max-width: 100%;
}

.c-input:focus,
.c-select:focus,
.c-textarea:focus {
  outline: 2px solid var(--c-primary, #0e7c86);
  outline-offset: -1px;
}

.c-input.narrow {
  width: 72px;
}

.c-select {
  cursor: pointer;
}

.c-textarea {
  width: 100%;
  min-height: 260px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre;
  overflow: auto;
}

/* チップ・バッジ */
.c-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--c-bg, #f5f7f8);
  border: 1px solid var(--c-line, #dde5e8);
  color: var(--c-muted, #6b7a80);
}

.c-chip svg {
  width: 15px;
  height: 15px;
}

.c-chip.amber {
  background: var(--c-amber-pale, #fdf6e3);
  border-color: #e8d9a8;
  color: #6d5410;
}

.c-chip.green {
  background: #e7f5ee;
  border-color: #b9dfcb;
  color: var(--c-green, #1e8e5a);
}

.c-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  margin-left: 6px;
  border-radius: 4px;
  background: var(--c-amber-pale, #fdf6e3);
  color: #8a6412;
  border: 1px solid #e8d9a8;
  vertical-align: middle;
}

/* モーダル内の文章（App.modal の中身） */
.c-modal-text {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 12px;
}

.c-modal-note {
  font-size: 14px;
  color: var(--c-muted, #6b7a80);
  line-height: 1.7;
  margin: 10px 0 0;
}

.c-modal-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-bg, #f5f7f8);
  border: 1px solid var(--c-line, #dde5e8);
  color: var(--c-muted, #6b7a80);
}

/* ============================================================
   給与計算 payroll
   ============================================================ */
.pr-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
}

.pr-ym {
  min-width: 260px;
  font-weight: 600;
}

.pr-warn {
  font-size: 16px;
}

.pr-tablewrap {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow, 0 1px 3px rgba(15, 40, 44, .08));
  overflow: auto;
  max-height: calc(100vh - 300px);
  min-height: 320px;
}

.pr-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  width: max-content;
  min-width: 100%;
}

.pr-table th,
.pr-table td {
  border-right: 1px solid var(--c-line, #dde5e8);
  border-bottom: 1px solid var(--c-line, #dde5e8);
  padding: 7px 10px;
  white-space: nowrap;
}

/* ヘッダ（2段固定） */
.pr-table thead th {
  position: sticky;
  background: var(--c-primary-pale, #e6f2f3);
  z-index: 3;
  font-weight: 700;
  color: var(--c-text, #1f2a2e);
}

.pr-grouprow th {
  top: 0;
  height: 34px;
  font-size: 14px;
  text-align: center;
  letter-spacing: .06em;
  background: var(--c-primary, #0e7c86);
  color: #fff;
}

.pr-namerow th {
  top: 34px;
  text-align: center;
  vertical-align: bottom;
  padding-bottom: 8px;
}

.pr-name .pr-nm {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.pr-name .pr-role {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-muted, #6b7a80);
  margin-top: 2px;
}

.pr-table thead th.pr-rowhead {
  left: 0;
  z-index: 6;
}

.pr-corner {
  background: var(--c-primary-dark, #0a5d65) !important;
  color: #fff;
  font-size: 13px;
  text-align: left !important;
}

.pr-corner2 {
  text-align: left !important;
}

/* 行見出し（左固定） */
.pr-table tbody th.pr-rowhead,
.pr-table th.pr-rowhead {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--c-bg, #f5f7f8);
  text-align: left;
  font-weight: 600;
  min-width: 168px;
  box-shadow: 1px 0 0 var(--c-line, #dde5e8);
}

/* 区分の境目 */
.pr-table .pr-gstart {
  border-left: 2px solid var(--c-primary, #0e7c86);
}

/* セクション行 */
.pr-sec th.pr-rowhead,
.pr-sec td {
  background: #eef3f4;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--c-primary-dark, #0a5d65);
  font-weight: 700;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* データセル */
.pr-cell {
  text-align: right;
  position: relative;
  cursor: pointer;
  min-width: 88px;
}

.pr-cell:hover {
  background: var(--c-primary-pale, #e6f2f3);
  box-shadow: inset 0 0 0 2px var(--c-primary, #0e7c86);
}

.pr-cell.is-zero {
  color: #77868c; /* 0円も情報（手当なし等）。薄すぎて読めない色にしない */
}

.pr-cell.is-ro {
  cursor: help;
  color: var(--c-muted, #6b7a80);
}

.pr-cell.is-ov::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-amber, #b7791f);
}

.pr-cell.is-ov {
  background: var(--c-amber-pale, #fdf6e3);
  font-weight: 700;
}

.pr-row.is-strong td,
.pr-row.is-strong th.pr-rowhead {
  background: #f4f8f9;
  font-weight: 700;
}

.pr-row.is-strong td.is-ov {
  background: var(--c-amber-pale, #fdf6e3);
}

.pr-row.is-total td,
.pr-row.is-total th.pr-rowhead {
  background: #e4f2f2;
  font-weight: 700;
  font-size: 18px;
  border-top: 2px solid var(--c-primary, #0e7c86);
}

.pr-row.is-total td.is-zero {
  color: #9fb0b5;
}

.pr-sumhead,
.pr-sumcell {
  background: #f7f7f3 !important;
  border-left: 2px solid #c9d4d7;
  font-weight: 700;
}

.pr-table tbody tr:hover th.pr-rowhead {
  background: var(--c-primary-pale, #e6f2f3);
}

/* 内訳ポップオーバー */
.pr-pop {
  position: fixed;
  z-index: 9000;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--c-primary, #0e7c86);
  border-radius: var(--radius, 10px);
  box-shadow: 0 8px 28px rgba(15, 40, 44, .22);
  padding: 0 0 14px;
  font-size: 15px;
}

.pr-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--c-primary, #0e7c86);
  color: #fff;
  border-radius: 9px 9px 0 0;
}

.pr-pop-head b {
  font-size: 16px;
}

.pr-pop-head span {
  font-size: 13px;
  opacity: .85;
}

.pr-pop-x {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  font-size: 18px;
}

.pr-pop-x svg {
  width: 18px;
  height: 18px;
}

.pr-pop-title {
  padding: 12px 14px 0;
  font-size: 14px;
  color: var(--c-muted, #6b7a80);
  font-weight: 600;
}

.pr-pop-val {
  padding: 2px 14px 6px;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-text, #1f2a2e);
}

.pr-pop-formula {
  margin: 0 14px;
  padding: 9px 11px;
  background: var(--c-bg, #f5f7f8);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.pr-pop-detail {
  margin: 10px 14px 0;
  padding: 0 0 0 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-muted, #6b7a80);
}

.pr-pop-ov {
  margin: 10px 14px 0;
  padding: 8px 10px;
  background: var(--c-amber-pale, #fdf6e3);
  border: 1px solid #e8d9a8;
  border-radius: 8px;
  font-size: 13.5px;
  color: #6d5410;
}

.pr-pop-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px 0;
}

.pr-pop-hint {
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-muted, #6b7a80);
}

.pr-pop-edit {
  width: 100%;
}

.pr-pop-edit label {
  display: block;
  font-size: 13px;
  color: var(--c-muted, #6b7a80);
  margin-bottom: 5px;
}

.pr-pop-editrow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pr-pop-input {
  flex: 1;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pr-pop-unit {
  font-size: 15px;
  color: var(--c-muted, #6b7a80);
}

.pr-pop-editbtns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ============================================================
   帳票印刷 payslip
   ============================================================ */
.ps-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.ps-side .c-card {
  margin-bottom: 14px;
}

.ps-kinds {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* アイコンと文字の位置は明示配置（自動配置に任せると狭い幅で重なりうる） */
.ps-kind {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  text-align: left;
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  background: #fff;
  cursor: pointer;
}

.ps-kind:hover {
  border-color: var(--c-primary, #0e7c86);
  background: var(--c-primary-pale, #e6f2f3);
}

.ps-kind svg {
  width: 20px;
  height: 20px;
  grid-column: 1;
  grid-row: 1 / 3;
  color: var(--c-primary, #0e7c86);
  margin-top: 3px;
}

.ps-kind-l {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
}

.ps-kind-d {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  color: var(--c-muted, #6b7a80);
  line-height: 1.5;
}

.ps-kind.is-on {
  border-color: var(--c-primary, #0e7c86);
  background: var(--c-primary, #0e7c86);
  color: #fff;
  box-shadow: var(--shadow, 0 1px 3px rgba(15, 40, 44, .08));
}

.ps-kind.is-on svg {
  color: #fff;
}

.ps-kind.is-on .ps-kind-d {
  color: rgba(255, 255, 255, .82);
}

.ps-people {
  max-height: 320px;
  overflow: auto;
}

.ps-pgroup {
  margin-bottom: 10px;
}

.ps-pglabel {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-primary-dark, #0a5d65);
  letter-spacing: .08em;
  padding: 4px 0;
  border-bottom: 1px solid var(--c-line, #dde5e8);
  margin-bottom: 4px;
}

.ps-person {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
}

.ps-person:hover {
  background: var(--c-primary-pale, #e6f2f3);
}

.ps-person input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-primary, #0e7c86);
}

.ps-selbtns {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ps-selcount {
  font-size: 14px;
  color: var(--c-muted, #6b7a80);
  margin-left: auto;
}

.ps-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ps-previewhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-muted, #6b7a80);
  padding: 0 2px 8px;
}

.ps-pinfo {
  font-weight: 400;
  font-size: 14px;
}

.ps-stage {
  background: #e9edef;
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  padding: 14px;
  overflow: auto;
  max-height: calc(100vh - 220px);
}

.ps-paperwrap {
  margin: 0 auto;
  overflow: hidden;
}

.ps-frame {
  border: 0;
  background: #fff;
  transform-origin: top left;
  display: block;
}

/* ============================================================
   ホーム dashboard
   ============================================================ */
.db-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 18px;
  align-items: start;
}

.db-today {
  padding-bottom: 14px;
}

.db-todayhead {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line, #dde5e8);
  margin-bottom: 14px;
}

.db-date b {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* 「（水）2026年」は1かたまり。狭い幅で「2026年」だけ孤立して折り返すのを防ぐ */
.db-date span {
  font-size: 15px;
  color: var(--c-muted, #6b7a80);
  margin-left: 6px;
  white-space: nowrap;
}

.db-state {
  font-size: 15px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}

.db-state.open {
  background: #e7f5ee;
  color: var(--c-green, #1e8e5a);
  border: 1px solid #b9dfcb;
}

.db-state.half {
  background: var(--c-amber-pale, #fdf6e3);
  color: #8a6412;
  border: 1px solid #e8d9a8;
}

.db-state.off {
  background: var(--c-bg, #f5f7f8);
  color: var(--c-muted, #6b7a80);
  border: 1px solid var(--c-line, #dde5e8);
}

.db-hours {
  font-size: 15px;
  color: var(--c-muted, #6b7a80);
  font-variant-numeric: tabular-nums;
}

.db-count {
  margin-left: auto;
  font-size: 15px;
  color: var(--c-muted, #6b7a80);
}

.db-count b {
  font-size: 28px;
  color: var(--c-primary, #0e7c86);
  margin-right: 3px;
}

.db-dutygrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.db-sublabel {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-muted, #6b7a80);
  margin-bottom: 7px;
}

.db-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.db-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--c-bg, #f5f7f8);
  border: 1px solid var(--c-line, #dde5e8);
}

.db-chip b {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-muted, #6b7a80);
  font-variant-numeric: tabular-nums;
}

.db-chip.on {
  background: #e7f5ee;
  border-color: #b9dfcb;
  color: #146b43;
}

.db-chip.on b {
  color: var(--c-green, #1e8e5a);
}

.db-none {
  font-size: 15px;
  color: #77868c; /* 高齢の利用者にも読める濃さを確保 */
}

.db-nopunch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--c-muted, #6b7a80);
  padding: 6px 0 12px;
}

.db-nopunch svg {
  width: 20px;
  height: 20px;
}

.db-alertline {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  line-height: 1.7;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--radius, 10px);
}

.db-alertline svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
}

.db-alertline>span {
  min-width: 0;
}

/* 打刻もれ: 見出しは1行だけ・氏名はチップで並べる */
.db-missbody {
  display: block;
}

.db-misshead {
  display: block;
}

.db-misschips {
  margin-top: 7px;
}

.db-chip.miss {
  background: #fff;
  border-color: #e8d9a8;
  color: #6d5410;
}

.db-chip.miss b {
  color: #8a6412;
}

.db-alertline.warn {
  background: var(--c-amber-pale, #fdf6e3);
  border: 1px solid #e8d9a8;
  color: #6d5410;
}

.db-alertline.warn svg {
  color: var(--c-amber, #b7791f);
}

.db-alertline.big {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 12px;
}

.db-backup {
  border-color: #e8d9a8;
}

/* 診療終了 */
.db-endrow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.db-endfield {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  color: var(--c-muted, #6b7a80);
}

.db-endfield input {
  width: 128px;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.db-endnote {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted, #6b7a80);
  margin: 10px 0 12px;
}

.db-end .c-btn.big {
  margin-top: 4px;
}

.db-bulklist {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
}

.db-bulklist li {
  display: flex;
  justify-content: space-between;
  padding: 9px 13px;
  font-size: 16px;
  border-bottom: 1px solid var(--c-line, #dde5e8);
}

.db-bulklist li:last-child {
  border-bottom: 0;
}

.db-bulklist span {
  color: var(--c-muted, #6b7a80);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.db-bulktime {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}

.db-bulktime input {
  font-size: 20px;
  width: 140px;
  font-variant-numeric: tabular-nums;
}

/* 扶養アラート */
.db-fuyolist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.db-fuyo {
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  padding: 12px 14px;
  border-left: 5px solid var(--c-green, #1e8e5a);
}

.db-fuyo.amber {
  border-left-color: var(--c-amber, #b7791f);
  background: #fffdf6;
}

.db-fuyo.red {
  border-left-color: var(--c-red, #c0392b);
  background: var(--c-red-pale, #fdecea);
}

.db-fuyohead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.db-fuyoname {
  font-size: 17px;
  font-weight: 700;
}

.db-fuyocap {
  font-size: 14px;
  color: var(--c-muted, #6b7a80);
  font-variant-numeric: tabular-nums;
}

.db-bar {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: #e6ecee;
  overflow: visible;
}

.db-barfill {
  height: 100%;
  border-radius: 999px;
  background: var(--c-green, #1e8e5a);
}

.db-fuyo.amber .db-barfill {
  background: var(--c-amber, #b7791f);
}

.db-fuyo.red .db-barfill {
  background: var(--c-red, #c0392b);
}

.db-barmark {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--c-muted, #6b7a80);
  transform: translateX(-1px);
}

.db-barmark.amber {
  background: var(--c-amber, #b7791f);
}

.db-barmark.red {
  background: var(--c-red, #c0392b);
}

.db-fuyofoot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  flex-wrap: wrap;
}

.db-fuyonow {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.db-fuyonow b {
  font-size: 19px;
}

.db-fuyonow small,
.db-fuyocast small {
  display: block;
  font-size: 13px;
  color: var(--c-muted, #6b7a80);
  margin-top: 2px;
}

.db-fuyorest {
  font-size: 15px;
  color: var(--c-muted, #6b7a80);
  font-variant-numeric: tabular-nums;
}

.db-fuyorest b {
  font-size: 19px;
  color: var(--c-text, #1f2a2e);
}

.db-fuyocast {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--c-line, #dde5e8);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.db-fuyocast.red {
  color: var(--c-red, #c0392b);
  font-weight: 600;
}

.db-over {
  display: block;
  margin-top: 4px;
  color: var(--c-red, #c0392b);
}

.db-quickrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ============================================================
   設定 settings
   ============================================================ */
.st-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--c-line, #dde5e8);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.st-tab {
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 11px 20px;
  border: 0;
  background: transparent;
  color: var(--c-muted, #6b7a80);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.st-tab:hover {
  color: var(--c-primary, #0e7c86);
}

.st-tab.is-on {
  color: var(--c-primary-dark, #0a5d65);
  border-bottom-color: var(--c-primary, #0e7c86);
}

.st-body {
  max-width: 900px;
}

.st-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.st-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  color: var(--c-muted, #6b7a80);
}

.st-field.wide {
  width: 100%;
}

.st-field.wide .c-input {
  width: 100%;
}

.st-ops-text {
  width: 100%;
  min-height: 88px;
  resize: vertical;
}

.st-field input[type="time"] {
  width: 128px;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.st-field input[type="number"] {
  width: 130px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.st-inputpct {
  display: flex;
  align-items: center;
  gap: 5px;
}

.st-inputpct i {
  font-style: normal;
  font-size: 15px;
}

.st-wds {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.st-wd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.st-wd input {
  width: 18px;
  height: 18px;
  accent-color: var(--c-primary, #0e7c86);
}

/* チェック状態そのものに追随させる（クラスだと外した後も光ったままになる） */
.st-wd:has(input:checked) {
  background: var(--c-primary-pale, #e6f2f3);
  border-color: var(--c-primary, #0e7c86);
  color: var(--c-primary-dark, #0a5d65);
}

.st-save {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.st-readonly {
  font-size: 17px;
  padding: 10px 14px;
  background: var(--c-bg, #f5f7f8);
  border-radius: var(--radius, 10px);
}

.st-radio {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  margin-bottom: 9px;
  cursor: pointer;
}

.st-radio:hover {
  border-color: var(--c-primary, #0e7c86);
}

/* 選び直した瞬間に枠色も切り替える（クラスだと選び直しても前の枠が光ったまま残る） */
.st-radio:has(input:checked) {
  border-color: var(--c-primary, #0e7c86);
  background: var(--c-primary-pale, #e6f2f3);
}

.st-radio input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--c-primary, #0e7c86);
}

.st-radio-b {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted, #6b7a80);
}

.st-radio-b b {
  display: block;
  font-size: 17px;
  color: var(--c-text, #1f2a2e);
  margin-bottom: 3px;
}

/* 源泉パラメータ */
.st-whtest {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  padding: 12px 14px;
  background: var(--c-bg, #f5f7f8);
  border-radius: var(--radius, 10px);
  margin-bottom: 12px;
}

.st-whtest .c-input {
  width: 130px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.st-whtest .c-input.narrow {
  width: 72px;
}

.st-whresult {
  font-size: 17px;
  margin-left: 4px;
}

.st-whresult b {
  font-size: 21px;
  color: var(--c-primary-dark, #0a5d65);
  font-variant-numeric: tabular-nums;
}

.st-json {
  min-height: 300px;
}

.st-whmsg {
  font-size: 15px;
  line-height: 1.6;
  margin-top: 8px;
  min-height: 22px;
}

.st-whmsg.err {
  color: var(--c-red, #c0392b);
  font-weight: 600;
}

.st-whmsg.ok {
  color: var(--c-green, #1e8e5a);
  font-weight: 600;
}

.st-whsteps {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
}

/* 休診カレンダー */
.st-calbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.st-calym {
  font-size: 20px;
  font-weight: 700;
  min-width: 150px;
  text-align: center;
}

/* minmax(0,1fr)＝中の文字で列が広がらない。曜日見出しと日付の列ズレ・横はみ出しを防ぐ */
.st-cal-head,
.st-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.st-cal-head {
  margin-bottom: 5px;
}

.st-cal-h {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-muted, #6b7a80);
  padding: 4px 0;
}

.st-cal-h.sun {
  color: var(--c-red, #c0392b);
}

.st-cal-h.sat {
  color: #2a6ca8;
}

.st-cal-cell {
  font: inherit;
  min-height: 74px;
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  overflow: hidden;
}

.st-cal-cell:hover {
  border-color: var(--c-primary, #0e7c86);
  box-shadow: inset 0 0 0 2px var(--c-primary-pale, #e6f2f3);
}

.st-cal-cell.empty {
  border: 0;
  background: transparent;
  cursor: default;
  min-height: 0;
}

.st-cal-d {
  font-size: 17px;
  font-weight: 700;
}

.st-cal-cell.sun .st-cal-d {
  color: var(--c-red, #c0392b);
}

.st-cal-cell.sat .st-cal-d {
  color: #2a6ca8;
}

.st-cal-l {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--c-bg, #f5f7f8);
  color: var(--c-muted, #6b7a80);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.st-cal-r {
  font-size: 11px;
  color: var(--c-muted, #6b7a80);
  line-height: 1.3;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.st-cal-cell.closed {
  background: #f0f2f3;
  color: var(--c-muted, #6b7a80);
}

.st-cal-cell.closed .st-cal-l {
  background: #dfe4e6;
}

.st-cal-cell.half {
  background: var(--c-amber-pale, #fdf6e3);
}

.st-cal-cell.half .st-cal-l {
  background: #f2e2b8;
  color: #6d5410;
}

.st-cal-cell.custom {
  border-color: var(--c-primary, #0e7c86);
  border-style: dashed;
}

.st-cal-cell.istoday {
  box-shadow: 0 0 0 2px var(--c-primary, #0e7c86);
}

.st-callegend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 14px;
  color: var(--c-muted, #6b7a80);
}

.st-callegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-callegend .lg {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--c-line, #dde5e8);
  display: inline-block;
}

.st-callegend .lg.closed {
  background: #f0f2f3;
}

.st-callegend .lg.half {
  background: var(--c-amber-pale, #fdf6e3);
}

.st-callegend .lg.custom {
  border: 1px dashed var(--c-primary, #0e7c86);
}

.st-daybtns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 6px 0 16px;
}

/* データ管理 */
.st-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.st-stats>div {
  background: var(--c-bg, #f5f7f8);
  border-radius: var(--radius, 10px);
  padding: 13px 15px;
}

.st-stats b {
  display: block;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--c-primary-dark, #0a5d65);
}

.st-stats span {
  font-size: 14px;
  color: var(--c-muted, #6b7a80);
}

.st-stats>div.warn {
  background: var(--c-amber-pale, #fdf6e3);
}

.st-stats>div.warn b {
  color: var(--c-amber, #b7791f);
}

.st-databtns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.st-databtns .c-btn.big {
  width: auto;
  flex: 1 1 240px;
}

.st-danger {
  border-color: #f0cdc7;
}

/* ============================================================
   画面幅への追従
   ============================================================ */
@media (max-width: 1200px) {

  .db-grid,
  .ps-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ps-people {
    max-height: 240px;
  }
}

@media (max-width: 860px) {
  .db-dutygrid {
    grid-template-columns: 1fr;
  }

  .db-quickrow,
  .st-daybtns {
    grid-template-columns: 1fr;
  }

  .st-cal-cell {
    min-height: 60px;
  }
}

/* ---------- スマートフォン（サイドバーはドロワーに格納され本文が全幅） ---------- */
@media (max-width: 640px) {

  .c-title {
    font-size: 21px;
  }

  .c-sub {
    font-size: 15px;
  }

  .c-card {
    padding: 14px 15px;
  }

  /* --- 給与計算 --- */
  /* 月送り → 対象月 → 再計算/CSV → 確定 の順に2列で積む（縦一列で長くしない） */
  .pr-toolbar {
    gap: 8px;
    padding: 12px;
  }

  .pr-toolbar .c-btn {
    flex: 1 1 calc(50% - 4px);
    padding: 11px 8px;
  }

  .pr-toolbar [data-act="prev"] {
    order: 1;
  }

  .pr-toolbar [data-act="next"] {
    order: 2;
  }

  .pr-toolbar .pr-ym {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
  }

  .pr-toolbar [data-act="recalc"] {
    order: 4;
  }

  .pr-toolbar [data-act="csv"] {
    order: 5;
  }

  .pr-toolbar .c-chip {
    order: 6;
    flex: 1 0 100%;
    justify-content: center;
  }

  .pr-toolbar [data-act="confirm"] {
    order: 7;
    flex: 1 0 100%;
  }

  .pr-toolbar .pr-flex {
    display: none;
  }

  .pr-warn {
    font-size: 15px;
  }

  /* 表は中で横スクロール（ページ全体は横に動かさない） */
  .pr-tablewrap {
    max-height: calc(100vh - 330px);
    min-height: 240px;
  }

  .pr-table {
    font-size: 15px;
  }

  .pr-table th,
  .pr-table td {
    padding: 6px 8px;
  }

  .pr-table tbody th.pr-rowhead,
  .pr-table th.pr-rowhead {
    min-width: 128px;
  }

  .pr-cell {
    min-width: 76px;
  }

  .pr-row.is-total td,
  .pr-row.is-total th.pr-rowhead {
    font-size: 16px;
  }

  /* 内訳ポップは必ず画面内に収める */
  .pr-pop {
    width: min(320px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
  }

  .pr-pop-val {
    font-size: 23px;
  }

  /* --- 帳票印刷 --- */
  .ps-side .c-card {
    margin-bottom: 12px;
  }

  .ps-kind {
    padding: 11px 12px;
  }

  .ps-kind-d {
    font-size: 12.5px;
  }

  .ps-side .c-select {
    width: 100%;
  }

  .ps-people {
    max-height: 210px;
  }

  .ps-selcount {
    flex: 1 0 100%;
    margin-left: 0;
  }

  .ps-stage {
    padding: 10px;
    max-height: 58vh;
  }

  /* --- ホーム --- */
  .db-todayhead {
    gap: 10px 12px;
  }

  .db-date b {
    font-size: 26px;
  }

  .db-count {
    margin-left: 0;
  }

  .db-count b {
    font-size: 24px;
  }

  .db-backup .c-btn {
    width: 100%;
  }

  .db-fuyofoot {
    gap: 4px 12px;
  }

  .db-endfield {
    flex: 1 1 140px;
  }

  .db-endfield input {
    width: 100%;
  }

  /* --- 設定 --- */
  .st-tab {
    padding: 10px 13px;
  }

  .st-body {
    max-width: none;
  }

  .st-calbar .c-flex {
    display: none;
  }

  .st-calym {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
  }

  .st-cal-head,
  .st-cal {
    gap: 3px;
  }

  .st-cal-cell {
    min-height: 52px;
    padding: 4px;
    gap: 1px;
  }

  .st-cal-d {
    font-size: 15px;
  }

  /* 「午前のみ」は1行に入らないので折り返す（親のnowrapを解除） */
  .st-cal-l {
    font-size: 10px;
    padding: 0 4px;
    line-height: 1.4;
    white-space: normal;
  }

  /* 幅が足りないので理由は出さない（日付を押すと出る） */
  .st-cal-r {
    display: none;
  }

  .st-whtest .c-input {
    width: 110px;
  }

  .st-databtns .c-btn.big {
    flex: 1 1 100%;
  }
}

/* 画面の印刷は帳票用iframeで行うため、操作部品は隠す */
@media print {

  .pr-toolbar,
  .ps-side,
  .st-tabs,
  .db-quick,
  .c-btn {
    display: none !important;
  }

  .pr-tablewrap {
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }
}

/* ============================================================
   v1.4 月締めチェック（給与の確定）＋ ホームの「今日やること」
   ============================================================ */

/* --- 確定済みの月は表を触らせない（内訳は見られる） --- */
.pr-tablewrap.is-locked .pr-cell {
  cursor: default;
}

.pr-pop-hint.locked {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #6d5410;
  background: var(--c-amber-pale, #fdf6e3);
  border: 1px solid #e8d9a8;
  border-radius: var(--radius, 10px);
  padding: 9px 11px;
  line-height: 1.6;
}

.pr-pop-hint.locked svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  color: var(--c-amber, #b7791f);
}

/* --- 月締めチェックのモーダル --- */
.mc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mc-item {
  margin: 0;
  padding: 14px 16px;
  border-left: 5px solid var(--c-line, #dde5e8);
  box-shadow: none;
}

.mc-item.is-block {
  border-left-color: var(--c-red, #c0392b);
  background: var(--c-red-pale, #fdecea);
  border-color: #f0c9c3;
  border-left-color: var(--c-red, #c0392b);
}

.mc-item.is-warn {
  border-left-color: var(--c-amber, #b7791f);
  background: var(--c-amber-pale, #fdf6e3);
  border-color: #e8d9a8;
  border-left-color: var(--c-amber, #b7791f);
}

.mc-item.is-info {
  border-left-color: var(--c-line, #dde5e8);
  background: var(--c-bg, #f5f7f8);
}

.mc-item.is-ok {
  border-left-color: var(--c-green, #1e8e5a);
  background: #e7f5ee;
  border-color: #b9dfcb;
  border-left-color: var(--c-green, #1e8e5a);
}

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

.mc-head svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--c-green, #1e8e5a);
}

.mc-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text, #1f2a2e);
}

.mc-tag {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid currentColor;
}

.mc-item.is-block .mc-tag {
  color: var(--c-red, #c0392b);
}

.mc-item.is-warn .mc-tag {
  color: #8a6412;
}

.mc-item.is-info .mc-tag {
  color: var(--c-muted, #6b7a80);
}

.mc-count {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-muted, #6b7a80);
  font-variant-numeric: tabular-nums;
}

.mc-detail {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text, #1f2a2e);
}

.mc-names {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
}

.mc-names li {
  font-size: 14px;
  line-height: 1.4;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--c-line, #dde5e8);
  font-variant-numeric: tabular-nums;
}

.mc-more {
  margin-top: 6px;
  font-size: 14px;
  color: var(--c-muted, #6b7a80);
}

.mc-acts {
  margin-top: 12px;
}

.mc-foot {
  margin-top: 14px;
  margin-bottom: 0;
}

.mc-ack {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  background: var(--c-bg, #f5f7f8);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.mc-ack input {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--c-primary, #0e7c86);
  cursor: pointer;
}

/* --- 解除の理由（.c-textarea の等幅・特大サイズは使わない） --- */
.mc-reason {
  display: block;
  margin-top: 4px;
}

.mc-reason>span {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.c-textarea.mc-reasonbox {
  min-height: 92px;
  font-family: inherit;
  font-size: 16px;
  white-space: pre-wrap;
}

/* --- 確定・解除の履歴 --- */
.mc-hist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mc-hist li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 2px;
  border-top: 1px solid var(--c-line, #dde5e8);
  font-size: 15px;
  line-height: 1.6;
}

.mc-hist li:first-child {
  border-top: 0;
}

.mc-hist-at {
  font-variant-numeric: tabular-nums;
  color: var(--c-muted, #6b7a80);
  flex: none;
  min-width: 6.5em;
}

.mc-hist-act {
  font-weight: 700;
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--c-bg, #f5f7f8);
  border: 1px solid var(--c-line, #dde5e8);
}

.mc-hist-confirm .mc-hist-act {
  background: #e7f5ee;
  border-color: #b9dfcb;
  color: var(--c-green, #1e8e5a);
}

.mc-hist-unlock .mc-hist-act {
  background: var(--c-amber-pale, #fdf6e3);
  border-color: #e8d9a8;
  color: #8a6412;
}

.mc-hist-why {
  flex: 1 1 12em;
  color: var(--c-text, #1f2a2e);
}

/* --- ホーム「今日やること」 --- */
.db-todo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db-todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font: inherit;
  font-size: 16px;
  text-align: left;
  /* ボタンの既定の nowrap を打ち消す（長い見出しは折り返して読ませる） */
  white-space: normal;
  padding: 12px 14px;
  min-height: 56px;
  border: 1px solid var(--c-line, #dde5e8);
  border-radius: var(--radius, 10px);
  background: var(--c-surface, #fff);
  color: var(--c-text, #1f2a2e);
  cursor: pointer;
}

.db-todo-item:hover {
  background: var(--c-primary-pale, #e6f2f3);
  border-color: var(--c-primary, #0e7c86);
}

.db-todo-item:active {
  transform: translateY(1px);
}

.db-todo-ic {
  display: flex;
  flex: none;
  color: var(--c-amber, #b7791f);
}

.db-todo-ic svg {
  width: 22px;
  height: 22px;
}

.db-todo-body {
  flex: 1 1 auto;
  min-width: 0;
}

.db-todo-body b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  /* 「前月分（2026年8月分）の給与が未確定」は括弧の前後で改行できず、狭い幅ではみ出す */
  overflow-wrap: anywhere;
}

.db-todo-body small {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-muted, #6b7a80);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-todo-go {
  display: flex;
  flex: none;
  color: var(--c-muted, #6b7a80);
}

.db-todo-go svg {
  width: 20px;
  height: 20px;
}

.db-todo-none {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--c-muted, #6b7a80);
  padding: 4px 2px;
}

.db-todo-none svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-green, #1e8e5a);
}

@media (max-width:640px) {
  .mc-item {
    padding: 12px 13px;
  }

  .mc-count {
    margin-left: 0;
  }

  .db-todo-body small {
    white-space: normal;
  }
}

@media print {

  .db-todo,
  .db-todo-item {
    display: none !important;
  }
}

/* 特別手当（ベースUP他）のまとめ入力（payroll.js doSpecialBulk） */
.sp-all {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.sp-all>span { font-weight: 600; }
.sp-all .c-input { width: 140px; }
.sp-wrap {
  max-height: 52vh;
  overflow: auto;
  border: 1px solid var(--line, #dfe5e7);
  border-radius: 8px;
}
.sp-table { width: 100%; border-collapse: collapse; }
.sp-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line, #eef2f3);
}
.sp-table tr:last-child td { border-bottom: 0; }
.sp-table td:last-child { width: 150px; }
.sp-table .c-input { width: 100%; text-align: right; }
.sp-type {
  margin-left: 8px;
  font-size: 12px;
  color: var(--muted, #667);
}