/* ==========================================================================
   むすぼな UI キット  v0.1
   --------------------------------------------------------------------------
   むすぼなの全アプリで見た目を揃えるための1枚。

   使い方：HTML の <head> に1行足すだけ。
     <link rel="stylesheet" href="https://.../musubona-ui.css">

   これだけで、ボタン・入力欄・表・カードの見た目が揃います。
   デザインの知識は要りません。class を付けるだけです。

   設計の前提（ふつうのWebアプリと違うところ）：
     - 現場の職員がスマホ・タブレットで、移動中や訪問先で使う
     - 手袋をしたまま、片手で、明るい屋外で操作することがある
     - だから 文字は大きめ、押すところは広め、コントラストは強め にしている
     - 日本語の行間を広めに取っている（1.8）

   色：会社の緑 #008350 を基調。明るい場所でも暗い場所でも読める組み合わせ。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン（色・文字・余白の定義）
   ここを変えれば全アプリの見た目が一度に変わる。個別アプリで色を直接書かない。
   -------------------------------------------------------------------------- */
:root {
  /* ブランド */
  --ms-green:        #008350;  /* 会社の緑 */
  --ms-green-strong: #00693F;  /* 押したとき・濃い方 */
  --ms-green-soft:   #E9F3EE;  /* 薄い面 */
  --ms-green-faint:  #F4F9F6;  /* いちばん薄い面 */

  /* 文字と面 */
  --ms-text:         #1B2A24;  /* 本文 */
  --ms-text-sub:     #52625B;  /* 補足・ラベル */
  --ms-text-faint:   #7A8781;  /* placeholder */
  --ms-bg:           #FFFFFF;  /* 背景 */
  --ms-surface:      #FFFFFF;  /* カードの面 */
  --ms-surface-alt:  #F7F9F8;  /* 表の縞・入力欄の面 */
  --ms-border:       #D4DCD8;  /* 枠線 */
  --ms-border-strong:#A9B6B0;

  /* 状態（介護記録でよく使う4つ） */
  --ms-ok:      #1F7A44;  --ms-ok-bg:      #E7F4EC;  /* 完了・正常 */
  --ms-warn:    #9A6400;  --ms-warn-bg:    #FDF3DF;  /* 注意・未対応 */
  --ms-danger:  #B3261E;  --ms-danger-bg:  #FCEBEA;  /* 遅延・異常 */
  --ms-info:    #1B5E8C;  --ms-info-bg:    #E8F1F8;  /* お知らせ */

  /* 文字 */
  --ms-font: "Meiryo", "メイリオ", "Yu Gothic", "游ゴシック体",
             "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --ms-size-base: 17px;   /* ふつうのWebより1〜2px大きい。現場で読むため */
  --ms-size-sm:   15px;
  --ms-size-lg:   20px;
  --ms-size-xl:   26px;
  --ms-line:      1.8;    /* 日本語は行間を広めに */

  /* 余白（4の倍数で揃える） */
  --ms-sp-1: 4px;  --ms-sp-2: 8px;  --ms-sp-3: 12px;
  --ms-sp-4: 16px; --ms-sp-5: 24px; --ms-sp-6: 32px; --ms-sp-7: 48px;

  /* 形 */
  --ms-radius:    10px;
  --ms-radius-sm: 6px;
  --ms-shadow:    0 1px 2px rgba(27,42,36,.06), 0 4px 12px rgba(27,42,36,.08);

  /* 押すところの最小の大きさ。指で押す前提なので 48px を下回らせない */
  --ms-tap: 48px;
}

