/* ============================================================================
   ネオヘルスケア シフト管理 — デザイントークン（2026-09-20 再改訂）

   模写の正は **クリニック自身のサイト** https://neo-healthcare.jp/
   （それ以前は SmartHR を正にしていた。2026-09-20 にユーザーが差し替え）

   値はサイトを実際に開いて計算済みスタイルから拾った実測値。コードはコピーしていない。

   拾った実測値:
     本文色      #333333（黒は使っていない）／補助 #555555
     地          #ffffff
     面（砂色）  #eae8df … カード・見出し帯。このサイトで最も特徴的な色
     面（淡）    #f6f6f2 ／ #eeeeee
     罫線        #c1c1c1
     緑3種       #72ad21（LINE・ロゴの線）／#00802b（Web予約）／#0b5c34（電話）
     濃灰        #434947（フッター帯）
     角丸        ボタン 8px ／ 面は角丸なし
     書体        見出し Zen Old Mincho（明朝）／本文 Zen Kaku Gothic New
                 欧文 Lato ／ ヒラギノ角ゴ W4・W6 も併用
     字間        見出し 1〜4px と広い（0.05〜0.1em 相当）。行間も広い

   この案件への当てはめ:
     1) 主操作は #00802b（Web予約と同じ緑）。白文字とのコントラストは 4.93:1 で AA 達成
     2) 現在地の印は #72ad21（ロゴの線と同じ緑）。細い線・小さい点にだけ使う
        （明るいので文字色には使わない）
     3) 面の区切りは砂色 #eae8df。白いカードを並べない
     4) 危険色はサイトに存在しないため、暗い赤 #a4302a を新たに置く。
        日曜の #cc0000 と明度で差をつけ、必ず文字（未提出・不足）を添える
     5) 曜日3色は現行GASの固定値のまま（祝日 #38761d ＞ 日 #cc0000 ＞ 土 #1155cc）。
        祝日の緑はブランドの緑と近いが、曜日色は日付の列の中にしか出ないため据え置く
     6) 見出しは明朝。ただし小さい文字で明朝を使うと業務画面では読みにくいので、
        **ページ見出し（h1）とカード見出し（h2）だけ明朝**にし、本文・表はゴシックにする
     7) 字間は見出し .06em、本文 .02em。サイトの広い字間の感じを表の外だけで再現する
        （表の中で字間を広げると桁が揃わなくなるため）

   動かせない制約:
     - 全文日本語 / 勤務パターン文字列が長い / 調整グリッドは30名×31日
     - ライト・ダーク両対応（:root → prefers-color-scheme → [data-theme] の3段）
     - スマホのタップ領域は44px以上
   ============================================================================ */

