/* ============================================================
   DWIMS 共通スタイル
   docs/画面設計指針.md 1章のデザイントークンをそのまま定義する。
   値を変えるときはこのファイルではなく指針側を先に更新すること。
   ============================================================ */

:root {
  /* 基調色 */
  --dwims-teal:        #159895;
  --dwims-teal-hover:  #128280; /* 【2】ログインボタン用。他のhoverトークンと同じく約15%暗く */
  --dwims-header-from: #6877e0;
  --dwims-header-to:   #7355b0;
  --dwims-nav-bg:      #4a5568;

  /* 背景・面 */
  --dwims-body-bg:     #e2e8f1;
  --dwims-card-bg:     #ffffff;
  --dwims-card-radius: 12px;
  --dwims-card-shadow: 0 2px 12px rgba(0,0,0,.08);

  /* ボタン（色の意味は固定：青=表示/参照、緑=保存/実行、グレー=キャンセル、赤=削除） */
  --dwims-btn-primary: #3a8ed8;
  --dwims-btn-primary-hover: #2f7ac1;
  --dwims-btn-success: #34a853;
  --dwims-btn-success-hover: #2c8f46;
  --dwims-btn-cancel:  #cbd5e0;
  --dwims-btn-cancel-hover: #b6c2d1;
  --dwims-btn-danger:  #e05252;
  --dwims-btn-danger-hover: #c94343;
  --dwims-btn-radius:  8px;

  /* テキスト */
  --dwims-text:        #2d3748;
  --dwims-text-muted:  #666666;

  /* 表 */
  --dwims-th-from:     #6877e0;
  --dwims-th-to:       #7355b0;
  --dwims-row-border:  #e8e8e8;

  /* 状態色 */
  --dwims-error-bg:    #fed7d7;
  --dwims-error-text:  #c53030;
  --dwims-warn-bg:     #fff3cd;
  --dwims-warn-border: #ffeeba;
  --dwims-warn-text:   #856404;
  --dwims-ok-bg:       #d4f4dd;
  --dwims-ok-text:     #1e7a3e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Meiryo', 'Yu Gothic', sans-serif;
  color: var(--dwims-text);
  background: linear-gradient(135deg, #f5f7fa 0%, var(--dwims-body-bg) 100%);
  min-height: 100vh;
}

/* --- 環境バッジ帯：ENV_NAME=TEST のとき本文の最上部に出す --- */
.dwims-env-banner {
  display: none;
  background: var(--dwims-warn-bg);
  color: var(--dwims-warn-text);
  border-bottom: 1px solid var(--dwims-warn-border);
  text-align: center;
  font-weight: bold;
  padding: 6px 0;
  font-size: 14px;
}
.dwims-env-banner.is-visible { display: block; }

/* --- ヘッダー帯 --- */
.dwims-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--dwims-header-from) 0%, var(--dwims-header-to) 100%);
  color: #fff;
  padding: 18px 30px;
}
.dwims-header-titles { display: flex; flex-direction: column; }
.dwims-header-title { font-size: 20px; font-weight: bold; }
.dwims-header-subtitle { font-size: 12px; opacity: .85; }
.dwims-header-user {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.dwims-header-tenant { opacity: .9; }

/* --- ナビ帯（画面設計指針3章 #1: 画面がURLで分かれた分、遷移手段が要る） ---
   旧画面（dwims_design.html）の「青い角丸ボタン横並び」をそのまま踏襲した1段目と、
   現在地を示すパンくずの2段目からなる2段構成。 */
.dwims-nav {
  background: var(--dwims-nav-bg);
  display: flex;
  flex-direction: column;
}
.dwims-nav-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 30px;
}
/* .btn は <button> 前提のスタイル（下線なし・cursor等）なのでリンクにも同じ見た目を強制する。
   :visited は擬似クラス分だけ .btn-primary より詳細度が高く、指定しないと訪問済みリンクの
   文字色がブラウザ既定の紫に戻ってしまうため個別に上書きする。 */