/* 暗い場所・夜勤での利用。端末の設定に自動で従う */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ms-green:        #4FBF8B;
    --ms-green-strong: #6FD3A3;
    --ms-green-soft:   #173026;
    --ms-green-faint:  #12241D;
    --ms-text:         #E8EFEB;
    --ms-text-sub:     #A9BAB2;
    --ms-text-faint:   #7B8D85;
    --ms-bg:           #0E1714;
    --ms-surface:      #16211D;
    --ms-surface-alt:  #1D2A25;
    --ms-border:       #2C3C36;
    --ms-border-strong:#43564E;
    --ms-ok:     #62C98B; --ms-ok-bg:     #152A1F;
    --ms-warn:   #D9A441; --ms-warn-bg:   #2C2313;
    --ms-danger: #E97A72; --ms-danger-bg: #2E1917;
    --ms-info:   #6FB0DC; --ms-info-bg:   #14242E;
    --ms-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --ms-green:#4FBF8B; --ms-green-strong:#6FD3A3; --ms-green-soft:#173026; --ms-green-faint:#12241D;
  --ms-text:#E8EFEB; --ms-text-sub:#A9BAB2; --ms-text-faint:#7B8D85;
  --ms-bg:#0E1714; --ms-surface:#16211D; --ms-surface-alt:#1D2A25;
  --ms-border:#2C3C36; --ms-border-strong:#43564E;
  --ms-ok:#62C98B; --ms-ok-bg:#152A1F; --ms-warn:#D9A441; --ms-warn-bg:#2C2313;
  --ms-danger:#E97A72; --ms-danger-bg:#2E1917; --ms-info:#6FB0DC; --ms-info-bg:#14242E;
  --ms-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
}

/* --------------------------------------------------------------------------
   2. 土台
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ms-font);
  font-size: var(--ms-size-base);
  line-height: var(--ms-line);
  color: var(--ms-text);
  background: var(--ms-bg);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { line-height: 1.5; margin: 0 0 var(--ms-sp-3); font-weight: 700; }
h1 { font-size: var(--ms-size-xl); }
h2 { font-size: var(--ms-size-lg); padding-bottom: var(--ms-sp-2);
     border-bottom: 2px solid var(--ms-green); }
h3 { font-size: var(--ms-size-base); color: var(--ms-text-sub); }
p  { margin: 0 0 var(--ms-sp-4); }
a  { color: var(--ms-green); text-underline-offset: 3px; }

/* キーボード操作・音声操作の人が、いまどこにいるか分かるように。
   屋外でも見えるよう、細い線にしない */
:focus-visible {
  outline: 3px solid var(--ms-green);
  outline-offset: 2px;
  border-radius: var(--ms-radius-sm);
}

/* --------------------------------------------------------------------------
   3. 型（ページの骨組み）
   -------------------------------------------------------------------------- */
.ms-app     { min-height: 100vh; display: flex; flex-direction: column; }
.ms-main    { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto;
              padding: var(--ms-sp-5) var(--ms-sp-4); }