:root{
  /* 面と文字（neo-healthcare.jp の実測値） */
  --bg:#ffffff;
  --surface:#ffffff;
  --sunk:#f6f6f2;       /* 淡い面。hover・グループ行 */
  --head:#eae8df;       /* 砂色。表の見出し・面の区切り */
  --sand:#eae8df;
  --ground:#e6e3d9;     /* ページの地。白い器との差が出る濃さ */
  --ink:#333333;
  --muted:#555555;
  --line:#c1c1c1;
  --line-strong:#a8a8a8;
  --line-soft:#e4e2da;   /* 表の縦罫線。あるとわかる程度に薄く */

  /* 緑3種。サイトのボタン3つからそのまま */
  --accent:#00802b;         /* Web予約の緑。主操作・リンク・見出しの罫 */
  --accent-soft:#e6f2ea;
  --accent-ink:#ffffff;
  --brand:#72ad21;          /* ロゴの線の緑。現在地の印だけに使う（明るいので文字にしない） */
  --brand-dark:#0b5c34;     /* 電話ボタンの濃緑。ヘッダーの文字・強い見出し */

  --action:#00802b;
  --action-soft:#e6f2ea;
  --btn-ink:#ffffff;

  /* 状態色 */
  --ok:#00802b;
  --ok-soft:#e6f2ea;
  --warn:#806600;
  --warn-fill:#ffcc17;
  --warn-soft:#fff6d9;
  --danger:#a4302a;         /* サイトに危険色が無いため新設。日曜の赤より暗くする */
  --danger-soft:#f7e8e7;
  --alert:#b3560a;          /* 超過。不足の赤と読み分けるためのオレンジ */
  --alert-soft:#fcefe2;

  /* 曜日（現行GASの定数をそのまま・優先度固定） */
  --day-hol:#38761d;
  --day-hol-soft:#e7f0e2;
  --day-sun:#cc0000;
  --day-sun-soft:#fbe6e6;
  --day-sat:#1155cc;
  --day-sat-soft:#e4ebfa;
  --day-def:var(--ink);

  /* 書体。クリニックのサイトと同じ3つ */
  --font-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",system-ui,sans-serif;
  --font-serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --font-en:"Lato",var(--font-jp);
  --font-mono:"Lato",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --fs-xs:12px;
  --fs-s:13.7px;
  --fs-m:16px;
  --fs-l:19.2px;
  --fs-xl:24px;
  --lh-tight:1.35;
  --lh-normal:1.75;   /* サイトの広い行間に寄せる */
  --lh-none:1;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* 角丸。サイトはボタン8px・面は角丸なし */
  --radius-s:4px;
  --radius-m:8px;
  --radius-l:8px;
  --radius-full:999px;
  --radius:var(--radius-m);

  --shadow:none;
  --topbar-h:60px;   /* ヘッダーの高さ。表の見出しを固定する基準 */
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#151815;
    --surface:#1c201c;
    --sunk:#232823;
    --head:#2b312b;
    --sand:#2b312b;
    --ground:#101210;
    --ink:#e9e7e0;
    --muted:#a9a79f;
    --line:#3a403a;
    --line-strong:#4e554e;
    --line-soft:#2f352f;

    --accent:#5fc07f;
    --accent-soft:#16301f;
    --accent-ink:#04180c;
    --brand:#9ed45a;
    --brand-dark:#5fc07f;

    --action:#5fc07f;
    --action-soft:#16301f;
    --btn-ink:#04180c;

    --ok:#5fc07f;
    --ok-soft:#16301f;
    --warn:#f0cf6b;
    --warn-fill:#ffcc17;
    --warn-soft:#3a2c08;
    --danger:#e79690;
    --danger-soft:#3a1f1d;
    --alert:#f0a95f;
    --alert-soft:#3a2510;

    --day-hol:#7bc257;
    --day-hol-soft:#1b2a18;
    --day-sun:#ff7a72;
    --day-sun-soft:#301c1a;
    --day-sat:#7fb0f5;
    --day-sat-soft:#18232f;

    --shadow:none;
  }
}
:root[data-theme="dark"]{
  --bg:#151815;
  --surface:#1c201c;
  --sunk:#232823;
  --head:#2b312b;
  --sand:#2b312b;
  --ground:#101210;
  --ink:#e9e7e0;
  --muted:#a9a79f;
  --line:#3a403a;
  --line-strong:#4e554e;
  --line-soft:#2f352f;

  --accent:#5fc07f;
  --accent-soft:#16301f;
  --accent-ink:#04180c;
  --brand:#9ed45a;
  --brand-dark:#5fc07f;

  --action:#5fc07f;
  --action-soft:#16301f;
  --btn-ink:#04180c;

  --ok:#5fc07f;
  --ok-soft:#16301f;
  --warn:#f0cf6b;
  --warn-fill:#ffcc17;
  --warn-soft:#3a2c08;
  --danger:#e79690;
  --danger-soft:#3a1f1d;
  --alert:#f0a95f;
  --alert-soft:#3a2510;

  --day-hol:#7bc257;
  --day-hol-soft:#1b2a18;
  --day-sun:#ff7a72;
  --day-sun-soft:#301c1a;
  --day-sat:#7fb0f5;
  --day-sat-soft:#18232f;

  --shadow:none;
}

