/* 事務所スケジュール表 — 業務日報アプリと同じ配色・同じ操作感で揃えている */
:root{
  --blue:#1f5fa6; --blue-d:#174a82; --line:#cfd6de; --bg:#eef1f5;
  --ok:#1c7c3c; --okbg:#e6f5ea; --err:#b5302b; --errbg:#fbe8e7;
  --warn:#9a6a00; --warnbg:#fdf3da; --th:#e8eef6; --hover:#f3f7fc;
  --today:#c0392b;
}
*{box-sizing:border-box}
/* hidden 属性を必ず効かせる。
   ブラウザ内蔵の [hidden]{display:none} より、こちらで書いた
   .btn{display:inline-block} などの方が強いため、JavaScript で
   el.hidden = true にしても消えない、という取りこぼしが起きる。 */
[hidden]{display:none !important}
html{height:100%}
body{margin:0;font-family:"Meiryo","Yu Gothic",sans-serif;background:var(--bg);color:#222;font-size:14px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- 上部バー（日報アプリと同じ） ---------- */
.topbar{display:flex;align-items:center;gap:16px;background:var(--blue);color:#fff;padding:4px 16px;min-height:48px;flex-wrap:wrap}
.topbar a{color:#fff}
/* アプリの名前は「ただの見出し」。押せるものと区別が付くよう、
   枠も下線も付けず、右に細い仕切りを1本引いてメニューと切り離す。 */
.brand{font-weight:bold;font-size:16px;letter-spacing:.02em;cursor:default;
  padding-right:14px;border-right:1px solid rgba(255,255,255,.35);
  align-self:center;line-height:1.2}
.mainnav{display:flex;gap:5px;flex:1;flex-wrap:wrap;align-items:center}
.navgroup{position:relative}
/* メニューは「押せるもの」なので、うっすら枠を付けてボタンの形に見せる */
.navtop{display:inline-block;color:#fff;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.32);font:inherit;
  padding:5px 10px;border-radius:5px;cursor:pointer;white-space:nowrap}
.navtop:hover{background:rgba(255,255,255,.26);border-color:#fff;text-decoration:none}
.navtop:focus-visible{outline:2px solid #fff;outline-offset:1px}
.navtop.here{background:#fff;color:var(--blue);border-color:#fff;font-weight:bold}
.navgroup.open>.navtop{background:rgba(255,255,255,.26);border-color:#fff}
.caret{font-size:10px;margin-left:5px;opacity:.85}
.navdrop{display:none;position:absolute;top:100%;left:0;z-index:120;margin-top:4px;
  min-width:250px;max-width:320px;background:#fff;border:1px solid var(--line);
  border-radius:7px;box-shadow:0 6px 20px rgba(0,0,0,.18);padding:5px;color:#222;font-size:13px}
.navgroup.open .navdrop{display:block}
.navitem{display:block;padding:7px 10px;border-radius:5px;color:#222 !important}
.navitem:hover{background:var(--hover);text-decoration:none}
.navitem.here{background:#e8eef6}
.navitem .t{display:block;font-weight:bold;color:var(--blue)}
.navitem .d{display:block;color:#777;font-size:11px;margin-top:1px;line-height:1.4}
.userbox{display:flex;align-items:center;gap:12px;font-size:13px}
.badge{background:#fff;color:var(--blue);border-radius:3px;padding:0 5px;font-size:11px;font-weight:bold}
.badge2{background:var(--okbg);color:var(--ok);border:1px solid #b6e0c2;border-radius:3px;
  padding:0 6px;font-size:11px;font-weight:bold}

.content{max-width:1600px;margin:16px auto;padding:0 16px}
h1{font-size:20px;margin:0 0 14px}
h2{font-size:16px;margin:0 0 8px;border-left:4px solid var(--blue);padding-left:8px}
h3{font-size:14px;margin:16px 0 6px}

.flash-area{margin-bottom:12px}
.flash{padding:8px 12px;border-radius:5px;margin-bottom:6px}
.flash.ok{background:var(--okbg);color:var(--ok);border:1px solid #b6e0c2}
.flash.error{background:var(--errbg);color:var(--err);border:1px solid #efc3c0}
.flash.warn{background:var(--warnbg);color:var(--warn);border:1px solid #eddcb0}

.card{background:#fff;border:1px solid var(--line);border-radius:7px;padding:16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}

.btn{display:inline-block;background:var(--blue);color:#fff;border:none;border-radius:5px;padding:7px 14px;cursor:pointer;font-size:14px;font-family:inherit}
.btn:hover{background:var(--blue-d);text-decoration:none;color:#fff}
.btn.secondary{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.btn.secondary:hover{background:var(--hover)}
.btn.danger{background:var(--err)}
.btn.danger:hover{background:#94231f}
.btn.small{padding:3px 9px;font-size:12px}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--hover)}

input,select,textarea{font-family:inherit;font-size:14px;padding:5px 7px;border:1px solid var(--line);border-radius:4px;background:#fff;color:#222}
input:focus,select:focus,textarea:focus{outline:2px solid #bcd4f0;border-color:var(--blue)}

.muted{color:#888}.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}
.grow{flex:1}
.err{color:var(--err)}
.ok{color:var(--ok)}
.warn{color:var(--warn)}
.help{font-size:12px;color:#777;margin:6px 0 0;line-height:1.7}
kbd{display:inline-block;padding:1px 6px;margin:0 1px;border:1px solid #c3ccd6;
  border-bottom-width:2px;border-radius:4px;background:#f7f9fb;color:#333;font-size:11px}
code{background:#f4f6f8;border:1px solid #e2e7ec;border-radius:3px;padding:0 4px;font-size:12px}
.pill{display:inline-block;padding:1px 8px;border-radius:11px;font-size:11px}
.pill.done{background:var(--okbg);color:var(--ok)}
.pill.todo{background:#eee;color:#666}

/* ---------- 一般の表 ---------- */
table{border-collapse:collapse;width:100%;background:#fff}
th,td{border:1px solid var(--line);padding:5px 8px;text-align:left}
th{background:var(--th);font-weight:bold}
td.num,th.num{text-align:right}
table.kv{width:auto}
table.kv th{white-space:nowrap}
.rowoff td{background:#f7f7f7;color:#888}
.pathlist{font-size:12px;color:#555;line-height:1.9}
.inline-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.inline-form label{display:flex;gap:5px;align-items:center;font-size:13px}
.grid-actions{display:flex;gap:12px;align-items:center;margin:12px 0 0;flex-wrap:wrap}
.field{margin-bottom:12px}
.field label{display:block;margin-bottom:4px;font-weight:bold;font-size:13px}
.chk{display:inline-flex;gap:5px;align-items:center;font-weight:normal !important;margin-bottom:0 !important}

/* ---------- 自分の設定（選択肢を大きく並べる。スマホで押しやすいように） ---------- */
.pickrows{display:flex;flex-direction:column;gap:8px}
.pickrow{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center;
  border:1px solid var(--line);border-radius:7px;padding:10px 12px;cursor:pointer;
  background:#fff;font-weight:normal}
.pickrow:hover{background:var(--hover)}
.pickrow.on{border-color:var(--blue);background:#f3f7fc;box-shadow:inset 0 0 0 1px var(--blue)}
.pickrow input{grid-row:1 / span 3;margin:0;width:18px;height:18px}
.pickrow .t{font-weight:bold;font-size:15px}
.pickrow .d{color:var(--blue);font-size:12px}
.pickrow .n{color:#777;font-size:12px}

/* ---------- ログイン ---------- */
.login-wrap{max-width:400px;margin:56px auto}
.login-wrap.wide{max-width:560px;margin:28px auto}
.login-wrap .card{padding:24px}
.login-wrap .field input,.login-wrap .field select{width:100%}

/* ============================================================
   週間ボードのページ：画面いっぱいに表を出す
   上部バーと操作バーの下、残り全部をボードが使う。
   ============================================================ */
body.boardpage{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.boardpage .content{max-width:none;width:100%;margin:0 auto;padding:10px 12px 10px;
  flex:1;display:flex;flex-direction:column;min-height:0}
body.boardpage .board-wrap{flex:1;min-height:0;max-height:none}
body.boardpage .flash-area{margin-bottom:8px}

/* ---------- 操作バー ---------- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.toolbar .cur{font-size:17px;font-weight:bold;margin:0 6px}
.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.handy{display:contents}
.viewtoggle{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fff}
.viewtoggle a{padding:5px 14px;color:var(--blue)}
.viewtoggle a:hover{background:var(--hover);text-decoration:none}
.viewtoggle a.on{background:var(--blue);color:#fff}


/* ---------- 週間ボード本体 ---------- */
.board-wrap{overflow:auto;max-height:calc(100vh - 250px);border:1px solid var(--line);
  border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);
  overscroll-behavior-y:contain}
table.board{border-collapse:separate;border-spacing:0;width:100%;background:#fff}
table.board th,table.board td{border:0;border-right:1px solid #e4e9ee;border-bottom:1px solid #e4e9ee;
  padding:4px 6px;vertical-align:top}

/* 見出し行（日付）を固定 */
table.board thead th{position:sticky;top:0;z-index:30;background:var(--th);
  text-align:center;white-space:nowrap;border-bottom:1px solid var(--line);line-height:1.5}
table.board thead th.today{box-shadow:inset 0 -3px 0 var(--today)}
.dmd{font-size:14px;font-weight:bold}
.dwd{font-size:12px;margin-left:2px}
.dnote{display:block;font-size:10px;font-weight:normal;color:#8a6d1f}
thead th.sat .dwd{color:#1f5fa6}
thead th.sun .dwd{color:var(--err)}

/* メンバー名の列を固定 */
table.board th.whocol{position:sticky;left:0;z-index:20;background:#fff;text-align:left;
  min-width:124px;width:124px;white-space:nowrap;border-right:1px solid var(--line);font-size:13px}
table.board thead th.whocol{z-index:40;background:var(--th)}
th.whocol .code{display:block;font-size:10px;color:#8a94a0;font-weight:normal}

tr.me th.whocol{box-shadow:inset 4px 0 0 var(--blue)}
tr.me td.cell{background:#f7fafe}

/* 事務所全体の行（懇親会・届出の期限など）。一番上に、ひと目で分かる色で。
   自分の行（青）とも、休日の網掛けとも混ざらない薄い黄色にしている。 */
tr.officerow th.whocol{background:#fff4d6;box-shadow:inset 4px 0 0 #e0a500;color:#6d4c00}
tr.officerow td.cell{background:#fffbea}
tr.officerow td.cell.editable:hover{background:#fff3c4}
tr.officerow th.whocol .code{color:#9a7b2a}
tr.officerow + tr th.whocol,tr.officerow + tr td{border-top:2px solid #e9d9a6}
tr.grouprow td{background:#e8eef6;font-weight:bold;font-size:12px;padding:3px 10px;
  position:sticky;left:0;z-index:10}

td.cell{min-width:150px;height:48px;position:relative}
td.cell.editable{cursor:pointer}
td.cell.editable:hover{background:#eef5ff}
tr.me td.cell.editable:hover{background:#e7f1ff}
.addhint{position:absolute;right:4px;bottom:2px;color:#b6c2cf;font-size:14px;
  opacity:0;pointer-events:none;line-height:1}
td.cell.editable:hover .addhint{opacity:1}

/* 週間ボードも日の列幅をそろえる。
   自動のままだと長い関与先名の日だけ列が伸びて、日ごとに幅がばらばらになる。
   7日を等分し、幅に入らない名前は折り返す（月間ボードと同じ考え方）。 */
table.board.weekview{table-layout:fixed;width:100%;min-width:1170px}
table.board.weekview thead th.whocol{width:124px}
table.board.weekview td.cell{min-width:0}
table.board.weekview .chip .m{white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden}

/* 日別ビューは1日ぶんなので、その日の欄を画面幅いっぱいに広げる */
table.board.dayview{table-layout:fixed}
table.board.dayview th.whocol{width:130px;min-width:130px}
table.board.dayview td.cell{min-width:0;width:auto}

/* ---------- 月間ボード（全員×1ヶ月） ----------
   31日ぶん並ぶので1日の幅は狭い。関与先名だけを小さく出し、
   時刻・件名・人数はマウスを乗せたとき（title）とクリックで見せる。

   table-layout:fixed が要（かなめ）。これが無いと「㈱MHIエアロスペース
   プロダクション」のような長い関与先名がその日の列を押し広げてしまい、
   日ごとに列幅がばらばらになる。固定にして、長い名前は折り返させる。
   幅は画面いっぱい（width:100%）に31日を等分するので、広い画面なら
   1ヶ月が一望できる。狭い画面で潰れないよう min-width で下限を決め、
   足りないぶんは横スクロールにする。 */
table.board.monthview{table-layout:fixed;width:auto;min-width:1750px}
table.board.monthview td.cell{min-width:0;width:66px;height:auto;padding:2px 2px}
table.board.monthview thead th{padding:2px 1px;font-size:11px;width:66px}
table.board.monthview thead th.whocol{width:124px}
table.board.monthview .dmd{font-size:12px}
table.board.monthview .dwd{display:block;margin:0;font-size:10px;font-weight:normal}
table.board.monthview tbody th.whocol{font-size:12px;padding:3px 6px}
table.board.monthview th.whocol .code{display:inline;margin-left:5px}
.chip.mini{margin:0 0 2px;padding:1px 3px 1px 4px;border-left:3px solid var(--c,#8a8f96);
  border-radius:2px;background:#f6f7f8;
  background:color-mix(in srgb, var(--c,#8a8f96) 16%, #fff);line-height:1.35}
.chip.mini .t,.chip.mini .s,.chip.mini .n{display:none}
/* 名前は折り返すが2行まで。それ以上は「…」で切って行の高さを一定に保つ
   （続きはマウスを乗せる（title）かクリックで読める）。 */
.chip.mini .m{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;font-size:10.5px;font-weight:normal;line-height:1.3;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word}

/* ---------- マイページ（個人の月カレンダー） ---------- */
table.mycal{border-collapse:separate;border-spacing:0;width:100%;background:#fff;
  table-layout:fixed;height:100%}
table.mycal th,table.mycal td{border:0;border-right:1px solid #e4e9ee;
  border-bottom:1px solid #e4e9ee;vertical-align:top;padding:4px 5px}
table.mycal thead th{position:sticky;top:0;z-index:20;background:var(--th);
  text-align:center;font-size:12px;border-bottom:1px solid var(--line)}
table.mycal thead th.sat{color:#1f5fa6}
table.mycal thead th.sun{color:var(--err)}
td.mday{height:96px;position:relative}
td.mday.empty{background:#fafbfc}
td.mday.cell.editable{cursor:pointer}
td.mday.cell.editable:hover{background:#eef5ff}
td.mday.today{box-shadow:inset 0 3px 0 var(--today)}
.mdate{font-size:12px;color:#555;margin-bottom:3px;line-height:1.3}
.mdate .n{font-weight:bold;font-size:14px;color:#333}
.mdate .wd{display:none;font-size:12px;color:#555}
.mdate .hn{font-size:10px;color:#8a6d1f;margin-left:4px}
td.mday.today .mdate .n{color:var(--today)}
.cur-sub{font-weight:bold;font-size:15px}
.printhead{display:none}          /* 紙にだけ出す見出し（@media print で出す） */

/* マイページの予定は「時刻」「関与先名」の2行までにそろえる。
   件名と「◯人」は出さない（クリックすれば全部読める）。
   1件あたりの高さが同じになるので、予定の多い日だけ升目が伸びることがない。 */
table.mycal .chip .m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.mycal .chip .s,table.mycal .chip .n{display:none}

/* 週の表示：1週ぶんしか出さないので、1日の升目が画面の高さいっぱいまで使える。
   月では省いていた件名・場所・「◯人」まで出して、開かずに読めるようにする。 */
table.mycal.weekspan{height:100%}
table.mycal.weekspan td.mday{height:auto}
table.mycal.weekspan .mdate{font-size:13px;margin-bottom:5px}
table.mycal.weekspan .chip{padding:4px 7px 4px 8px;margin-bottom:4px}
table.mycal.weekspan .chip .m{white-space:normal;overflow-wrap:anywhere}
table.mycal.weekspan .chip .s{display:block;white-space:normal;overflow-wrap:anywhere}
table.mycal.weekspan .chip .n{display:inline-block;font-size:10px;color:#5b6773}

/* 会社カレンダーの区分（色は使わず淡い網掛けにとどめる。色は予定区分のためにとっておく） */
.cal-weekend{background:#f2f4f6 !important}
.cal-holiday{background:#f7f2ee !important}
.cal-jikika{background:#f1f5f8 !important}
.cal-henkei{background:#fbf8ec !important}
td.cell.today{box-shadow:inset 3px 0 0 rgba(192,57,43,.45)}

/* 予定チップ：関与先を一番大きく、件名は小さく添える */
.chip{display:block;margin:0 0 3px;padding:3px 6px 3px 7px;border-radius:2px;
  border-left:3px solid var(--c,#8a8f96);background:#f6f7f8;
  background:color-mix(in srgb, var(--c,#8a8f96) 14%, #fff);
  font-size:12px;line-height:1.5;cursor:pointer;overflow:hidden}
.chip:hover{filter:brightness(.95);outline:1px solid var(--c,#8a8f96)}
.chip .t{color:#5b6773;font-size:11px;font-variant-numeric:tabular-nums;
  display:block;line-height:1.35}
.chip .m{display:block;font-weight:bold;font-size:13px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .s{display:block;font-size:11px;color:#5b6773;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 「自分だけに見せる」予定の鍵印 */
.chip .pv{margin-right:2px;font-size:11px;vertical-align:1px}
.chip.mini .pv{font-size:9px}
.privchk strong{color:var(--blue)}

/* ---------- 予定の検索 ---------- */
.searchform .frow{margin-bottom:10px}
.searchform .field input[type=search],.searchform .field select{width:100%;padding:5px 7px}
.searchform .periods{display:flex;gap:5px;flex-wrap:wrap;padding-top:3px}
.searchform .periods .on{background:var(--blue);color:#fff;border-color:var(--blue)}
.tablewrap{overflow-x:auto;max-height:70vh;overflow-y:auto}
table.results{width:100%;border-collapse:collapse;font-size:13px}
table.results th{background:var(--th);border:1px solid var(--line);padding:5px 8px;
  text-align:left;white-space:nowrap;position:sticky;top:0;z-index:2}
table.results td{border:1px solid var(--line);padding:3px 8px;vertical-align:middle}
table.results td.nowrap{white-space:nowrap}
table.results tr.past td{color:#8b939b;background:#fafbfc}
table.results tr.today td{background:#fff8f6}
table.results .dot{display:inline-block;width:9px;height:9px;border-radius:2px;
  background:var(--c);margin-right:5px}
table.results .chip{margin:0;display:inline-block;min-width:8em;max-width:34em}
table.results tr.past .chip{opacity:.72}

/* ドラッグで別の日へ移す（マウスのある機械だけ。app.js が draggable を付ける） */
.chip[draggable="true"]{cursor:grab}
.chip[draggable="true"]:active{cursor:grabbing}
.chip.dragging{opacity:.35}
td.cell.dropping{background:#e3eefb !important;
  box-shadow:inset 0 0 0 2px var(--blue)}

/* コピー中の目印（貼り付け先を選ぶあいだ、画面の下に出したままにする） */
.clipbar{display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;margin-top:8px;padding:7px 12px;font-size:13px;
  background:var(--warnbg);border:1px solid #eddcb0;border-radius:6px;
  box-shadow:0 -2px 10px rgba(0,0,0,.08)}
.clipbar .tag{background:var(--warn);color:#fff;border-radius:3px;padding:1px 7px;font-size:11px}
.clipbar .what{font-weight:bold;max-width:22em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clipbar .hint{color:#7a6220}

/* まとめてコピー：選んでいる最中の帯と、選ばれた予定の印。
   「コピー中」の帯（黄色）と見分けがつくよう、こちらは青で出す。 */
.clipbar.pickbar{background:#eaf2fb;border-color:#bcd4f0}
.clipbar.pickbar .tag{background:var(--blue)}
.clipbar.pickbar .hint{color:#4a5b6d}
.chip.picked{outline:2px solid var(--blue);outline-offset:-1px;
  box-shadow:0 0 0 2px rgba(31,95,166,.20)}
body.picking .chip{cursor:copy}
body.picking .chip:hover{filter:none;outline:2px dashed var(--blue);outline-offset:-1px}
body.picking .chip.picked:hover{outline-style:solid}
/* 選んでいる間は、マスを押しても予定は増えない（誤操作よけ） */
body.picking td.cell.editable,body.picking td.mday.cell.editable{cursor:default}
body.picking td.cell.editable:hover{background:transparent}
body.picking .addhint{display:none}

/* 凡例 */
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;margin:8px 0 0;font-size:12px;color:#555}
.legend .lg{display:inline-flex;align-items:center;gap:5px}
.legend .lg i{width:11px;height:11px;border-radius:2px;background:var(--c);display:inline-block}
body.boardpage .help{margin-top:4px}

/* ---------- 予定の入力パネル ---------- */
/* overflow:auto が要。これが無いと、画面に入りきらない下のほう（保存ボタンなど）が
   切り捨てられたまま、スクロールもできなくなる。
   dvh は「いま実際に見えている高さ」。スマホでキーボードが出ても、
   その分だけパネルが縮んでくれる（vh はキーボードを考えないので下が隠れる）。 */
dialog.evdlg{border:1px solid var(--line);border-radius:9px;padding:20px 22px;
  width:min(680px,94vw);max-height:92vh;max-height:92dvh;
  overflow:auto;overscroll-behavior:contain;
  box-shadow:0 12px 40px rgba(0,0,0,.25);color:#222}
dialog.evdlg::backdrop{background:rgba(20,30,40,.35)}
dialog.evdlg h2{margin:0 0 14px}
.frow{display:flex;gap:16px;flex-wrap:wrap}
.frow>.field{flex:1;min-width:220px}
.frow>.field input[type=text],.frow>.field select,.frow>.field textarea{width:100%}
.fixedval{padding:5px 0;font-weight:bold}

/* 参加メンバーの選択（所内会議などで複数人にまとめて登録する） */
.memberrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.memberrow .fixedval{flex:1;min-width:8em}
.memberrow .fixedval.many{color:var(--blue)}
.memberpick{border:1px solid var(--line);border-radius:5px;padding:9px 11px;margin-top:8px;
  background:#fbfcfd}
.memberpick.locked{opacity:.5}
.mpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:4px 10px}
.mpgrid .chk{font-size:13px;padding:2px 0}
.mpbtns{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px;
  border-top:1px solid var(--line);padding-top:8px}
.mpbtns .help{margin:0}

/* 予定チップの「◯人」の印 */
.chip .n{display:inline-block;margin-left:5px;padding:0 5px;border-radius:8px;
  background:rgba(0,0,0,.09);color:#48525c;font-size:10px;font-weight:normal;
  vertical-align:1px;white-space:nowrap}
.daterange,.timerow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.timerow .quick{display:flex;gap:4px;margin-left:4px}
.scopebox{background:var(--warnbg);border:1px solid #eddcb0;border-radius:5px;
  padding:8px 12px;font-size:13px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
/* 保存・キャンセルは、長いパネルを下までスクロールしなくても押せるように
   パネルの下辺に貼り付ける（負のマージンで左右いっぱいに広げてから内側に余白を戻す）。 */
.dlgfoot{display:flex;gap:8px;align-items:center;
  position:sticky;bottom:0;z-index:3;
  margin:12px -22px -20px;padding:10px 22px;
  background:#fff;border-top:1px solid var(--line)}

/* 他の人の予定を見るパネル（閲覧のみ） */
dialog.viewdlg{width:min(460px,94vw)}
.vlist{display:grid;grid-template-columns:5.5em 1fr;gap:6px 14px;margin:0 0 12px;
  font-size:14px;align-items:baseline}
.vlist dt{color:#777;font-size:12px;padding-top:2px}
.vlist dd{margin:0;font-weight:bold;word-break:break-word;white-space:pre-wrap}
.vlist dd#v_client{font-size:16px;color:var(--blue)}

/* ============================================================
   スマホ（縦画面）
   7日ぶんの表は入りきらないので、既定を「日」表示にしている（board.py）。
   ここでは文字とタップ目標を大きくして、指で扱えるようにする。
   ============================================================ */
.short{display:none}

@media (max-width:760px){
  body{font-size:14px}
  .pc-only{display:none !important}

  /* --- 上部バー：画面の名前と自分の名前だけ。メニューは下へ回す --- */
  .topbar{gap:6px;padding:0 8px;min-height:0;flex-wrap:nowrap;align-items:center}
  .long{display:none}
  .short{display:inline}
  .brand{flex:1 1 auto;display:flex;align-items:center;font-size:13px;
    padding:9px 8px 9px 0;border-right:1px solid rgba(255,255,255,.35)}
  .userbox{flex:0 0 auto;gap:12px;font-size:12px;align-items:center}
  .ucode{display:none}
  .uname{max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .badge{display:none}
  /* 上のバーの文字も、押せるものは指で押せる大きさにする */
  .userbox a{padding:9px 2px}

  /* --- メニューは画面の下に固定する（親指の届くところ） ---
     片手で持ったまま、週間ボード・今日・月間ボード…を親指で押し替えられる。
     押す的は44px角を目安にし、iPhoneのホームバーのぶんも空ける。 */
  :root{--btmnav:calc(52px + env(safe-area-inset-bottom, 0px))}
  body.hasnav{padding-bottom:var(--btmnav)}
  .mainnav{position:fixed;left:0;right:0;bottom:0;z-index:110;
    background:var(--blue);gap:4px;flex-wrap:nowrap;justify-content:flex-start;
    padding:4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -2px 10px rgba(0,0,0,.25);
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mainnav::-webkit-scrollbar{display:none}
  .navgroup{flex:1 0 auto;display:flex}
  /* flex:1 0 auto … 余れば広がる／足りなければ縮まず横スクロール（文字が潰れない） */
  .navtop{flex:1 0 auto;display:flex;align-items:center;justify-content:center;
    min-height:44px;padding:6px 7px;font-size:12px;border-radius:7px;line-height:1.2}
  .navtop:active{background:rgba(255,255,255,.4)}
  .caret{margin-left:3px}
  /* 下にあるので、プルダウンは上向きに開く */
  .navdrop{position:fixed;top:auto;bottom:var(--btmnav);left:6px;right:6px;
    min-width:0;max-width:none;margin:0;max-height:60vh;overflow-y:auto}
  .navitem{padding:11px 12px}

  /* --- よく押すもの（週｜日｜月 の切替と「＋予定を追加」）は画面の下へ ---
     下のメニューのすぐ上に置く。日付を送るボタンは上に残し、
     「見え方を変える」「予定を足す」だけを親指の届くところにまとめる。 */
  :root{--handybar:54px}
  .handy{display:flex;position:fixed;left:0;right:0;bottom:var(--btmnav);z-index:105;
    gap:10px;align-items:center;padding:6px 8px;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -3px 10px rgba(0,0,0,.10)}
  .handy .viewtoggle{flex:0 0 auto;border-color:var(--blue)}
  .handy .viewtoggle a{display:flex;align-items:center;min-height:42px;
    padding:0 18px;font-size:14px}
  .handy .btn{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
    min-height:42px;padding:8px 12px;font-size:14px}
  .handy .btn:active{background:var(--blue-d)}
  /* 予定表の下端が、下の2段（よく押すもの＋メニュー）に隠れないようにする */
  body.hasnav.boardpage{padding-bottom:calc(var(--btmnav) + var(--handybar))}

  /* --- 操作バー：1〜2行に圧縮 --- */
  body.boardpage .content{padding:5px 5px 4px}
  .toolbar{gap:4px;margin-bottom:4px}
  .toolbar .btn{padding:6px 8px;font-size:12px}
  .toolbar .cur{font-size:13px;margin:0 2px;order:5}
  .toolbar .inline{order:6}
  .toolbar .grow{display:none}
  .viewtoggle a{padding:6px 11px;font-size:12px}
  .toolbar .inline input[type=date]{padding:4px;font-size:12px}
  .toolbar .inline select{padding:4px;font-size:12px;max-width:9em}

  /* --- 凡例は1行の横スクロール、操作説明は隠す --- */
  body.boardpage .legend{flex-wrap:nowrap;overflow-x:auto;gap:9px;margin-top:4px;
    font-size:10px;padding-bottom:2px;scrollbar-width:none}
  body.boardpage .legend::-webkit-scrollbar{display:none}
  body.boardpage .legend .lg{flex:0 0 auto}
  body.boardpage .help{display:none}
  /* 検索：画面が狭いので、詰めて出して横スクロール */
  .searchform .frow>.field{min-width:0;flex:1 1 100%}
  table.results{font-size:12px}
  table.results th,table.results td{padding:3px 5px}
  table.results .chip{min-width:6em}
  .tablewrap{max-height:none}

  /* 貼り付け先を選んでいる最中の案内は、スマホでも消さない
     （指ではドラッグできないので、貼り付けが唯一の複製手段になる） */
  .clipbar{padding:6px 9px;font-size:12px;gap:7px}
  .clipbar .hint{font-size:11px}
  .clipbar .what{max-width:11em}


  /* --- ここからが本体。空いた分だけ大きく見せる --- */
  /* 日表示：名前を細く、予定欄を画面いっぱいに */
  table.board.dayview th.whocol{width:88px;min-width:88px;font-size:14px}
  table.board.dayview td.cell{padding:5px 7px}

  /* 週表示（自分で選んだとき）：3日ぶんくらいが見える幅にして横スクロール */
  table.board th.whocol{min-width:82px;width:82px;font-size:13px}
  td.cell{min-width:124px;height:48px}
  table.board.weekview{min-width:950px}
  table.board.weekview thead th.whocol{width:82px}
  .dmd{font-size:14px}
  th.whocol .code{font-size:10px}

  /* チップは折り返して全部読めるようにする（横に切らない） */
  .chip{padding:7px 9px;margin-bottom:5px;font-size:14px}
  .chip .m{font-size:15px;white-space:normal}
  .chip .s{white-space:normal;font-size:12px}
  .chip .t{font-size:12px}

  /* 月間ボードは1ヶ月ぶん並ぶので、幅を詰めて横スクロールで見る。
     列幅は thead の指定で決まる（table-layout:fixed）ので、
     PC向けの指定に負けないよう thead th.whocol にも同じ幅を書く */
  table.board.monthview td.cell{min-width:0;width:58px;height:auto}
  table.board.monthview thead th{width:58px}
  table.board.monthview th.whocol,
  table.board.monthview thead th.whocol{min-width:76px;width:76px;font-size:11px}
  table.board.monthview th.whocol .code{display:none}
  .chip.mini .m{font-size:10px}

  /* マイページの週の表示は、7列に押し込めると1列が指1本ぶんの幅しか無くなる。
     縦画面では表をやめて、1日ぶんを1行として上から順に並べる。
     見出し行が消えるので、日付の横に曜日を出す。 */
  table.mycal.weekspan,table.mycal.weekspan tbody,
  table.mycal.weekspan tr,table.mycal.weekspan td.mday{display:block;width:auto;height:auto}
  table.mycal.weekspan thead{display:none}
  table.mycal.weekspan td.mday{border:0;border-bottom:1px solid #e4e9ee;
    min-height:46px;padding:6px 8px}
  table.mycal.weekspan .mdate .wd{display:inline;margin-left:2px}
  table.mycal.weekspan .chip .m{white-space:normal}

  /* マイページの月カレンダーは、縦画面でもそのまま7列で読める大きさに。
     表は画面の残り全部（height:100%）を6週で分け合うので、縦は自動で埋まる */
  table.mycal th,table.mycal td{padding:3px 3px}
  table.mycal thead th{font-size:11px;padding:2px}
  td.mday{height:56px}
  .mdate{font-size:11px;margin-bottom:2px}
  .mdate .n{font-size:13px}
  .mdate .hn{display:none}
  table.mycal .chip{padding:3px 5px;margin-bottom:3px;font-size:12px}
  table.mycal .chip .m{font-size:12px}
  table.mycal .chip .t{font-size:10px}

  .legend{font-size:11px;gap:4px 10px}
  /* 入力パネルは画面をほぼ全部使う。中身が多いので、はみ出したぶんは中でスクロール */
  dialog.evdlg{padding:14px 12px;width:96vw;max-height:94dvh}
  dialog.evdlg h2{margin:0 0 10px;font-size:17px}
  .frow{gap:0}
  .frow>.field{min-width:100%}
  .field{margin-bottom:9px}
  .dlgfoot{margin:10px -12px -14px;padding:9px 12px}
  .dlgfoot .btn{padding:9px 16px}
  /* 指で押しやすい大きさに（iOSは16px未満だと勝手に拡大するので16pxを下限に） */
  dialog.evdlg input[type=text],dialog.evdlg input[type=search],
  dialog.evdlg input[type=date],dialog.evdlg select,dialog.evdlg textarea{
    font-size:16px;padding:7px 8px}
  /* 日付・時刻は横に並べる。1つずつ縦に積むと、それだけで画面半分を使ってしまう
     （.frow>.field select{width:100%} を、この2ヶ所だけ打ち消す） */
  .timerow,.daterange{gap:6px}
  .daterange{flex-wrap:nowrap}
  .daterange input[type=date]{flex:1 1 auto;width:auto;min-width:0}
  .timerow .chk{flex:0 0 100%}
  .timerow select{flex:1 1 40%;width:auto;min-width:0}
  .timerow .quick{margin-left:0;width:100%}
  .timerow .quick .btn{flex:1}
  .memberpick{padding:7px 8px}
}

/* 横向きスマホ・小さめタブレットは週表示のまま少しだけ詰める */
@media (max-width:1000px) and (orientation:landscape){
  table.board th.whocol{min-width:100px;width:100px}
  td.cell{min-width:126px}
}

/* ---------- 印刷（A4横1枚に、切れずに収める） ----------
   壁に貼る・配る用。画面では表を横スクロールして見ているが、紙は動かせないので
   「紙の幅にきっちり合わせる」ことを最優先にする（はみ出すと右端の曜日が消える）。
   ============================================================ */
@media print{
  /* 既定はA4縦。週間ボード・日別・マイページはこちらで1枚に収まる。
     31日ぶんが並ぶ月間ボードだけ、紙を横向きにする（body に printwide が付く）。 */
  @page{size:A4 portrait;margin:8mm}
  @page wide{size:A4 landscape;margin:8mm}
  body.printwide{page:wide}
  .topbar,.no-print,.toolbar,.handy,.mainnav,.clipbar{display:none !important}
  body{background:#fff;font-size:10px}
  body.boardpage,body.hasnav,body.hasnav.boardpage{height:auto;display:block;
    overflow:visible;padding:0 !important}
  body.boardpage .content,.content{max-width:none;margin:0;padding:0;display:block}
  .card{border:none;box-shadow:none;padding:0;margin:0 0 6px}

  /* 紙のいちばん上に「何の表か・いつのぶんか」を出す（画面の操作バーは消えるため） */
  .printhead{display:flex !important;align-items:baseline;gap:10px;
    margin:0 0 5px;padding:0 0 3px;border-bottom:2px solid #333}
  .printhead .t{font-size:13px;font-weight:bold}
  .printhead .v{font-size:11px;border:1px solid #333;border-radius:3px;padding:0 5px}
  .printhead .r{font-size:13px;font-weight:bold}
  .printhead .d{margin-left:auto;font-size:9px;color:#555}

  /* 表：min-width を外して紙の幅ちょうどにする */
  .board-wrap,body.boardpage .board-wrap{overflow:visible;max-height:none;
    border:1px solid #999;box-shadow:none;width:auto}
  table.board,table.board.weekview,table.board.dayview,table.board.monthview{
    width:100% !important;min-width:0 !important;table-layout:fixed}
  table.board th,table.board td{border:1px solid #bbb}
  table.board thead th{position:static}
  table.board th.whocol,table.board thead th.whocol,
  table.board.weekview thead th.whocol,table.board.monthview thead th.whocol{
    position:static;width:70px;min-width:0}
  table.board tbody th.whocol{font-size:9px;padding:2px 4px;line-height:1.25;
    white-space:normal;overflow-wrap:anywhere}
  table.board tbody th.whocol .code{font-size:7px}
  table.board thead th{font-size:9px;padding:2px 3px;line-height:1.3}
  .dmd{font-size:10px}
  .dwd{font-size:9px}
  .dnote{font-size:7px}
  table.board td.cell,table.board thead th,
  table.board.monthview td.cell,table.board.monthview thead th,
  table.board.weekview td.cell,table.board.weekview thead th{
    width:auto !important;min-width:0 !important}
  td.cell{height:auto;min-width:0}
  .addhint{display:none}

  /* 予定：地色は白にして紙を汚さず、区分は左の色帯で見分ける */
  .chip{background:#fff !important;border:1px solid #999;
    border-left:3px solid var(--c,#8a8f96) !important;font-size:9px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .chip{padding:1px 3px 1px 4px;margin-bottom:2px;line-height:1.3}
  .chip .m{font-size:9px;white-space:normal;overflow-wrap:anywhere}
  .chip .s,.chip .t{font-size:7.5px;white-space:normal;overflow-wrap:anywhere}
  .chip .n{font-size:7px}
  .chip .pv{display:none}
  table.board.weekview td.cell,table.board.dayview td.cell{padding:2px 3px}

  /* 月間ボードは31日ぶん並ぶので、紙に収まるところまで小さくする */
  table.board.monthview td.cell,table.board.monthview thead th{padding:1px}
  table.board.monthview .dmd{font-size:8px}
  table.board.monthview .dwd{font-size:6px}
  /* 名前は切らない。1ヶ月ぶんの列を細くしてでも、誰の行かは読めるようにする */
  table.board.monthview th.whocol,
  table.board.monthview thead th.whocol{width:66px !important}
  table.board.monthview tbody th.whocol{font-size:8px;padding:2px 3px;
    line-height:1.25;white-space:normal;overflow-wrap:anywhere}
  table.board.monthview th.whocol .code{display:none}
  table.board.monthview .chip{padding:1px 2px 1px 3px;margin-bottom:1px}
  table.board.monthview .chip .m{font-size:7px;line-height:1.15;-webkit-line-clamp:2}

  /* 個人カレンダー（マイページ）も紙の幅に合わせる */
  table.mycal{width:100% !important;table-layout:fixed;height:auto}
  table.mycal th,table.mycal td{border:1px solid #bbb}
  table.mycal thead th{position:static}
  td.mday{height:auto;min-height:66px}

  /* 区分の色の意味が紙だけでも分かるよう、凡例は残す */
  .legend{display:flex !important;flex-wrap:wrap;gap:3px 12px;margin:5px 0 0;
    font-size:9px;color:#333}
  .legend i{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  tr{page-break-inside:avoid}
  thead{display:table-header-group}
}


/* ============================================================
   月・週の移動を「流れるように」見せる
   ============================================================
   ページを読み直す作りのままで、表だけを横へ送って見せる。

   押した瞬間 … いま見ている表を、進む向きへ滑らせながら薄くする（.leaving-*）。
                 その裏で次のページを読み込む。読み込みが終わるまで古い画面が
                 残るので、白い画面は挟まらない。
   次の画面   … <html data-nav="next|prev"> を見て、表が反対側から滑り込む。
                 向きは base.html の先頭で、描かれる前に決めている。

   CSS のアニメーションだけで作ってあるので、iPhone の古い Safari でも動く
   （ブラウザ任せの View Transitions は iOS 18.2 以降でしか動かなかったため、
   こちらに置き換えた）。
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  /* 出ていく側：短く、加速しながら */
  body.boardpage .board-wrap.leaving-next,
  body.boardpage .board-wrap.leaving-prev{
    transition:transform .16s ease-in,opacity .16s ease-in;pointer-events:none}
  /* 横向き（PC。◀ ▶ のボタンと同じ向き） */
  body.boardpage .board-wrap.leaving-next{transform:translateX(-28%);opacity:0}
  body.boardpage .board-wrap.leaving-prev{transform:translateX(28%);opacity:0}
  /* 縦向き（スマホで「上下になぞる」設定のとき。指の動きと同じ向きに流す） */
  body.boardpage .board-wrap.leaving-next.leaving-v{transform:translateY(-28%)}
  body.boardpage .board-wrap.leaving-prev.leaving-v{transform:translateY(28%)}

  /* 入ってくる側：少し長く、減速しながら止まる */
  html[data-nav="next"] body.boardpage .board-wrap{
    animation:board-in-right .30s cubic-bezier(.2,.75,.25,1) both}
  html[data-nav="prev"] body.boardpage .board-wrap{
    animation:board-in-left .30s cubic-bezier(.2,.75,.25,1) both}
  html[data-nav="next"][data-axis="v"] body.boardpage .board-wrap{animation-name:board-in-up}
  html[data-nav="prev"][data-axis="v"] body.boardpage .board-wrap{animation-name:board-in-down}
}
@keyframes board-in-right{from{transform:translateX(28%);opacity:0}to{transform:none;opacity:1}}
@keyframes board-in-left {from{transform:translateX(-28%);opacity:0}to{transform:none;opacity:1}}
/* 上へなぞる＝次へ進む：下から上がってくる。下へなぞる＝前へ戻る：上から降りてくる */
@keyframes board-in-up   {from{transform:translateY(28%);opacity:0}to{transform:none;opacity:1}}
@keyframes board-in-down {from{transform:translateY(-28%);opacity:0}to{transform:none;opacity:1}}

/* ログアウトは POST（他サイトのリンク1つでログアウトさせられないように）。見た目はリンクのまま */
.logoutform{display:inline;margin:0}
.linkbtn{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}