.ms-stack   { display: flex; flex-direction: column; gap: var(--ms-sp-4); }
.ms-row     { display: flex; flex-wrap: wrap; gap: var(--ms-sp-3); align-items: center; }
.ms-grid    { display: grid; gap: var(--ms-sp-4);
              grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ms-spacer  { flex: 1; }

/* 見出しの帯 */
.ms-header {
  background: var(--ms-green); color: #fff;
  padding: var(--ms-sp-4);
  display: flex; align-items: center; gap: var(--ms-sp-3);
}
.ms-header__title { font-size: var(--ms-size-lg); font-weight: 700; margin: 0; }
.ms-header__sub   { font-size: var(--ms-size-sm); opacity: .9; }
.ms-header a      { color: #fff; }

/* --------------------------------------------------------------------------
   4. ボタン
   指で押す前提。高さ48px以上、文字は小さくしない
   -------------------------------------------------------------------------- */
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-sp-2);
  min-height: var(--ms-tap); padding: 0 var(--ms-sp-5);
  font-family: inherit; font-size: var(--ms-size-base); font-weight: 700;
  color: #fff; background: var(--ms-green);
  border: 2px solid var(--ms-green); border-radius: var(--ms-radius);
  cursor: pointer; text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.ms-btn:hover  { background: var(--ms-green-strong); border-color: var(--ms-green-strong); }
.ms-btn:active { transform: translateY(1px); }
.ms-btn:disabled, .ms-btn[aria-disabled="true"] {
  background: var(--ms-border); border-color: var(--ms-border);
  color: var(--ms-text-faint); cursor: not-allowed; transform: none;
}

/* 2番手のボタン（枠線だけ） */
.ms-btn--sub {
  background: transparent; color: var(--ms-green); border-color: var(--ms-green);
}
.ms-btn--sub:hover { background: var(--ms-green-soft); }

/* 文字だけのボタン */
.ms-btn--text {
  background: transparent; color: var(--ms-green); border-color: transparent;
  padding: 0 var(--ms-sp-3);
}
.ms-btn--text:hover { background: var(--ms-green-soft); border-color: transparent; }

/* 消す・取り消すなど、戻せない操作 */
.ms-btn--danger {
  background: var(--ms-danger); border-color: var(--ms-danger);
}
.ms-btn--danger:hover { filter: brightness(.92); }

/* 大きいボタン（現場の主操作。記録する・保存する など） */
.ms-btn--lg { min-height: 60px; font-size: var(--ms-size-lg); padding: 0 var(--ms-sp-6); }
.ms-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   5. 入力
   -------------------------------------------------------------------------- */
.ms-field { display: flex; flex-direction: column; gap: var(--ms-sp-2); }
.ms-label { font-size: var(--ms-size-sm); font-weight: 700; color: var(--ms-text-sub); }
.ms-label--required::after { content: " 必須"; color: var(--ms-danger); font-size: 13px; }
.ms-help  { font-size: var(--ms-size-sm); color: var(--ms-text-sub); }
.ms-error { font-size: var(--ms-size-sm); color: var(--ms-danger); font-weight: 700; }

.ms-input, .ms-select, .ms-textarea {
  width: 100%; min-height: var(--ms-tap);
  padding: var(--ms-sp-3);
  font-family: inherit; font-size: var(--ms-size-base); line-height: 1.6;
  color: var(--ms-text); background: var(--ms-surface-alt);
  border: 2px solid var(--ms-border); border-radius: var(--ms-radius);
}
.ms-textarea { min-height: 120px; resize: vertical; }
.ms-input::placeholder, .ms-textarea::placeholder { color: var(--ms-text-faint); }
.ms-input:focus, .ms-select:focus, .ms-textarea:focus {
  border-color: var(--ms-green); background: var(--ms-bg); outline: none;
}
.ms-input[aria-invalid="true"] { border-color: var(--ms-danger); }

/* チェック・ラジオも指で押せる大きさにする */
.ms-check {
  display: flex; align-items: center; gap: var(--ms-sp-3);
  min-height: var(--ms-tap); cursor: pointer;
}
.ms-check input { width: 24px; height: 24px; accent-color: var(--ms-green); flex: none; }

/* --------------------------------------------------------------------------
   6. カード
   -------------------------------------------------------------------------- */
.ms-card {
  background: var(--ms-surface); border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius); box-shadow: var(--ms-shadow);
  padding: var(--ms-sp-5);
}
.ms-card__title { font-size: var(--ms-size-lg); font-weight: 700; margin: 0 0 var(--ms-sp-3); }
.ms-card--flat  { box-shadow: none; }

/* 数字を大きく見せる（利用者数・件数など） */
.ms-stat        { display: flex; flex-direction: column; gap: var(--ms-sp-1); }
.ms-stat__label { font-size: var(--ms-size-sm); color: var(--ms-text-sub); }
.ms-stat__value { font-size: 34px; font-weight: 700; line-height: 1.2;
                  font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. 表
   スマホでは横スクロールさせる（文字を小さくして詰め込まない）
   -------------------------------------------------------------------------- */
.ms-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
                 border: 1px solid var(--ms-border); border-radius: var(--ms-radius); }