/* --------------------------------------------------------------- 基本 */
*{box-sizing:border-box}
html,body{margin:0}
/* html に overflow-x:hidden を付けると position:sticky が効かなくなる。
   ヘッダーが固定されなかった原因（2026-09-21 の指摘 #7）。横はみ出しは
   .gridwrap など各コンテナの中で閉じ込める。 */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-jp);
  font-size:var(--fs-m);
  font-weight:400;
  letter-spacing:.02em; /* サイトの広めの字間に寄せる。表の中では別途0に戻す */
  line-height:var(--lh-normal);
  background:var(--ground);  /* 地。本文は白い器の中に置く */
  /* overflow-x:hidden はスクロール枠を作って position:sticky を殺す。
     clip は枠を作らずにはみ出しだけ切るので、ヘッダー固定と両立する。 */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
button,select,input,textarea{font-family:inherit} /* 和文フォントをフォーム部品にも明示継承 */
.num,.tabular{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* 見出しは明朝。サイトの見出しが明朝で、これがいちばん強いブランドの手掛かり。
   ただし小さい明朝は業務画面で読みにくいので、h1・h2 までに留める */
h1,h2,h3{margin:0;line-height:var(--lh-tight);text-wrap:balance;font-weight:700}
h1,h2{font-family:var(--font-serif);font-weight:500;letter-spacing:.06em}
h3{letter-spacing:.03em}
h1{font-size:var(--fs-l)}
h2{font-size:var(--fs-m)}
h3{font-size:var(--fs-s)}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* --------------------------------------------------------------- 骨格
   模写の正は https://neo-healthcare.jp/
     - 白いヘッダー。ロゴは緑の3本線＋欧文
     - ナビはヘッダーに横並び。現在地は緑の下線（2026-09-21 指摘でサイドナビから戻した）
     - 面の区切りは砂色 #eae8df と細線。カードで囲わない
   照合は docs\参考サイト.md */
.app{min-height:100vh;display:flex;flex-direction:column}

.topbar{
  background:var(--surface);color:var(--ink);
  display:flex;align-items:stretch;gap:var(--sp-5);padding:0 var(--sp-6);height:60px;flex:none;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.topbar .brand{
  font-family:var(--font-en);font-weight:700;font-size:var(--fs-m);letter-spacing:.08em;
  white-space:nowrap;display:flex;align-items:center;
}
.topbar .brand::before{
  content:"";display:inline-block;width:18px;height:12px;flex:none;margin-right:10px;
  background:linear-gradient(var(--brand) 0 2px, transparent 2px 5px,
                             var(--accent) 5px 7px, transparent 7px 10px,
                             var(--brand-dark) 10px 12px);
}
.topbar nav{display:flex;align-items:stretch;gap:0;margin-left:var(--sp-5);overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav button{
  background:none;border:none;cursor:pointer;font:inherit;font-size:var(--fs-s);
  color:var(--muted);padding:0 var(--sp-4);white-space:nowrap;letter-spacing:.04em;
  border-bottom:3px solid transparent;
}
.topbar nav button:hover{color:var(--ink);background:var(--sunk)}
/* 現在地は緑の下線。塗りつぶすと押せるものと見分けがつかなくなる */
.topbar nav button[aria-current="page"]{
  color:var(--ink);font-weight:700;border-bottom-color:var(--accent);
}
.topbar .spacer{flex:1}
.topbar .who{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:var(--sp-2)}
.topbar .who button{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font:inherit;font-size:var(--fs-xs);padding:6px 14px;border-radius:var(--radius-m);
  cursor:pointer;min-height:34px;
}
.topbar .who button:hover{background:var(--sunk)}

/* 本文の器。これが無いと表もヘッダーも画面の端まで伸びる（指摘 #1） */
/* 本文の器。max-width だけだと、画面幅がそれより狭いとき端まで広がって
   器が無いのと同じになる（1440pxのノートPCで実測 左0/右1440）。
   width を「画面幅 − 左右の余白」で決めて、どの幅でも必ず余白を残す。 */
main{
  flex:1;min-width:0;
  width:min(1360px, 100% - var(--sp-12));
  margin:var(--sp-6) auto var(--sp-12);
  background:var(--surface);border:1px solid var(--line);
  padding:var(--sp-6) var(--sp-8) var(--sp-8);
}

/* --------------------------------------------------------------- 見出し */
.pagehead{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.pagehead h1{font-size:clamp(22px,2.4vw,30px);letter-spacing:.08em;line-height:1.3}
.pagehead .sub{color:var(--muted);font-size:var(--fs-xs)}
.pagehead .spacer{margin-left:auto}
.pagehead select{min-height:40px}

/* --------------------------------------------------------------- 面 */
.card{background:transparent;border:none;border-radius:0}
.card + .card{margin-top:var(--sp-10)}
.card-head{
  padding:0 0 var(--sp-3);border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-4);
}
.card-head h2{font-size:var(--fs-l);letter-spacing:.06em}
.card-head .count,.card-head .sub{font-size:var(--fs-xs);color:var(--muted);font-weight:500;font-family:var(--font-jp)}
.card-body{padding:0}

.gridcard{background:var(--surface);border:1px solid var(--line);border-radius:0;overflow:hidden}

button.btn{
  font:inherit;font-weight:700;cursor:pointer;border-radius:var(--radius-m);
  padding:8px var(--sp-4);border:1px solid var(--action);background:var(--action);color:var(--btn-ink);
  min-height:40px;letter-spacing:.04em;
}


button.btn:hover:not(:disabled){filter:brightness(1.07)}
button.btn:active:not(:disabled){transform:translateY(1px)}
button.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
button.btn.ghost:hover:not(:disabled){background:var(--sunk);filter:none}
button.btn:disabled{opacity:.45;cursor:not-allowed}

select,input,textarea{
  font:inherit;font-size:var(--fs-m); /* 16px未満だとiOSが触った瞬間に拡大する */
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-m);
  padding:6px 8px;min-height:40px;
}
textarea{width:100%;resize:vertical}

.pill{
  display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  line-height:var(--lh-none);
  padding:2px var(--sp-2);border-radius:var(--radius-full);white-space:nowrap;
}
/* 状態は色だけで示さない。記号（形）も併用する */
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.ok::before{content:"\2713"}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.warn::before{content:"!"}
.pill.danger{background:var(--danger-soft);color:var(--danger)}
.pill.danger::before{content:"\2715"}
.pill.flat{background:var(--sunk);color:var(--muted)}

/* --------------------------------------------------------------- 表 */
.tablewrap{overflow-x:auto} /* 制約4: 横スクロールはここだけで起こす */
table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--fs-s);letter-spacing:0}
table select,table input{min-height:32px} /* 文字サイズは16pxのまま。高さだけ詰める */
/* 縦罫線を薄く入れる。無いと行を追うときに列を見失う（指摘 #8）。
   揃えは左が既定。数量だけ .n で右に寄せる（指摘 #9・#27） */