.dwims-nav-links a.btn {
  text-decoration: none;
}
.dwims-nav-links a.btn:visited {
  color: #fff;
}
.dwims-nav-breadcrumb {
  padding: 6px 30px 10px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.dwims-nav .dwims-crumb {
  color: #fff;
  font-size: 13px;
  opacity: .85;
}
.dwims-nav .dwims-crumb a,
.dwims-nav .dwims-crumb a:visited {
  color: #fff;
  text-decoration: underline;
}

/* --- レイアウト --- */
.dwims-container {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 20px 40px;
}

.card {
  background: var(--dwims-card-bg);
  border-radius: var(--dwims-card-radius);
  box-shadow: var(--dwims-card-shadow);
  padding: 30px;
  margin-bottom: 24px;
}
.card h2 {
  margin-top: 0;
  font-size: 18px;
}

/* --- ボタン --- */
/* hidden 属性の要素は必ず隠す（.btn 等の display 指定が hidden に勝って、隠したはずのボタンが見えていた。
   画面の出し分け〈data-perm〉・出力ボタン等。2026-10-13） */
[hidden] { display: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--dwims-btn-radius);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, background-color .1s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary { background: var(--dwims-btn-primary); color: #fff; }
.btn-primary:hover { background: var(--dwims-btn-primary-hover); }
.btn-success { background: var(--dwims-btn-success); color: #fff; }
.btn-success:hover { background: var(--dwims-btn-success-hover); }
.btn-cancel { background: var(--dwims-btn-cancel); color: var(--dwims-text); }
.btn-cancel:hover { background: var(--dwims-btn-cancel-hover); }
.btn-danger { background: var(--dwims-btn-danger); color: #fff; }
.btn-danger:hover { background: var(--dwims-btn-danger-hover); }
/* 【2】ログインボタン専用。旧画面の見た目（背景とボタンが同系色のティール）を踏襲する。
   青=表示/緑=保存 の色分け対象外（ログイン操作は保存/実行系の緑ではなく背景色に揃える）。 */
.btn-teal { background: var(--dwims-teal); color: #fff; }
.btn-teal:hover { background: var(--dwims-teal-hover); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

.dwims-actions { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }

/* --- 検索欄 --- */
.dwims-search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #f7fafc;
  border-radius: 8px;
}
.dwims-search-bar input[type="text"] {
  flex: 1 1 240px;
  padding: 9px 12px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 14px;
}
/* 【18】サービス種類での絞り込みプルダウン（dwims-ui.js 共通部品）。
   検索文字列の入力欄とは幅の伸び方を分ける（flex-growさせない）。 */
/* 【40】受給者証有効期間終了日の範囲検索。文字列検索欄と同様、伸び縮みはさせない。 */
.dwims-search-bar input[type="date"] {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 14px;
}
.dwims-search-bar select {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 14px;
}
.dwims-search-bar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
}
/* 【29】絞り込みの既定値（在職状況など）が何を除外しているか一目で分かるよう、
   プルダウンの隣に添える小さな注記。選択肢のラベルだけでは既定除外に気づきにくいため。 */
.dwims-search-hint {
  font-size: 12px;
  color: var(--dwims-text-muted);
  white-space: nowrap;
}

/* --- 表 --- */
table.dwims-table {
  width: 100%;
  border-collapse: collapse;
}
.dwims-table th {
  background: linear-gradient(135deg, var(--dwims-th-from) 0%, var(--dwims-th-to) 100%);
  color: #fff;
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  white-space: nowrap;
}
.dwims-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--dwims-row-border);
  font-size: 14px;
}
.dwims-table tbody tr:hover { background: #f7fafc; }
.dwims-table td.dwims-col-actions { white-space: nowrap; text-align: right; }
/* 【22】作業場所名・状態・サービスバッジなど、本来は短い内容の列が隣の可変長列
   （紐づく事業所名など）に押されて2行に折り返されるのを防ぐ。長い内容が
   入った場合は dwims-table-wrap の横スクロール（overflow-x:auto）に任せる。 */
.dwims-table td.dwims-col-nowrap { white-space: nowrap; }
/* 【35】利用者マスタ「氏名」列でカナを専用列にせず氏名の下に添えるための小文字表示。
   列数を減らして横スクロールを抑える目的（カナ専用列の廃止）。 */
.dwims-subtext { font-size: 11px; color: var(--dwims-text-muted); }
/* 【14】無効な行は一覧上で即座に区別できるよう、文字色だけ薄くする
   （バッジは dwims-badge-off で別途表現済みのため、背景は変えない）。 */
.dwims-table tbody tr.dwims-row-inactive td { color: var(--dwims-text-muted); }
.dwims-table-wrap { overflow-x: auto; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.dwims-empty-row td { text-align: center; color: var(--dwims-text-muted); padding: 30px 0; }

.dwims-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
}
.dwims-badge-ok { background: var(--dwims-ok-bg); color: var(--dwims-ok-text); }
.dwims-badge-off { background: #edf2f7; color: var(--dwims-text-muted); }
/* 【20】【21】事業所マスタ「提供サービス」列・作業場所マスタ「サービス」列で
   service_types.abbreviation をバッジ状に並べるための色（状態バッジと紛れないよう
   基調色のteal系に寄せる）。複数並ぶため右マージンを持たせる。 */
.dwims-badge-service {
  /* 【23】通常のバッジより一回り小さくし、3個程度が1行に収まりやすくする。 */
  padding: 2px 7px;
  font-size: 11px;
  background: #d9f2f1;
  color: var(--dwims-teal-hover);
  margin: 0 4px 2px 0;
  cursor: default;
}
/* 【40】利用者マスタ一覧「受給者証有効期限」列。dwims-badge-service と同じ小型バッジ。
   期限切れ・30日以内（近い）は状態色（error/warn）に変えて目立たせる。 */
.dwims-badge-cert {
  padding: 2px 7px;
  font-size: 11px;
  background: #edf2f7;
  color: var(--dwims-text);
  margin: 0 4px 2px 0;
  cursor: default;
}
.dwims-badge-cert-soon { background: var(--dwims-warn-bg); color: var(--dwims-warn-text); }
.dwims-badge-cert-expired { background: var(--dwims-error-bg); color: var(--dwims-error-text); }
/* 【46】利用者マスタ一覧「契約」列。「過去分含む」ON時に混ざる終了済みの過去契約を
   グレーアウトする（期限切れ/近いの強調色より優先。dwims-badge-off と同じ考え方）。 */
.dwims-badge-cert-past { color: var(--dwims-text-muted); opacity: .75; }

/* --- ページング --- */
.dwims-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--dwims-text-muted);
}

/* --- モーダル --- */
.dwims-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.dwims-modal {
  background: #fff;
  border-radius: var(--dwims-card-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  padding: 30px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}
.dwims-modal.dwims-modal-wide { max-width: 760px; }
.dwims-modal h3 { margin-top: 0; }
.dwims-modal-subtitle { color: var(--dwims-text-muted); font-size: 13px; margin-top: -10px; }

/* 【43】行操作メニュー（DwimsUI.openRowActionsMenu）。一覧の操作列に並んでいた
   複数ボタンをこのモーダル内の縦並びボタンに集約する。 */
.dwims-row-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.dwims-row-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}
.dwims-row-menu-item:hover { background: #f7fafc; }
.dwims-row-menu-item-danger { color: var(--dwims-btn-danger); border-color: var(--dwims-btn-danger); }
.dwims-row-menu-item-danger:hover { background: #fff5f5; }
/* 一覧の操作列に置く「⋯」トリガー。文字ラベルの複数ボタンより大幅に幅を取らない。 */
.dwims-row-menu-trigger {
  border: 1px solid #cbd5e0;
  background: #fff;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.dwims-row-menu-trigger:hover { background: #f7fafc; }

/* 【43】利用者マスタ一覧「契約」列。1契約1行で縦積み表示する
   （旧「契約サービス」列＋「受給者証有効期限」列の統合）。 */
.dwims-contract-line { margin: 2px 0; }
.dwims-contract-line:first-child { margin-top: 0; }
.dwims-child-history-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
  margin-left: auto;
}
.dwims-modal-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

/* --- 【3】ヘッダー（タイトル）／フッター（保存・キャンセル）固定、本体のみスクロール ---
   項目数の多いフォーム（利用者マスタ・受給者証等）向け。position:sticky ではなく
   flexbox の3段構成にする（overflow コンテナの上下paddingの扱いがブラウザ間で
   一貫しないため、sticky+padding の組み合わせは避けた）。
   利用は任意：短い内容（確認ダイアログ等）は今まで通り .dwims-modal 単体でよい。 */
.dwims-modal.dwims-modal-scroll {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden; /* スクロールは .dwims-modal-body 側だけが持つ */
}
.dwims-modal.dwims-modal-scroll > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* ネストしたflexで子にoverflow-y:autoを効かせるための定石 */
}
.dwims-modal-head {
  flex: 0 0 auto;
  padding: 24px 30px 14px;
}
.dwims-modal-head h3 { margin: 0; }
.dwims-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 0 30px 14px;
}
.dwims-modal-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 16px 30px 24px;
  border-top: 1px solid var(--dwims-row-border);
}

/* --- フォーム --- */
.dwims-field { margin-bottom: 16px; }
/* 2つ以上のフィールドを横並びにする共通部品（例：都道府県／市区町村）。
   flex-wrapは使わない：basis+gapがコンテナ幅にわずかでも収まらないと
   縮小せず折り返してしまう挙動があり、常に横並びにしたい用途と合わないため。
   幅が足りない時は折り返さず、各フィールド側で縮む（min-width:0）。 */
.dwims-field-row {
  display: flex;
  gap: 16px;
}
.dwims-field-row > .dwims-field {
  flex: 1 1 0;
  min-width: 0;
}
.dwims-field label {
  display: block;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 6px;
}
.dwims-field input[type="text"],
.dwims-field input[type="tel"],
.dwims-field input[type="password"],
.dwims-field input[type="date"],
.dwims-field input[type="time"],
.dwims-field input[type="number"],
.dwims-field select,
.dwims-field textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 14px;
}
.dwims-field textarea { font-family: inherit; resize: vertical; }
/* 読み取り専用の表示項目（例：事業所マスタの市町村番号・地域区分）。入力欄と区別する */
.dwims-field input[readonly] { background: #f1f5f9; color: #334155; cursor: default; }

/* --- パスワード表示/非表示切替（画面設計指針・dwims-ui.js共通部品） ---
   ボタンは input の外側に横並びする。input 内側への絶対配置はしない
   （ブラウザのパスワードマネージャーのアイコンと重なるため）。
   【12】flex-wrap は使わない：.dwims-field input に共通の width:100% があり、
   flex-basis が auto だと width の値を引き継いで「入力欄だけで行幅いっぱい」を
   要求してしまい、wrapできてしまうとボタンが次の行に落ちて小さく浮いて見えていた。
   幅は input 側の flex:1 1 auto（下でwidth:100%を明示的に上書き）で確保し、
   ボタンは常に同じ行の右隣に置く。 */
.dwims-password-field {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}
.dwims-password-field .dwims-field-error { flex-basis: 100%; }
.dwims-password-field input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.dwims-password-toggle-btn {
  flex: 0 0 auto;
  border: 1px solid #cbd5e0;
  background: #fff; /* 【12】入力欄の背景（白）に揃える */
  border-radius: 6px;
  padding: 0 14px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.dwims-password-toggle-btn:hover { background: #f7fafc; }
.dwims-field input.dwims-input-error,
.dwims-field select.dwims-input-error {
  border-color: var(--dwims-error-text);
  background: #fff5f5;
}
.dwims-field-error {
  color: var(--dwims-error-text);
  font-size: 12px;
  margin-top: 4px;
  display: none;
}
.dwims-field-error.is-visible { display: block; }
.dwims-checkbox-field { display: flex; align-items: center; gap: 8px; }
.dwims-checkbox-field label { margin-bottom: 0; }

/* 【38】都道府県→市区町村の2段プルダウン（DwimsUI.wireMunicipalityCascade）。
   2つの<select>を横並びにする。.dwims-field select の width:100% を
   flexコンテナ内でそのまま使うと折り返すため、.dwims-password-field と同じ
   考え方で width:auto に上書きする。 */
.dwims-municipality-cascade { display: flex; gap: 10px; }
.dwims-municipality-cascade select { flex: 1 1 0; min-width: 0; width: auto; }

/* 【39】期間子マスタ共通モーダル（openPeriodChildModal）の一覧ヘッダに出す
   部分一致検索欄。検索バーの input[type=text] より一回り小さく、
   「履歴を含める」トグルより前・追加ボタンより後ろに並ぶ想定。 */
.dwims-child-filter-input {
  padding: 7px 10px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 13px;
  min-width: 200px;
}

.dwims-zip-overwrite-prompt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--dwims-warn-bg);
  border: 1px solid var(--dwims-warn-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--dwims-warn-text);
}

.dwims-form-error {
  display: none;
  background: var(--dwims-error-bg);
  color: var(--dwims-error-text);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.dwims-form-error.is-visible { display: block; }

/* --- トースト --- */
.dwims-toast-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2000;
}
.dwims-toast {
  min-width: 240px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  animation: dwims-toast-in .15s ease-out;
}
.dwims-toast-success { background: var(--dwims-btn-success); }
.dwims-toast-error   { background: var(--dwims-btn-danger); }
.dwims-toast-info    { background: var(--dwims-btn-primary); }
.dwims-toast-warning { background: var(--dwims-warn-bg); color: var(--dwims-warn-text); border: 1px solid var(--dwims-warn-border); }
@keyframes dwims-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- ログイン画面 --- */
.dwims-login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--dwims-teal), #159895);
}
.dwims-login-card {
  background: #fff;
  border-radius: var(--dwims-card-radius);
  box-shadow: var(--dwims-card-shadow);
  padding: 40px;
  width: 100%;
  max-width: 380px;
}
.dwims-login-card h1 {
  font-size: 18px;
  text-align: center;
  margin-top: 0;
  color: var(--dwims-text);
}