.ms-table { width: 100%; border-collapse: collapse; font-size: var(--ms-size-base); }
.ms-table th, .ms-table td {
  padding: var(--ms-sp-3) var(--ms-sp-4); text-align: left;
  border-bottom: 1px solid var(--ms-border); white-space: nowrap;
}
.ms-table th {
  background: var(--ms-green-soft); color: var(--ms-text);
  font-weight: 700; font-size: var(--ms-size-sm);
  position: sticky; top: 0; z-index: 1;
}
.ms-table tbody tr:nth-child(even) { background: var(--ms-surface-alt); }
.ms-table tbody tr:hover           { background: var(--ms-green-faint); }
.ms-table td.ms-num { text-align: right; font-variant-numeric: tabular-nums; }
.ms-table--wrap th, .ms-table--wrap td { white-space: normal; }

/* --------------------------------------------------------------------------
   8. 状態の表示（未対応・処理中・遅延・完了）
   -------------------------------------------------------------------------- */
.ms-badge {
  display: inline-flex; align-items: center; gap: var(--ms-sp-1);
  padding: 2px var(--ms-sp-3); border-radius: 999px;
  font-size: var(--ms-size-sm); font-weight: 700; white-space: nowrap;
  background: var(--ms-surface-alt); color: var(--ms-text-sub);
  border: 1px solid var(--ms-border);
}
.ms-badge--ok     { background: var(--ms-ok-bg);     color: var(--ms-ok);     border-color: transparent; }
.ms-badge--warn   { background: var(--ms-warn-bg);   color: var(--ms-warn);   border-color: transparent; }
.ms-badge--danger { background: var(--ms-danger-bg); color: var(--ms-danger); border-color: transparent; }
.ms-badge--info   { background: var(--ms-info-bg);   color: var(--ms-info);   border-color: transparent; }

/* お知らせ・注意書き */
.ms-alert {
  display: flex; gap: var(--ms-sp-3);
  padding: var(--ms-sp-4); border-radius: var(--ms-radius);
  border-left: 5px solid var(--ms-info);
  background: var(--ms-info-bg); color: var(--ms-text);
}
.ms-alert--ok     { border-left-color: var(--ms-ok);     background: var(--ms-ok-bg); }
.ms-alert--warn   { border-left-color: var(--ms-warn);   background: var(--ms-warn-bg); }
.ms-alert--danger { border-left-color: var(--ms-danger); background: var(--ms-danger-bg); }
.ms-alert__title  { font-weight: 700; margin: 0 0 var(--ms-sp-1); }

/* --------------------------------------------------------------------------
   9. タブ
   -------------------------------------------------------------------------- */
.ms-tabs { display: flex; gap: var(--ms-sp-1); border-bottom: 2px solid var(--ms-border);
           overflow-x: auto; }
.ms-tab {
  min-height: var(--ms-tap); padding: 0 var(--ms-sp-4);
  display: inline-flex; align-items: center;
  font-family: inherit; font-size: var(--ms-size-base); font-weight: 700;
  color: var(--ms-text-sub); background: none; border: none; cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap;
}
.ms-tab[aria-selected="true"] { color: var(--ms-green); border-bottom-color: var(--ms-green); }

/* --------------------------------------------------------------------------
   10. 読み込み中・空のとき
   -------------------------------------------------------------------------- */