th,td{
  padding:var(--sp-2) var(--sp-3);text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line-soft);
}
th:last-child,td:last-child{border-right:none}
thead th{
  background:var(--head);color:var(--ink);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:.08em;position:sticky;top:0;z-index:2;
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 1px 0 var(--line-strong);
}
tbody tr:hover td{background:var(--sunk)}
/* 表は全部左揃え（2026-09-21 の指摘）。数量も右に寄せない。
   桁は等幅数字でそろえる。
   例外は調整グリッドの日付見出しとマスの中身だけ。あれは列の座標なので中央。 */
td.n,th.n{text-align:left;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sticky-l{position:sticky;left:0;background:var(--surface);z-index:1}
tbody tr:hover .sticky-l{background:var(--sunk)}
thead .sticky-l{background:var(--head);z-index:3}

/* 曜日の色（現行GASの優先度: 祝日 > 日 > 土 > 平日）。色だけでなく帯（背景）も併用する */
.d-hol{color:var(--day-hol);font-weight:700}
.d-sun{color:var(--day-sun);font-weight:700}
.d-sat{color:var(--day-sat);font-weight:700}
thead th.d-hol{background:var(--day-hol-soft);box-shadow:inset 0 -2px 0 var(--day-hol)}
thead th.d-sun{background:var(--day-sun-soft);box-shadow:inset 0 -2px 0 var(--day-sun)}
thead th.d-sat{background:var(--day-sat-soft);box-shadow:inset 0 -2px 0 var(--day-sat)}

/* --------------------------------------------------------------- 希望入力（月カレンダー）
   2026-09-21: 31日の縦リストをやめて月カレンダーにした（指摘 #4）。
   PCで560px固定のまま置いていたのが横幅の破綻の原因（指摘 #2）。 */
.kibou{width:100%}

.deadline{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  background:var(--sand);border:1px solid var(--line);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-s);margin-bottom:var(--sp-5);
  position:sticky;top:60px;z-index:8;
}
.deadline.closed{background:var(--sunk);color:var(--muted)}
.deadline .dl-main{font-weight:700;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.deadline .dl-count{color:var(--muted);font-size:var(--fs-xs)}
.deadline .spacer{flex:1}
.deadline .hint{font-size:var(--fs-xs)}

.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line)}
.cal-wd{background:var(--head);text-align:center;font-size:var(--fs-xs);font-weight:700;padding:7px 0}
.cal-wd:first-child{color:var(--day-sun)}
.cal-wd:last-child{color:var(--day-sat)}
.cal-pad{background:var(--sunk);min-height:92px}
.cal-day{
  background:var(--surface);border:none;cursor:pointer;font:inherit;text-align:left;
  min-height:92px;padding:6px 8px;display:flex;flex-direction:column;gap:3px;color:var(--ink);
}
.cal-day:hover{background:var(--sunk)}
.cal-day.open{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-date{font-family:var(--font-mono);font-size:var(--fs-s);font-weight:700;font-variant-numeric:tabular-nums}
.cal-day.d-sun .cal-date{color:var(--day-sun)}
.cal-day.d-sat .cal-date{color:var(--day-sat)}
.cal-day.d-hol .cal-date{color:var(--day-hol)}
.cal-time{font-family:var(--font-mono);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;
  background:var(--accent-soft);color:var(--accent);padding:2px 5px;align-self:flex-start}
.cal-rest{font-size:var(--fs-xs);color:var(--muted)}
.cal-none{font-size:var(--fs-xs);color:var(--warn);background:var(--warn-soft);padding:2px 5px;align-self:flex-start}
.cal-note{font-size:11px;color:var(--muted);line-height:1.4;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* 休診日は一目で分かるようにする（指摘 #20） */
.cal-day.closed{background:repeating-linear-gradient(-45deg,var(--sunk) 0 6px,var(--surface) 6px 12px)}
.cal-closed{font-size:10px;font-weight:700;color:var(--danger);background:var(--danger-soft);
  padding:1px 5px;align-self:flex-start}

/* 開いた日の編集欄。選択肢は畳まない（指摘 #3） */
.dayedit{border:1px solid var(--accent);border-top:3px solid var(--accent);margin-top:var(--sp-4);padding:var(--sp-4);background:var(--surface)}
.dayedit-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.dayedit-head b{font-size:var(--fs-m)}
.dayedit-head .spacer{flex:1}
.dayedit .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:var(--sp-4)}
.dayedit .notefield{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-xs);color:var(--muted);font-weight:700}
.dayedit .daynote{width:100%}