/* --- 複数選択の絞り込み（チェックボックスのポップアップを開くボタン）。
   作業記録画面・記録出力画面の「作業内容／出欠区分／状態で絞り込み」で共通利用
   （2026-09-20仕様追加）。<select>と見た目を揃えつつクリック領域を広げる。 */
.dwims-filter-picker-btn {
  min-width: 120px;
  max-width: 220px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dwims-filter-picker-btn.is-filtering {
  background: var(--dwims-badge-service-bg, #e6f6f5);
  color: var(--dwims-teal-hover);
  border-color: var(--dwims-teal);
  font-weight: bold;
}

/* ============================================================
   作業記録画面（static/support-records.html）
   利用者×日×作業場所。CLAUDE.md 6章 実装順序6番目、本プロジェクトの中核。
   ============================================================ */
.dwims-sr-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.dwims-sr-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--dwims-text-muted);
}
.dwims-sr-toolbar input[type="date"],
.dwims-sr-toolbar select {
  padding: 8px 10px;
  border: 1px solid var(--dwims-row-border);
  border-radius: var(--dwims-btn-radius);
  font-size: 14px;
}
/* --- 対象日の前後移動・本日ボタン --- */
.dwims-sr-date-nav { display: flex; align-items: center; gap: 4px; }
.dwims-sr-date-nav .btn-sm { padding: 6px 9px; }
/* --- 絞り込みツールバー（作業内容・出欠区分・状態） --- */
.dwims-sr-filter-toolbar { margin-bottom: 12px; }
.dwims-sr-filter-count { align-self: center; }
#srRecordDateLabel.is-today { font-weight: bold; color: var(--dwims-text); }
.dwims-sr-row-unresolved { background: var(--dwims-error-bg); }
.dwims-sr-row-ambiguous { background: var(--dwims-warn-bg); }
.dwims-sr-resolution-note {
  font-size: 11px;
  margin-top: 4px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}