.ms-empty {
  padding: var(--ms-sp-7) var(--ms-sp-4); text-align: center;
  color: var(--ms-text-sub); background: var(--ms-surface-alt);
  border: 1px dashed var(--ms-border); border-radius: var(--ms-radius);
}
.ms-skeleton {
  height: 1em; border-radius: var(--ms-radius-sm);
  background: linear-gradient(90deg, var(--ms-surface-alt) 25%, var(--ms-border) 37%, var(--ms-surface-alt) 63%);
  background-size: 400% 100%; animation: ms-shimmer 1.4s ease infinite;
}
@keyframes ms-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 動きが苦手な方・酔いやすい方のために、端末の設定に従う */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   11. スマホ（現場でいちばん使われる画面幅）
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --ms-size-base: 17px; --ms-size-lg: 19px; --ms-size-xl: 23px; }
  .ms-main { padding: var(--ms-sp-4) var(--ms-sp-4); }
  .ms-card { padding: var(--ms-sp-4); }
  /* 主操作のボタンは、スマホでは横幅いっぱいにする */
  .ms-btn--lg { width: 100%; }
  .ms-row--stack-sp { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   12. レスポンシブの共通部分（全アプリ。2026-10-02 香取「すべてレスポンシブデザインで」）
   iPhone SE（375px）で、文字が切れない・横にはみ出さない・指で押せる、を基準にする。
   各アプリの画面ごとの崩れは scripts/responsive-audit.mjs で測る（横はみ出し0・狭い入力欄0が合格）。
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }
body { overflow-wrap: anywhere; }
.ms-table-wrap, .table-wrap, .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 768px) {
  /* iOS は 16px 未満の入力欄を押すと画面を拡大してしまう */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px; max-width: 100%; }
  button, .ms-btn, [role=button] { min-height: 44px; }
  .ms-header, .ms-main { min-width: 0; }
  .ms-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .ms-main { padding-left: 12px; padding-right: 12px; }
  .ms-card { padding: 12px; }
}

/* 印刷（計画書・同意書を紙で出すことがある） */
@media print {
  .ms-header, .ms-btn, .ms-tabs { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .ms-card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   12. 補助
   -------------------------------------------------------------------------- */
.ms-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ms-text-sub   { color: var(--ms-text-sub); }
.ms-text-sm    { font-size: var(--ms-size-sm); }
.ms-text-right { text-align: right; }
.ms-num        { font-variant-numeric: tabular-nums; }
.ms-mt-4 { margin-top: var(--ms-sp-4); }
.ms-mb-4 { margin-bottom: var(--ms-sp-4); }

/* ------------------------------------------------------------------
   印刷用（ms-print / ms-sheet）
   計画書・介護経過記録・事故報告書・請求書・領収書は、サーバーが返す HTML に
   このキットを読み込ませて使う。画面で見るときも紙に出すときも同じ見た目にする。
------------------------------------------------------------------ */
.ms-sheet        { max-width: 190mm; margin: 0 auto var(--ms-sp-6); padding: var(--ms-sp-4); background: var(--ms-bg-card, #fff); }
.ms-sheet__title { font-size: 1.25rem; font-weight: 700; text-align: center; margin: 0 0 var(--ms-sp-3); }
.ms-sheet__sub   { font-size: var(--ms-size-sm); color: var(--ms-text-sub); text-align: right; margin: 0 0 var(--ms-sp-2); }
.ms-print        { width: 100%; border-collapse: collapse; font-size: var(--ms-size-sm); line-height: 1.6; }
.ms-print th,
.ms-print td     { border: 1px solid var(--ms-border); padding: 6px 8px; vertical-align: top; text-align: left; }
.ms-print th     { background: var(--ms-bg-sub); font-weight: 600; white-space: nowrap; }
.ms-print td.ms-num,
.ms-print th.ms-num { text-align: right; font-variant-numeric: tabular-nums; }
.ms-print caption   { caption-side: top; text-align: left; font-weight: 600; padding-bottom: 4px; }
.ms-sign         { margin-top: var(--ms-sp-5); display: flex; gap: var(--ms-sp-5); flex-wrap: wrap; }
.ms-sign__line   { flex: 1 1 220px; border-bottom: 1px solid var(--ms-text); padding-bottom: 2px; min-height: 2.4em; }
.ms-sign__label  { font-size: var(--ms-size-sm); color: var(--ms-text-sub); }

@media print {
  .ms-no-print, .ms-header, .ms-tabs, .ms-btn { display: none !important; }
  .ms-sheet { max-width: none; margin: 0; padding: 0; page-break-after: always; }
  .ms-sheet:last-child { page-break-after: auto; }
  .ms-print { font-size: 10.5pt; }
  body { background: #fff; }
}