@media (max-width:720px){
  .cal-pad,.cal-day{min-height:76px}
  .cal-day{padding:5px 6px}
  .deadline{top:auto;position:static}
  .dayedit .chips{grid-template-columns:1fr}
}

/* --------------------------------------------------------------- 調整グリッド（縦30名×横31日）
   構造の参考: FullCalendar Resource Timeline（月表示）
     - 表は自前のスクロール枠を持つ。ページ本体は横にも縦にも動かさない
     - 上端の日付見出しと左端の氏名列が、どちらも残る（position:sticky）
     - 日付は列の座標なので中央揃え。数量ではないので右揃えにしない
   合否基準: agents\観点\UX合格基準.md §2 */
.chousei{display:flex;flex-direction:column;gap:var(--sp-3)}

/* 表の上の帯。検索と絞り込みだけを置き、選択肢は畳む。
   ラベル付きの選択肢を横に並べて置きっぱなしにすると、画面が使い方の説明で埋まる。
   SmartHR の FilterDropdown（ボタン→パネル・適用中は印）に合わせる。 */
.tablebar{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-3);position:relative}
.tablebar input[type=search]{min-width:220px;max-width:320px}
.tablebar .spacer{flex:1}
.tablebar .countlabel{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.btn.small{padding:7px 14px;font-size:var(--fs-xs);min-height:40px}

.filterbtn{position:relative}
.filterbtn::after{content:"\25BE";margin-left:6px;font-size:10px}
/* 適用中は印を出す。絞り込まれた表が絞り込まれていないように見えないこと */
.filterbtn.on{border-color:var(--action);color:var(--action);font-weight:700}
.filterbtn.on::before{
  content:"";position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--action);
}