.dwims-sr-resolution-note.is-error { color: var(--dwims-error-text); }
.dwims-sr-resolution-note.is-warn { color: var(--dwims-warn-text); }
.dwims-sr-resolution-note.is-ok { color: var(--dwims-ok-text); font-weight: bold; }

/* 【作業記録画面】ブラウザ幅を広げれば横スクロール無しで備考列まで見えるよう、
   このページだけ .dwims-container の1100px上限を外して可変幅にする。
   table-layout:fixed + colgroup（HTML側で幅%を固定指定）と組み合わせ、各セル内の
   input/textareaは100%幅にして列幅に追従させる（固定px指定をやめる）。 */
.dwims-container-wide { max-width: none; width: calc(100% - 40px); }
.dwims-sr-table-wrap table.dwims-table { table-layout: fixed; }
.dwims-sr-table-wrap td,
.dwims-sr-table-wrap th { overflow-wrap: break-word; }
/* 請求先事業所の候補<select>（事業所名が長い）等、table内の素の<select>は
   幅指定が無いと内容の長さで広がり、table-layout:fixedの列幅をはみ出して
   隣列に重なって見える。閉じた状態の表示だけ省略記号にし、列内に収める
   （開いた選択肢一覧のフル表示はブラウザ既定の挙動に任せる）。 */