.filterpanel[hidden]{display:none} /* display:flex が [hidden] に勝つので明示する */
.filterpanel{
  background:var(--surface);border:1px solid var(--line-strong);
  padding:var(--sp-4);margin-bottom:var(--sp-4);
  display:flex;gap:var(--sp-5);align-items:flex-end;flex-wrap:wrap;
}
.filterpanel .field{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--muted);font-weight:700}
.filterpanel-foot{margin-left:auto}

/* 絞り込み中の条件。見えない絞り込みは誤読を生むので、外せる形で出す */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.chips:empty{display:none}
.chip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);
  background:var(--sunk);color:var(--ink);border-radius:var(--radius-s);
  padding:5px 10px;font-size:var(--fs-xs);cursor:pointer;min-height:30px;
}
.chip .x{color:var(--muted)}
.chip:hover{border-color:var(--action);color:var(--action)}

.locked{font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--sp-3)}

/* その日の申告。人ごとではなく日ごとに束ねる。
   その日に誰を当てるかを考える画面なので、日付が先に来ないと使えない */
.daynotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;background:var(--line)}
.daynote-group{background:var(--surface);padding:var(--sp-3) var(--sp-4)}
.daynote-head{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:6px}
.daynote-head b{font-family:var(--font-mono);font-size:var(--fs-m);font-variant-numeric:tabular-nums}
.daynote-head .wd{font-size:var(--fs-xs)}
.daynote-head .cnt{margin-left:auto;font-size:11px;color:var(--muted)}
.daynote-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.daynote-group li{display:flex;gap:var(--sp-3);font-size:var(--fs-xs);line-height:1.6}
.daynote-group .who{flex:0 0 7em;font-weight:700}
.daynote-group .what{flex:1;color:var(--muted)}

/* 色の意味は畳んでおく。貼り出すと画面が自分の読み方を解説し始める */
.legend{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-5)}
.legend summary{cursor:pointer;padding:6px 0;min-height:30px;display:flex;align-items:center;width:max-content}
.legend > div{display:flex;gap:var(--sp-5);flex-wrap:wrap;padding:var(--sp-2) 0 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}


/* 表そのものがスクロール枠を持つ。これが無いと thead の position:sticky が効かない
   （ページ側がスクロール主体になり、見出しが流れて何の列か分からなくなる） */
.gridcard{padding:0;overflow:hidden}
.gridwrap{overflow:auto;max-height:calc(100dvh - 170px);min-height:520px}

table.grid{border-collapse:separate;border-spacing:0;width:auto;min-width:100%;font-size:var(--fs-s)}
table.grid th,table.grid td{border-bottom:1px solid var(--line);white-space:nowrap;padding:0}

/* 左端：誰の行かを常に見せる */
table.grid .corner{
  position:sticky;left:0;z-index:2;background:var(--surface);
  text-align:left;padding:6px var(--sp-3);min-width:190px;max-width:190px;
  border-right:1px solid var(--line-strong);
}
table.grid .corner.name{display:flex;align-items:center;gap:8px}
table.grid .empno{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
table.grid .empname{font-weight:600;overflow:hidden;text-overflow:ellipsis}
table.grid .rowflag{
  margin-left:auto;font-size:10px;font-weight:800;line-height:1;padding:3px 5px;border-radius:var(--radius-full);
}
table.grid .rowflag.warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
table.grid .rowflag.open{background:var(--sunk);color:var(--muted);border:1px solid var(--line-strong)}

/* 上端：日付と曜日。日の下に曜日を積み、中央揃えにする */
table.grid thead th{
  position:sticky;top:0;z-index:3;background:var(--head);
  border-bottom:1px solid var(--line-strong);
}
table.grid thead th.corner{z-index:4;background:var(--head);color:var(--muted);font-size:var(--fs-xs);letter-spacing:.06em}
table.grid th.day{
  min-width:50px;width:50px;text-align:center;padding:5px 2px;line-height:1.15;font-weight:700;
}
table.grid th.day b{display:block;font-size:13px;font-variant-numeric:tabular-nums}
table.grid th.day span{display:block;font-size:10px;opacity:.85}
/* その日に申告がある列は見出しに点を出す。下の一覧と対応させる */
table.grid thead th.hasnote b::after{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--accent);vertical-align:3px;margin-left:2px;
}
table.grid thead th.d-hol{background:var(--day-hol-soft);box-shadow:inset 0 -3px 0 var(--day-hol)}
table.grid thead th.d-sun{background:var(--day-sun-soft);box-shadow:inset 0 -3px 0 var(--day-sun)}
table.grid thead th.d-sat{background:var(--day-sat-soft);box-shadow:inset 0 -3px 0 var(--day-sat)}

/* 所属のまとまり。所属は行のグループ見出しとして常に見える */
table.grid .grouprow th.corner{background:var(--sand);z-index:2}
table.grid .grouprow .corner b{font-size:var(--fs-xs);letter-spacing:.04em}
table.grid .grouprow .gcount{margin-left:8px;font-size:10px;color:var(--muted);font-weight:700}
table.grid .grouprow td.groupfill{background:var(--sand)}
/* 部門ごとの日別小計。全体の人数だけでは、どの部門が足りないのか分からない */
table.grid .grouprow td.gsub{
  text-align:center;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:11px;color:var(--muted);font-weight:700;padding:3px 2px;
}

table.grid tbody tr:hover td{background:var(--sunk)}
table.grid tbody tr:hover .corner{background:var(--sunk)}

/* セル：時刻は省略してはいけない値なので、開始と終了を2段に積んで全文字を出す
   （1行に「8:45-17:00」を入れると幅に収まらず "08:4" で切れる。2026-09-19 の指摘） */
td.cell{position:relative;padding:2px;text-align:center}
.cellbtn{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  width:100%;min-height:38px;padding:3px 2px;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-s);background:transparent;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;line-height:1.25;color:var(--ink);
}
.cellbtn .ts,.cellbtn .te{display:block;font-size:11px}
.cellbtn .te{opacity:.75}
.cellbtn .rest{font-size:12px;color:var(--muted);font-family:var(--font-sans)}
.cellbtn.off{background:var(--sunk)}
.cellbtn:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface)}
.cellbtn:focus-visible{outline:2px solid var(--action);outline-offset:-2px}
.cellbtn:disabled{cursor:default;opacity:.85}