.dwims-sr-table-wrap select {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dwims-sr-worktype-summary { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.dwims-sr-worktype-chip {
  background: var(--dwims-badge-service-bg, #e6f6f5);
  color: var(--dwims-teal-hover);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  white-space: nowrap;
}
.dwims-sr-worktype-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 12px;
  max-height: 50vh;
  overflow-y: auto;
}
.dwims-sr-worktype-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: normal;
}
/* 職員考察：全角28文字/行が収まる幅を確保する（14pxフォント×全角28文字≒392px。
   colgroupの列幅（33%）側で確保し、textarea自体はfont-family/font-sizeを
   セルに揃えて文字幅の見積もりがぶれないようにする）。 */
.dwims-sr-note-cell textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
}
.dwims-sr-note-charcount { font-size: 11px; color: var(--dwims-text-muted); }
.dwims-sr-note-charcount.is-short { color: var(--dwims-warn-text); }
.dwims-sr-remarks-cell input[type="text"] { width: 100%; min-width: 0; box-sizing: border-box; }

/* --- 出欠区分のロック（事業所未確定行。CLAUDE.md「1. 事業所未確定行の出欠区分をロック」） --- */
.dwims-sr-status-locked { background: #edf2f7; color: var(--dwims-text-muted); cursor: not-allowed; }
.dwims-sr-status-lock-note { font-size: 11px; color: var(--dwims-warn-text); margin-top: 4px; }

/* --- 行ロック（悲観的排他制御） --- */
.dwims-sr-row-locked-other { background: #f1f1f4; }
.dwims-sr-lock-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: bold;
  background: var(--dwims-warn-bg);
  color: var(--dwims-warn-text);
  /* 氏名列（2026-10-10 に2文字分狭めた）に収まらない長さのときは折り返す（はみ出して隣の列に重ねない） */
  white-space: normal;
  max-width: 100%;
}
.dwims-sr-lock-badge.is-mine { background: var(--dwims-ok-bg); color: var(--dwims-ok-text); }
/* 作業時間実績の月ロック（事業所×年月。編集中ロックとは別物。2026-10-10） */
.dwims-sr-month-lock-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: bold;
  background: #e2e8f0;
  color: #2d3748;
  white-space: normal; /* 編集中ロックのバッジと同じく、氏名列に収まらなければ折り返す */
  max-width: 100%;
}
.dwims-sr-month-lock-note {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--dwims-warn-bg);
  color: var(--dwims-warn-text);
  font-size: 13px;
}
.dwims-sr-actions-cell .btn { display: flex; width: 100%; justify-content: center; margin-bottom: 4px; }
.dwims-sr-actions-cell .btn:last-child { margin-bottom: 0; }

/* --- 入力不備チェック（保存前の画面表示値のみを見る確認機能） --- */
.dwims-sr-row-check-issue { background: #fff3cd; }
.dwims-sr-check-issue-chip {
  display: inline-block;
  background: var(--dwims-warn-bg);
  color: var(--dwims-warn-text);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  white-space: nowrap;
  margin: 2px 4px 2px 0;
}

/* ============================================================
   記録出力画面（static/report-output.html）
   ============================================================ */
/* かな絞り込みが5個→10個になった際、1個あたりの幅を詰めて折り返しを抑える
   （2026-09-20仕様変更。「各テキストボックスの長さは、短めにして下さい」）。 */
.dwims-ro-kana { width: 56px; padding: 9px 6px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 14px; }
.dwims-ro-search-hint { align-self: center; }

/* 権限の無いロールが画面を直接開いたとき（DwimsUI.showNoPermission。2026-10-13） */
.dwims-no-permission {
  margin: 16px 0;
  padding: 16px;
  border-radius: 8px;
  background: var(--dwims-warn-bg);
  border: 1px solid var(--dwims-warn-border);
  color: var(--dwims-warn-text);
  text-align: center;
}