/* 希望と違うセル: 帯（背景）＋角の三角形の2重サイン */
td.cell.diff{background:var(--warn-soft)}
td.cell.diff::before{
  content:"";position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;
  border-style:solid;border-width:7px 7px 0 0;border-color:var(--warn) transparent transparent transparent;
}
/* 備考あり: 下の帯＋右上の丸ドットの2重サイン。diff と同時に立っても区別できる */
td.cell.hasnote{box-shadow:inset 0 -3px 0 var(--action)}
td.cell.hasnote::after{
  content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--action);pointer-events:none;
}

/* 出勤人数の行は最下部に残す */
table.grid tfoot td,table.grid tfoot th{
  position:sticky;bottom:0;z-index:3;background:var(--sunk);
  font-weight:700;border-top:2px solid var(--line-strong);
  text-align:center;font-family:var(--font-mono);font-variant-numeric:tabular-nums;padding:6px 2px;
}
table.grid tfoot th.corner{z-index:4}
/* 常駐人数との差。不足＝赤▼／超過＝オレンジ▲（2026-09-22）。
   所属ごとの小計にも同じ色を出す。合計だけ色が付いても、どの所属が原因か分からない */
table.grid tfoot td.short,
table.grid .grouprow td.gsub.short{
  background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger);
}
table.grid tfoot td.short::before,
table.grid .grouprow td.gsub.short::before{
  content:"\25BC";font-size:8px;margin-right:3px;vertical-align:1px;
}
table.grid tfoot td.over,
table.grid .grouprow td.gsub.over{
  background:var(--alert-soft);color:var(--alert);box-shadow:inset 0 0 0 1px var(--alert);
}
table.grid tfoot td.over::before,
table.grid .grouprow td.gsub.over::before{
  content:"\25B2";font-size:8px;margin-right:3px;vertical-align:1px;
}

/* セルの選択肢。select は選択肢の全文が読めないので、一覧を出して全文を見せる */
.cellmenu{
  position:absolute;z-index:80;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-l);box-shadow:0 8px 28px rgba(0,0,0,.18);padding:4px;
  display:flex;flex-direction:column;gap:2px;max-height:min(70vh,420px);overflow:auto;
}
.cellmenu-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-s);
  padding:7px 10px;cursor:pointer;text-align:left;min-width:220px;min-height:44px;justify-content:center;
}
.cellmenu-item b{font-size:var(--fs-s);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.cellmenu-item small{font-size:var(--fs-xs);color:var(--muted)}
.cellmenu-item:hover{background:var(--sunk)}
.cellmenu-item.on{background:var(--action-soft);border-color:var(--action)}
.cellmenu-item:focus-visible{outline:2px solid var(--action);outline-offset:-2px}

/* 印刷は画面をそのまま刷るのではなく、components.css の .report（帳票）を出す。
   ここでは画面側を隠すだけにする。 */

/* 狭い画面。グリッドは横スクロールで見るが、氏名と日付は残す */
@media (max-width:720px){
  .tablebar input[type=search]{min-width:0;flex:1 1 100%;max-width:none}
  .filterpanel{padding:var(--sp-3);gap:var(--sp-3)}
  .filterpanel .field{flex:1 1 100%}
  .filterpanel-foot{margin-left:0;width:100%}
  table.grid .corner{min-width:152px;max-width:152px;padding:6px 8px}
  table.grid .empname{font-size:var(--fs-xs)}
  .gridwrap{max-height:calc(100dvh - 260px)}
}

/* --------------------------------------------------------------- ログイン */
.login{max-width:340px;margin:12vh auto 0}
.login .card-body{display:flex;flex-direction:column;gap:var(--sp-3)}
.login label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--muted)}
.login input{font-size:15px}
.msg{font-size:var(--fs-xs);color:var(--danger)}
.hint{font-size:var(--fs-xs);color:var(--muted)}

/* --------------------------------------------------------------- 開発バナー */
.devbar{
  background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--warn);
  font-size:var(--fs-xs);font-weight:700;padding:5px var(--sp-5);text-align:center;
}
.empty{padding:48px 16px;text-align:center;color:var(--muted);font-size:var(--fs-s)}