/* 業務管理システム 共通スタイル */
:root {
  --c-primary: #2563eb;
  --c-primary-dark: #1e40af;
  --c-danger: #dc2626;
  --c-text: #1f2937;
  --c-muted: #6b7280;
  --c-border: #d1d5db;
  /* 本文は枠(カード)を使わない平坦なレイアウト。地色を白で統一し、
     区切りは余白と罫線で表す。--c-bg はボタンのhoverなど面の押し込み表現にだけ残す。 */
  --c-bg: #f3f4f6;
  --c-card: #ffffff;
  --c-page: #ffffff;
  /* カレンダーの土日祝の地色。「休み」であることだけを表す薄い地色にし、
     土(青)・日祝(赤)の区別は日付の文字色が担う(.staff-calendar .sat/.sun の色指定)。
     地色まで青にすると、今日(--c-bg-today)と土曜が見分けられなくなるため。
     祝日は振替休日・国民の休日を含み、日曜と同じ扱い。予定チップを載せても読める濃さに留める。 */
  --c-bg-sat: #f1f5f9;
  --c-bg-sun: #fef2f2;
  /* 今日は青にしないこと。予定チップの既定色(.shift-chip の #dbeafe)と同系だと、
     今日の列でチップが地色に溶けて読めなくなる。チップに無い淡い緑にして必ず浮かせる。 */
  --c-bg-today: #dcfce7;
  /* カレンダーの案件概要パネルの幅。パネル本体と、開いている間のカレンダー右端の詰め幅で共用 */
  --cal-panel-w: min(560px, 92vw);
  --cal-day-w: 58px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  color: var(--c-text);
  background: var(--c-page);
  font-size: 15px;
  line-height: 1.6;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.4rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }

/* ヘッダー */
.topbar { background: #111827; color: #fff; }
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; min-height: 52px;
}
.brand { color: #fff; font-weight: bold; font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.nav-toggle {
  display: none; background: none; border: 1px solid #4b5563; color: #d1d5db;
  border-radius: 6px; padding: 0.35rem 0.8rem; font-size: 0.9rem; font-family: inherit; cursor: pointer;
}
.nav-toggle:hover { color: #fff; border-color: #9ca3af; }

/* 上段タブ(グループ) */
.topnav { display: flex; gap: 0.1rem; flex-wrap: wrap; align-items: stretch; align-self: stretch; }
.topnav a {
  display: flex; align-items: center; color: #d1d5db; padding: 0 0.85rem;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.topnav a:hover { color: #fff; text-decoration: none; }
.topnav a.active { color: #fff; border-bottom-color: var(--c-primary); font-weight: 600; }

/* 下段タブ(選択中グループの子項目) */
.subnav { background: var(--c-card); border-bottom: 1px solid var(--c-border); }
.subnav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1rem;
  display: flex; gap: 0.1rem; flex-wrap: wrap; align-items: center;
}
.subnav a {
  padding: 0.55rem 0.85rem; color: var(--c-muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
}
.subnav a:hover { color: var(--c-text); text-decoration: none; }
.subnav a.active { color: var(--c-primary-dark); border-bottom-color: var(--c-primary); font-weight: 600; }

/* AI・通知の常時表示グループ。PCでは右端の user メニューの手前に並べる */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.usermenu { display: flex; align-items: center; gap: 0.75rem; }
.notif-link { display: inline-flex; align-items: center; gap: 0.25rem; color: #d1d5db; font-size: 1rem; text-decoration: none; }
.notif-link:hover { text-decoration: none; opacity: 0.85; }
.username { color: #d1d5db; font-size: 0.85rem; }
.usermenu .muted { color: #9ca3af; font-size: 0.85rem; }

/* モバイル用の全項目メニュー(通常は非表示、ハンバーガーで展開) */
.mobilenav { display: none; background: #1f2937; border-bottom: 1px solid #374151; }
.mobilenav .mnav-group { padding: 0.35rem 0.75rem; border-top: 1px solid #374151; }
.mobilenav .mnav-group:first-child { border-top: none; }
.mobilenav .mnav-head {
  display: block; color: #9ca3af; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em; padding: 0.35rem 0.25rem 0.15rem;
}
.mobilenav .mnav-group > a {
  display: block; color: #d1d5db; padding: 0.5rem 0.75rem; border-radius: 6px;
}
.mobilenav .mnav-group > a:hover { background: #374151; text-decoration: none; }
.mobilenav .mnav-group > a.active { background: var(--c-primary); color: #fff; }
.mobilenav .mnav-group.active > .mnav-head { color: #d1d5db; }

/* レイアウト */
/* タブ(subnav)の直下から本文を始める。左右のみ余白を残す */
.container { max-width: 1200px; margin: 0.75rem auto; padding: 0 1rem; }
/* ログイン等は本文と違い、カードを浮かせて見せたいので従来の地色を敷く */
.guest { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--c-bg); }
.guest-container { width: 100%; max-width: 420px; padding: 1rem; }
/* 枠(枠線・背景・角丸・内側余白)は持たせず、区切りは下の余白だけで表す。
   枠が要るページは .boxed で囲む(ダッシュボード)。ログイン画面は .login-card。 */
.card { margin-bottom: 1.5rem; }
.card.narrow { max-width: 640px; }
/* 枠付きにするページ。中身が独立した情報の集まりで、区切りが要る場合に使う */
.boxed .card {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: 8px;
  padding: 1.25rem; margin-bottom: 1.25rem;
}
.login-card {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: 8px;
  padding: 1.25rem;
}
.login-card h1 { text-align: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; align-items: start; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
/* display: grid が hidden 属性のブラウザ既定(display: none)に勝ってしまうため明示的に打ち消す
   (機材予約の編集で「終日」チェック中に時刻欄を隠す用途。.cal-pop[hidden] などと同じ対策) */
.grid-2[hidden] { display: none; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head .actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* フォーム */
label { display: block; margin-bottom: 0.9rem; font-weight: 600; font-size: 0.9rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=file], select, textarea {
  display: block; width: 100%; margin-top: 0.25rem; padding: 0.45rem 0.6rem;
  border: 1px solid var(--c-border); border-radius: 6px; font-size: 0.95rem;
  font-family: inherit; background: #fff;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-primary); outline-offset: -1px; }
.req { color: var(--c-danger); font-size: 0.75rem; font-weight: normal; margin-left: 0.25rem; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.inline-form { display: inline; }
.attendance-user-filter { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
.attendance-user-filter select { flex: 0 1 auto; min-width: 8rem; }
.inline-label { display: inline; font-weight: normal; }
.filter-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-form input[type=text] { width: 280px; }
.filter-form input, .filter-form select { display: inline-block; width: auto; margin-top: 0; }

/* ボタン */
.btn {
  display: inline-block; padding: 0.45rem 1rem; border: 1px solid var(--c-border);
  border-radius: 6px; background: #fff; color: var(--c-text); cursor: pointer;
  font-size: 0.9rem; font-family: inherit; text-decoration: none; line-height: 1.4;
}
.btn:hover { background: var(--c-bg); text-decoration: none; }
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-danger { background: #fff; border-color: var(--c-danger); color: var(--c-danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 0.2rem 0.6rem; font-size: 0.82rem; }
.btn-block { width: 100%; }
.mt { margin-top: 0.75rem; display: inline-block; }

/* テーブル */
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.5rem 0.6rem; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: middle; }
th { background: #f9fafb; font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.actions { white-space: nowrap; display: flex; gap: 0.3rem; align-items: center; }
.row-disabled { opacity: 0.55; }
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: #eff6ff; }
.detail-cell { font-size: 0.8rem; color: var(--c-muted); max-width: 320px; overflow-wrap: anywhere; }

/* 並べ替えの表(スタッフ管理の表示順)。行をドラッグして入れ替える */
.reorder-table tr[data-id] { cursor: grab; }
.reorder-table tr.dragging { opacity: 0.45; }
.reorder-table td.reorder-cell { white-space: nowrap; width: 1%; }
.reorder-table .drag-handle { color: var(--c-muted); margin-right: 0.35rem; }
.reorder-table .order-no { display: inline-block; min-width: 1.6rem; color: var(--c-muted); }
.reorder-table .reorder-cell .btn { padding: 0 0.4rem; line-height: 1.6; }
.reorder-table .group-row td { background: var(--c-bg); font-weight: 600; }

/* バッジ */
.badge {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: #e5e7eb; color: #374151; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.badge-alert { background: var(--c-danger); color: #fff; }
.badge-draft { background: #e5e7eb; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-approved, .badge-completed, .badge-available, .badge-returned { background: #d1fae5; color: #065f46; }
.badge-rejected, .badge-cancelled, .badge-retired, .badge-wands_deleted { background: #fee2e2; color: #991b1b; }
.badge-in_progress, .badge-out, .badge-quoting { background: #dbeafe; color: #1e40af; }
.badge-planning, .badge-reserved, .badge-maintenance { background: #ede9fe; color: #5b21b6; }

/* フラッシュ */
.flash { padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
.flash-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.error-list { margin: 0; padding-left: 1.2rem; }
.muted { color: var(--c-muted); }
.small { font-size: 0.85rem; }
.pre-line { white-space: pre-line; }

/* タブ。幅が足りないときは折り返さず横スクロールで見る(案件詳細を右パネルで開いたときなど)。
   overflow を付けると負マージンで下線に重ねる描画がクリップされるが、
   有効タブの下に線が1本通って見えるだけなので許容する */
.tabs {
  display: flex; gap: 0.25rem; border-bottom: 2px solid var(--c-border); margin-bottom: 1rem;
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* overflow-x を付けると縦も auto になり、タブの負マージン(-2px)が
     縦のはみ出し扱いされて縦スクロールバーが出るため、縦は明示的に切る */
  overflow-y: hidden;
  scrollbar-width: none; /* バーは出さない(ホイール・スワイプでスクロールは可能) */
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: 0.5rem 1rem; color: var(--c-muted); border-radius: 6px 6px 0 0;
  border: 1px solid transparent; border-bottom: none; margin-bottom: -2px;
  white-space: nowrap;
}
.tabs a:hover { text-decoration: none; color: var(--c-text); }
.tabs a.active {
  background: var(--c-card); color: var(--c-text); font-weight: 600;
  border-color: var(--c-border); border-bottom: 2px solid var(--c-card);
}
/* 2段目のタブ(機材管理のジャンル行など)。1段目の直下に寄せ、下線なしの丸チップで出す */
.tabs.sub-tabs { margin-top: -0.65rem; border-bottom: none; }
.tabs.sub-tabs a { padding: 0.25rem 0.7rem; font-size: 0.85rem; border-radius: 999px; margin-bottom: 0; }
.tabs.sub-tabs a.active { background: var(--c-primary); color: #fff; border-color: transparent; }

/* 機材リスト: セクション/ジャンル移動タブ。カレンダーと同じくスクロール中も追従する */
.equipment-index-nav {
  position: sticky; top: 0; z-index: 6; background: var(--c-page);
  padding: 4px 0; margin-bottom: 0.35rem;
}
.equipment-index-nav .section-jump { margin-bottom: 0.2rem; }
.equipment-index-nav .section-jump:last-child { margin-bottom: 0; }
.equipment-genre-jump a[hidden] { display: none; }
.equipment-list-table { min-width: 980px; }
.equipment-list-table .equipment-section-row th,
.equipment-list-table .equipment-genre-row th {
  text-align: left; height: auto;
}
.equipment-list-table .equipment-section-row th {
  background: #eef2f7; font-weight: 700; scroll-margin-top: 78px;
}
.equipment-list-table .equipment-genre-row th {
  background: #f8fafc; color: var(--c-muted); font-size: 0.85rem; font-weight: 600;
  scroll-margin-top: 78px;
}

/* 詳細リスト */
.detail-list { display: grid; grid-template-columns: 8rem 1fr; gap: 0.4rem 1rem; margin: 0; }
.detail-list dt { font-weight: 600; color: var(--c-muted); }
.detail-list dd { margin: 0; }
/* 機材グループパネルの機材一覧: 1行=セクション、1機材=背景色付きチップ(ホバー概要の .pop-item と同じ見せ方) */
.detail-list .eq-line { margin: 1px 0; }
.detail-list .eq-chip {
  display: inline-block; background: #e0e7ef; color: #1f2937;
  border-radius: 4px; padding: 0 6px; margin: 1px 4px 1px 0; white-space: nowrap; text-decoration: none;
}
.detail-list .eq-chip:hover { background: #cbd5e1; }

/* 明細テーブル */
.items-table input, .items-table select { margin-top: 0; }
.items-table .w-num { width: 7.5rem; }
.items-table .w-unit { width: 5.5rem; }
.items-table input.num { text-align: right; }
.w-tax { width: 4rem; display: inline-block; text-align: right; }
.totals { margin-top: 1rem; text-align: right; font-size: 0.95rem; }
.totals .grand-total { font-size: 1.15rem; font-weight: bold; margin-top: 0.25rem; }

/* 承認カード */
.approval-card { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.approval-info { flex: 1 1 320px; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.approval-form { display: flex; gap: 0.4rem; align-items: center; }
.approval-form input { width: 180px; margin-top: 0; }

/* カレンダー */
.calendar-nav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.calendar-nav select { display: inline-block; width: auto; margin-top: 0; }
.day-num { font-size: 0.8rem; font-weight: 600; }

/* マイカレンダー(月グリッド)。案件は実施期間を週ごとの帯にするため、表ではなくグリッドで組む。
   帯の位置は CSP(inline style禁止)により style 属性で渡せないので、開始列(.gs-*)と
   長さ(.gsp-*)をクラスで指定する。列は7固定なので7種類ずつで足りる。
   同じ週で重なる帯は、グリッドの自動配置が空いている段へ送るため段組みは自動で決まる。 */
.month-grid { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.month-head span { padding: 0.3rem 0.4rem; font-size: 0.8rem; font-weight: 600; text-align: center; }
.month-head .sun { color: var(--c-danger); }
.month-head .sat { color: var(--c-primary); }
.week { position: relative; min-height: 88px; border-bottom: 1px solid #e5e7eb; }
.week:last-child { border-bottom: 0; }
/* 日付セルの地色(土日祝・今日・当月外)は帯の下に敷く。
   後に書いたものが勝つので、順番は 土 → 日/祝 → 当月外 → 今日 のまま変えないこと
   (同じ日に複数当たったとき、今日であることが一番分かってほしい) */
.week-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.week-bg > div { border-right: 1px solid #f1f3f5; }
.week-bg > div:last-child { border-right: 0; }
.week-bg .sat { background: var(--c-bg-sat); }
.week-bg .sun, .week-bg .holiday { background: var(--c-bg-sun); }
.week-bg .empty { background: #fafafa; }
.week-bg .today { background: var(--c-bg-today); }
.week-fg { position: relative; padding-bottom: 4px; }
.week-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.week-days .wday { padding: 2px 5px; font-size: 0.8rem; font-weight: 600; min-height: 1.3em; }
.week-days .sun, .week-days .holiday { color: var(--c-danger); }
.week-days .sat { color: var(--c-primary); }
.week-bars {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 0; row-gap: 2px; padding: 0;
}
.week-bars .shift-chip { margin: 0 2px; text-align: left; }
.gs-1{grid-column-start:1} .gs-2{grid-column-start:2} .gs-3{grid-column-start:3} .gs-4{grid-column-start:4}
.gs-5{grid-column-start:5} .gs-6{grid-column-start:6} .gs-7{grid-column-start:7}
.gsp-1{grid-column-end:span 1} .gsp-2{grid-column-end:span 2} .gsp-3{grid-column-end:span 3} .gsp-4{grid-column-end:span 4}
.gsp-5{grid-column-end:span 5} .gsp-6{grid-column-end:span 6} .gsp-7{grid-column-end:span 7}
.calendar-page { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 1rem; }
/* カレンダーを縦に広く使う: 見出し・操作ボタン・枠を外したぶんスクロール領域を伸ばす。
   190px = topbar 52 + subnav 43 + .container の上下余白 24 + 月移動行 36 + セクション行 35。
   これ以上伸ばすとページ側にもスクロールが出て二重になる。
   (セクション行はマイカレンダーには無いが、モードで高さを変えると切替時にガタつくので揃える) */
.calendar-page .card { margin-bottom: 0; }
/* PCはこの高さで領域内スクロール。スマホは max-height:none にしてページごとスクロールする(下の @media) */
.schedule-wrap { overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 190px); }
/* 日付列はJSの data-day-width と同じ固定幅にする。
   テーブルが画面幅に合わせて伸びると、固定pxで日付を計算するスクロール/クリック位置がずれる。 */
.staff-calendar {
  width: max-content; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0;
}
/* 線は日付の境目(縦)だけに引く。横線は引かない。
   横線があると、同じスタッフの段(レーン)や案件・シフトごとに区切られて見えるため。
   border-bottom: 0 は必須 — 全テーブル共通の `th, td` が border-bottom を持つので、
   ここで明示的に打ち消さないと横線が残る。 */
.staff-calendar th, .staff-calendar td {
  width: var(--cal-day-w); min-width: var(--cal-day-w); max-width: var(--cal-day-w);
  height: 58px; padding: 0.25rem;
  border-right: 1px solid #cbd5e1; border-bottom: 0;
  vertical-align: top; background: #fff;
}
/* 1スタッフは帯の重なりぶんだけ段(レーン)を持つ。1段は低くして全体の縦を詰める */
.staff-calendar .staff-lane td, .staff-calendar .staff-lane th { height: 28px; padding: 1px 3px; }
.staff-calendar .staff-lane .shift-chip { margin-top: 0; }
/* 日付と曜日は1行に収め、ヘッダーの縦幅を詰める(横長の表なので縦は少しでも稼ぐ)。
   共通の th/td が height: 58px を持つので、ここで height: auto に戻すこと。 */
.staff-calendar thead th {
  position: sticky; top: 0; z-index: 2; text-align: center; background: #f9fafb;
  height: auto; padding: 1px 2px; line-height: 1.3; white-space: nowrap;
}
/* スマホのページ全体スクロール時、日付ヘッダーを固定タブの直下に複製して固定表示する
   (app.js が位置・横スクロール同期・表示切替を制御。元ヘッダーがタブ裏に隠れた間だけ出す)。 */
.cal-float-head {
  position: fixed; overflow: hidden; z-index: 5; background: var(--c-page);
  pointer-events: none; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.10);
}
.cal-float-head > div { will-change: transform; }
.cal-float-head table { margin: 0; }
.cal-float-head thead th { position: static; }
/* スタッフ名・セクション名は左の固定列をやめ、その行の内容の上に置く。
   横スクロールしても読めるよう、行そのものではなく中の .pin だけを左端に貼り付ける
   (行はスクロールし、文字だけが左端に留まる)。 */
.staff-calendar .staff-name-row td, .staff-calendar .section-row th {
  height: auto; border-right: 0; text-align: left;
}
/* スタッフの区切り。横線はここ(名前の上)だけに引く。
   本文のセルは border-bottom: 0 にしてあるので、段や案件ごとには線が出ない。 */
.staff-calendar .staff-name-row td {
  padding: 0; border-top: 1px solid #cbd5e1; position: relative;
}
/* 列レイヤー(.grid-cols): 土日祝・今日の地色と日付の縦線を、セル毎ではなく「表の背後の
   1枚のレイヤー」で描く。以前はセル塗り+行ごとの重ね置きdiv(.day-bg)だったが、
   行数×日数ぶんの要素になりスマホのスクロールが重くなるため廃止した(見た目は同じ)。
   固定幅でセルの列幅に揃う。本文セルは透明+縦線なしでこれを透かして見せる。
   .grid-canvas は inline-block で表の幅ちょうどに縮む(レイヤーと列がズレないように)。 */
.grid-canvas { position: relative; display: inline-block; vertical-align: top; width: max-content; }
.grid-canvas .grid-cols { position: absolute; inset: 0; display: flex; z-index: 0; pointer-events: none; }
.grid-canvas .grid-cols > div {
  flex: 0 0 var(--cal-day-w); width: var(--cal-day-w); border-right: 1px solid #cbd5e1;
}
.grid-canvas .staff-calendar { position: relative; z-index: 1; }
.grid-canvas .staff-calendar tbody td { background: transparent; border-right: 0; }
/* 行仮想化(app.js): 画面から遠いチャンク(tbody.vchunk)は行を消し、同じ高さの
   スペーサー行(.vspacer、高さはJSが入れる)に置き換える。セクション見出し行は
   移動リンクの着地点なので残す。印刷時は全行を出す */
.staff-calendar tbody.vhide > tr:not(.vspacer):not(.section-row) { display: none; }
.staff-calendar .vspacer td { padding: 0; border: 0; height: auto; }
@media print {
  .staff-calendar tbody.vhide > tr:not(.vspacer) { display: table-row; }
  .staff-calendar .vspacer { display: none; }
}
.staff-calendar .pin {
  position: sticky; left: 0; display: inline-block;
  padding: 0 6px; line-height: 1.3;
  z-index: 1; /* .day-bg の上に出す */
}
/* 名前はシフトのチップと同じ文字サイズ。名前とシフトの隙間は詰め、スタッフ同士は上で空ける */
/* 名前に地色は敷かない。敷くと土日祝の列がその行だけ途切れる(横スクロールしても名前は
   .day-bg の上に乗るので、地色が無くても読める) */
.staff-calendar .staff-name { font-weight: 600; font-size: 0.72rem; }

/* 全体カレンダーのセクション移動(月移動と同じ行に置く) */
/* 月表示の下の独立した行。セクションが多くても折り返さず、横スクロールで辿る */
.section-jump {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.25rem;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; margin-bottom: 0.4rem; padding-bottom: 2px;
}
.section-jump > .btn { flex: 0 0 auto; white-space: nowrap; }
.section-jump .is-mine { border-color: var(--c-primary); color: var(--c-primary); font-weight: 600; }
/* いま表示中のセクション(スクロール位置に追従して app.js が付け外しする) */
.section-jump .is-current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
.section-jump .is-current:hover { background: var(--c-primary-dark); color: #fff; }
/* スクロールバーは細く控えめに(WebKit系。Firefoxは scrollbar-width で指定済み) */
.section-jump::-webkit-scrollbar { height: 6px; }
.section-jump::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.section-jump::-webkit-scrollbar-track { background: transparent; }
/* セクション見出し行。移動リンクの着地点。sticky なヘッダ行の下に隠れないよう余白を取る。
   ヘッダの高さ(日付+曜日の1行ぶん)に合わせること。ページ内で sticky なのはこのヘッダだけ。 */
.staff-calendar .section-row { scroll-margin-top: 28px; }
/* セクションの区切りは横線ではなく背景色で示す(横線は引かない) */
.staff-calendar .section-row th {
  padding: 3px 0; background: #eef2f7; font-weight: 700;
}
.staff-calendar .section-row .pin { background: #eef2f7; font-size: 0.78rem; }
/* ジャンルの区切り(機材カレンダー)。縦幅はセクション見出しと同じ、色だけ一段控えめに */
.staff-calendar .genre-row th {
  height: auto; border-right: 0; text-align: left;
  padding: 3px 0; background: #f8fafc; font-weight: 600;
}
.staff-calendar .genre-row .pin { background: #f8fafc; font-size: 0.78rem; color: var(--c-muted); }
.staff-calendar .weekday { font-size: 0.72rem; color: var(--c-muted); margin-left: 2px; }
.staff-calendar .sun .day-num, .staff-calendar .sun .weekday,
.staff-calendar .holiday .day-num, .staff-calendar .holiday .weekday { color: var(--c-danger); }
.staff-calendar .sat .day-num, .staff-calendar .sat .weekday { color: var(--c-primary); }
/* 土日祝の地色。ヘッダーのセルと、本文の背後の列レイヤー(.grid-cols)に当てる。
   colgroup で列ごと塗る手は使えない — colspan したセル(名前の行・案件の帯)の下には
   col の背景が描かれず、そこだけ列の色が途切れるため(Chromeで実測)。
   後に書いたものが勝つので 土 → 日/祝 → 今日 の順を変えないこと
   (祝日が土曜なら赤、今日ならどの曜日でも今日の色が出る) */
.staff-calendar th.sat, .grid-cols .sat { background: var(--c-bg-sat); }
.staff-calendar th.sun, .grid-cols .sun,
.staff-calendar th.holiday, .grid-cols .holiday { background: var(--c-bg-sun); }
.staff-calendar th.today, .grid-cols .today { background: var(--c-bg-today); }
.shift-chip {
  display: block; font-size: 0.72rem; background: #dbeafe; color: #1e40af;
  border: 1px solid rgba(17, 24, 39, 0.22); border-radius: 4px; padding: 0 0.3rem; margin-top: 2px;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
  overflow: hidden; max-height: 2.5em;
}
/* 帯のセル。地色・縦線は背後の列レイヤー(.grid-cols)が描くのでセルは透明。
   チップ自身は不透明なので、地色が見えるのはチップの周り(セルの余白)になる。 */
.staff-calendar .span-cell { position: relative; }
.staff-calendar .shift-span { text-align: left; position: relative; z-index: 1; }
.shift-chip:hover { text-decoration: none; }
/* カレンダーの概要ポップアップ。位置(left/top)は app.js が入れる。
   マウスを乗せてもよい(app.js が猶予タイマーで明滅を防ぐ)。長い内容は中だけスクロールする。 */
.cal-pop {
  position: fixed; z-index: 50; max-width: 340px;
  max-height: min(60vh, 480px); overflow-y: auto;
  background: #fff; color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  padding: 6px 8px; font-size: 0.78rem; line-height: 1.45;
}
.cal-pop[hidden] { display: none; }
.cal-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin: 0; }
.cal-pop dt { color: var(--c-muted); white-space: nowrap; }
/* pre-line: スタッフ連絡欄など複数行の値を改行のまま出す(値は textContent で入る) */
.cal-pop dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
/* 機材カレンダーの機材一覧: 行=セクション、1機材=背景色付きチップ */
.cal-pop .pop-line { margin: 1px 0; }
.cal-pop .pop-line-label { color: var(--c-muted); margin-right: 4px; }
.cal-pop .pop-item {
  display: inline-block; background: #e0e7ef; color: #1f2937;
  border-radius: 4px; padding: 0 5px; margin: 1px 3px 1px 0; white-space: nowrap;
}
/* カレンダーの案件概要パネル。案件チップの1クリックで開き、概要ページの<main>の中身を
   そのまま入れる(app.js)。位置はJSではなくCSSの右端固定。閉じるまで出しっぱなしで、
   別のチップをクリックすると中身だけ替わる。 */
.cal-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: var(--cal-panel-w, min(560px, 92vw));
  background: var(--c-card); color: var(--c-text);
  border-left: 1px solid var(--c-border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
}
.cal-panel[hidden] { display: none; }
/* パネル左端の幅つまみ。ドラッグで横サイズを変更(app.js。幅は端末に記憶)。
   border-left を跨いで置き、当たり判定を広めに取る */
.cal-panel-resize {
  position: absolute; left: -4px; top: 0; bottom: 0; width: 9px;
  cursor: ew-resize; touch-action: none; z-index: 1;
}
.cal-panel-resize:hover { background: rgba(37, 99, 235, 0.3); }
/* ドラッグ中はパネル内外の文字が選択されないように(カーソルも維持) */
body.cal-panel-resizing { user-select: none; cursor: ew-resize; }

/* 全体カレンダー: 帯のドラッグで担当変更/追加(承認者以上) */
.schedule-wrap[data-shift-manage] .shift-chip { cursor: grab; }
body.cal-dragging { user-select: none; cursor: grabbing; }
.month-grid[data-my-shift-new-url] .week-fg { cursor: pointer; }
.month-grid[data-my-shift-new-url] .shift-chip { cursor: pointer; }
.cal-add-menu {
  position: absolute; z-index: 70; min-width: 128px; background: #fff;
  border: 1px solid var(--c-border); border-radius: 6px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  padding: 0.25rem;
}
.cal-add-menu a {
  display: block; padding: 0.42rem 0.65rem; border-radius: 4px; color: var(--c-text);
  font-size: 0.9rem; white-space: nowrap;
}
.cal-add-menu a:hover { background: var(--c-bg); text-decoration: none; }
.cal-drag-ghost {
  position: fixed; z-index: 70; pointer-events: none;
  background: #111827; color: #fff; font-size: 0.8rem; padding: 3px 8px; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); max-width: 240px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.staff-calendar tr.cal-drop-target td, .staff-calendar tr.cal-drop-target th {
  background: rgba(37, 99, 235, 0.14);
}
/* パネルを開いている間はカレンダーの右端をパネルの幅ぶん手前で止める(app.js が body に付ける)。
   .calendar-page は calc(50% - 50vw) で画面幅いっぱいに広げているので、そこへ足し込む。
   これでスクロール領域(.schedule-wrap)がパネルの左で終わり、隠れていた日までスクロールで届く。 */
body.cal-panel-open .calendar-page { margin-right: calc(50% - 50vw + var(--cal-panel-w, min(560px, 92vw))); }
.cal-panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--c-border); background: var(--c-bg);
}
/* min-height: 0 — フレックス子は既定で中身より縮まない(min-height:auto)ため、
   これが無いと本体がパネルからはみ出してスクロールできない */
.cal-panel-body { flex: 1; min-height: 0; overflow: auto; padding: 0.75rem 1rem; }
.cal-panel-body h1 { font-size: 1.1rem; }
/* 機材カレンダーの予約チップ。予約状態で色分けする(hoverは同系で少し濃く) */
.shift-chip.eq-reserved { background: #fef3c7; color: #92400e; }
.shift-chip.eq-out { background: #fee2e2; color: #991b1b; }
.shift-chip.eq-returned { background: #e5e7eb; color: #4b5563; }
.shift-chip.eq-reserved:hover { background: #fde68a; }
.shift-chip.eq-out:hover { background: #fecaca; }
.shift-chip.eq-returned:hover { background: #d1d5db; }
/* 取込色の無いチップだけ既定のhover背景(色付きは下の .chip-c-* を活かす) */
.shift-chip:not([class*="chip-c-"]):not([class*="eq-"]):hover { background: #bfdbfe; }
/* 取込色のチップは塗り潰さず明度だけ変える */
.shift-chip[class*="chip-c-"]:hover { filter: brightness(0.92); }

/* 予実比較 */
.diff-line { font-size: 1.2rem; font-weight: bold; }
.diff-over { color: var(--c-danger); }
.diff-under { color: #065f46; }

/* 印刷ページ */
.print-page { background: #fff; }
.quote-sheet { max-width: 760px; margin: 2rem auto; padding: 1rem; }
.quote-sheet h1 { text-align: center; letter-spacing: 1rem; font-size: 1.6rem; }
.quote-meta { display: flex; justify-content: space-between; margin: 1.5rem 0; }
.client-name { font-size: 1.15rem; border-bottom: 1px solid var(--c-text); padding-bottom: 0.25rem; }
.quote-total-line { font-size: 1.15rem; border-bottom: 3px double var(--c-text); padding-bottom: 0.5rem; }
.print-table th, .print-table td { border: 1px solid #9ca3af; }
.print-table tr.grand td { font-weight: bold; }
@media print {
  .quote-sheet { margin: 0; }
}

/* 追加機能 */
.mb { margin-bottom: 0.75rem; }
.check { font-weight: normal; }
.check input { display: inline-block; width: auto; margin: 0 0.3rem 0 0; }
details > summary { cursor: pointer; list-style: none; display: inline-block; }
details > summary::-webkit-details-marker { display: none; }

/* KPI */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 720px) { .kpi-row { grid-template-columns: 1fr 1fr; } }
.kpi-card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 8px; padding: 1rem; text-align: center; }
.kpi-num { font-size: 1.5rem; font-weight: bold; color: var(--c-primary-dark); }
.kpi-label { font-size: 0.8rem; color: var(--c-muted); margin-top: 0.25rem; }

/* 通知 */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li { padding: 0.4rem 0; border-bottom: 1px solid #e5e7eb; display: flex; gap: 0.5rem; align-items: center; }
.row-unread { background: #fffbeb; }
.badge-warn { background: #fef3c7; color: #92400e; }
.badge-issued { background: #dbeafe; color: #1e40af; }
.badge-unbilled { background: #fef3c7; color: #92400e; }
.badge-paid { background: #d1fae5; color: #065f46; }
.badge-open { background: #fee2e2; color: #991b1b; }
.badge-resolved { background: #d1fae5; color: #065f46; }

/* カレンダー(イベント種別の色分け) */
.cal-prep { background: #fef3c7; color: #92400e; }
.cal-move { background: #e0e7ff; color: #3730a3; }
.cal-project { background: #fee2e2; color: #991b1b; }
.cal-teardown { background: #f3e8ff; color: #6b21a8; }
.cal-shift { background: #dbeafe; color: #1e40af; }
.cal-equipment { background: #d1fae5; color: #065f46; }
.cal-wands { background: #fce7f3; color: #9d174d; }

/* ワンズ取込のタイトル色をそのままチップの配色にする。
   CSP(public/.htaccess の default-src 'self')が inline style を禁じるため、style属性ではなく
   クラスで当てる。色を足すときは helpers.php の CHIP_COLORS にも同じ値を追加すること。
   .shift-chip と複合させて詳細度を上げ、直上の .cal-shift(既定色)に確実に勝たせている。
   文字色は背景の輝度(BT.601)で黒/白へ振り分け済み。件数は 2026-07 の実データ。 */
.shift-chip.chip-c-ff99ff { background: #ff99ff; color: #1f2937; }  /* 830件 */
.shift-chip.chip-c-ffffff { background: #ffffff; color: #1f2937; }  /* 436件 */
.shift-chip.chip-c-00b0f0 { background: #00b0f0; color: #ffffff; }  /* 229件 */
.shift-chip.chip-c-ffff00 { background: #ffff00; color: #1f2937; }  /* 183件 */
.shift-chip.chip-c-c7000b { background: #c7000b; color: #ffffff; }  /* 109件 */
.shift-chip.chip-c-b7b7b7 { background: #b7b7b7; color: #1f2937; }  /* 72件 */
.shift-chip.chip-c-00b050 { background: #00b050; color: #ffffff; }  /* 69件 */
.shift-chip.chip-c-faf9d0 { background: #faf9d0; color: #1f2937; }  /* 20件 */
.shift-chip.chip-c-8470c0 { background: #8470c0; color: #ffffff; }  /* 18件 */
.shift-chip.chip-c-ffc000 { background: #ffc000; color: #1f2937; }  /* 15件 */
.shift-chip.chip-c-ff0000 { background: #ff0000; color: #ffffff; }  /* 3件 */
.shift-chip.chip-c-0000ff { background: #0000ff; color: #ffffff; }  /* 3件 */
.shift-chip.chip-c-f6ad3c { background: #f6ad3c; color: #1f2937; }  /* 2件 */
.shift-chip.chip-c-347bd9 { background: #347bd9; color: #ffffff; }  /* 1件 */
/* チップ自体には枠線を付けない。線はスタッフと日付の境目だけに引く方針のため、
   案件・シフト1件ごとに箱の線が出ると意図に反する。
   白(ffffff=未受注)は地色と同じで塗りが見えないが、案件名の文字は読める。 */

/* パンくず */
.breadcrumbs { font-size: 0.85rem; color: var(--c-muted); margin-bottom: 0.5rem; display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.bc-sep { color: #9ca3af; }

/* 案件の進行ステッパー。幅が足りないときは折り返さず横スクロール。
   各ステップはタブへのリンク(views/projects/show.php) */
.stepper {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  gap: 0.3rem; align-items: center; margin-bottom: 1rem;
  scrollbar-width: none; /* バーは出さない(ホイール・スワイプでスクロールは可能) */
}
.stepper::-webkit-scrollbar { display: none; }
.step-chip { padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.8rem; background: #e5e7eb; color: var(--c-muted); white-space: nowrap; }
.step-chip.done { background: #d1fae5; color: #065f46; }
.step-chip.current { background: var(--c-primary); color: #fff; font-weight: 600; }
a.step-chip:hover { text-decoration: none; filter: brightness(0.93); }
.step-sep { color: #9ca3af; font-size: 0.75rem; }
.next-action {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
  padding: 0.75rem 1rem; margin-bottom: 1.25rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.next-action .na-label { font-weight: 600; }

/* やることリスト(ダッシュボード) */
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li { display: flex; gap: 0.75rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.todo-list li:last-child { border-bottom: none; }
.todo-count { min-width: 2.2rem; text-align: center; font-weight: bold; font-size: 1.05rem; color: var(--c-primary-dark); }
.todo-main { flex: 1 1 200px; }

/* 複数選択チェックボックス */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.25rem 1rem; margin: 0.25rem 0 0.9rem; }
.check-grid label { font-weight: normal; margin: 0; }
.check-grid input { display: inline-block; width: auto; margin: 0 0.35rem 0 0; }

/* ワンズ設定: 項目対応テーブル */
.map-table { margin-bottom: 1rem; }
.map-table td { vertical-align: top; }
.map-table td select, .map-table td input { margin-top: 0; }
.map-table .field-sample { font-size: 0.85rem; overflow-wrap: anywhere; }
.map-table .field-purpose { font-size: 0.85rem; overflow-wrap: anywhere; }
.map-table tr.map-sep td { background: #f8fafc; font-weight: 600; font-size: 0.85rem; color: var(--c-muted); padding: 0.35rem 0.6rem; }
/* ワンズ取得項目の表記切替トグル */
.field-mode-toggle { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0.75rem; flex-wrap: wrap; }
.field-mode-toggle .btn.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
/* フォーム別の項目定義(クリックで開閉) */
details.form-def { border: 1px solid var(--c-border); border-radius: 6px; margin-bottom: 0.5rem; background: #fff; }
details.form-def > summary {
  padding: 0.55rem 0.8rem; cursor: pointer; display: flex; align-items: center;
  gap: 0.6rem; flex-wrap: wrap; list-style: none; user-select: none;
}
details.form-def > summary::-webkit-details-marker { display: none; }
details.form-def > summary::before { content: '▸'; color: var(--c-muted); font-size: 0.8rem; }
details.form-def[open] > summary::before { content: '▾'; }
details.form-def[open] > summary { border-bottom: 1px solid var(--c-border); }
details.form-def > summary:hover { background: #f8fafc; }
.form-def-body { padding: 0.25rem 0.8rem 0.8rem; overflow-x: auto; }
.form-def-body table { margin-top: 0.5rem; }
.form-def-body code { background: #f1f5f9; padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.85rem; }

/* コンボボックス(長いセレクトの絞り込み入力一体型)
   通常のテキスト入力と見分けがつくよう、薄青の背景と右端の▼を付ける */
.combobox { position: relative; }
.combobox select { display: none; }
.combobox input.combobox-input {
  padding-right: 2rem;
  background: #f0f6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 0.7rem auto;
  border-color: #b7cdf0;
}
.combobox input.combobox-input:focus { background-color: #fff; }
.combobox input.combobox-input::placeholder { color: #7d96bd; }
.combobox-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
  background: #fff; border: 1px solid var(--c-border); border-top: none;
  border-radius: 0 0 6px 6px; max-height: 14rem; overflow-y: auto;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); display: none;
}
.combobox-item { padding: 0.4rem 0.6rem; cursor: pointer; font-weight: normal; font-size: 0.95rem; }
.combobox-item:hover, .combobox-item.active { background: #eff6ff; }
.combobox-item.selected { background: #dbeafe; font-weight: 600; }

/* モバイル調整 */
@media (max-width: 720px) {
  /* 枠は持たせない(内側余白は復活させない)。横に長い表だけスクロールできるようにする */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .boxed .card, .login-card { padding: 1rem; }
  .container { margin: 0.75rem auto; padding: 0 0.75rem; }
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=time], select, textarea { font-size: 16px; }
  .btn { padding: 0.55rem 1rem; }
  .btn-sm { padding: 0.35rem 0.7rem; }

  /* ヘッダー: タブは隠してハンバーガーメニュー化。AI・通知はメニューボタンの左に常時表示 */
  .topbar-inner { gap: 0.5rem; padding: 0.5rem 0.75rem; }
  .topnav, .subnav, .usermenu { display: none; }
  .header-actions { order: 2; margin-left: auto; gap: 0.5rem; }
  .nav-toggle { order: 3; display: inline-block; margin-left: 0; }
  .topbar.nav-open .usermenu {
    display: flex; width: 100%; margin-left: 0; flex-wrap: wrap; order: 4;
    padding: 0.6rem 0 0.75rem;
  }
  .topbar.nav-open + .mobilenav { display: block; }

  /* カレンダー(スマホ): カレンダー領域(schedule-wrap)自体を見える範囲ぴったりにして、
     その「中で」縦横スクロールする。こうすると日付ヘッダー(thead sticky)は領域上部に固定、
     タブ(セクション移動)も領域内スクロールとして機能する。
     領域の実高さは JS(fitCal)が visualViewport から測って設定。
     .card の横スクロールは無効化(横は中の wrap が持つ)。 */
  .calendar-page .card { overflow: visible; }
  /* スマホは領域内スクロールをやめ、ページごと縦スクロールする。こうすると下スクロールで
     ブラウザのツールバーが引っ込み、カレンダーが画面の一番下(物理最下部)まで表示される。
     横方向だけは領域内スクロール(overflow-x)を残す。 */
  .calendar-page .schedule-wrap { max-height: none; overflow-y: visible; }
  /* ページを下スクロールしてもタブ(セクション移動)と月移動が画面上部に固定されて隠れない。 */
  .calendar-page .calendar-nav {
    position: sticky; top: 0; z-index: 7; background: var(--c-page); margin: 0; padding: 4px 0 0;
  }
  /* top は月移動行の実高に合わせて app.js が設定(40px はフォールバック)。隙間なく直下に貼る。 */
  .calendar-page .section-jump {
    position: sticky; top: 40px; z-index: 6; background: var(--c-page); margin: 0; padding: 0 0 4px;
  }
  .calendar-page .grid-canvas { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .calendar-page .month-grid { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* フィルタ・フォーム: 入力欄は100%固定にせず伸縮させ、検索ボタンを同じ行に収める。
     min-width:0 で内容幅より縮められるようにし、ボタンがはみ出して折り返すのを防ぐ。 */
  .filter-form input[type=text] { width: auto; flex: 1 1 auto; min-width: 0; }
  .filter-form select { flex: 1 1 8rem; max-width: 100%; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn-primary { flex: 1 1 auto; }
  .approval-form { flex-wrap: wrap; width: 100%; }
  .approval-form input { flex: 1 1 140px; width: auto; }

  /* 詳細リスト: ラベルと値を縦積み */
  .detail-list { grid-template-columns: 1fr; gap: 0; }
  .detail-list dt { margin-top: 0.6rem; font-size: 0.8rem; }
  .detail-list dt:first-child { margin-top: 0; }

  /* テーブル: カード内で横スクロール(押し潰さない) */
  table { font-size: 0.85rem; }
  th, td { padding: 0.45rem 0.5rem; }
  .week { min-height: 72px; }
  .week-bars .shift-chip { font-size: 0.68rem; }
  .items-table { min-width: 640px; }
  .detail-cell { max-width: 220px; }

  /* その他 */
  .kpi-row { gap: 0.6rem; }
  .kpi-card { padding: 0.75rem 0.5rem; }
  .kpi-num { font-size: 1.25rem; }
  .quote-meta { flex-wrap: wrap; gap: 1rem; }
  .tabs a { padding: 0.45rem 0.7rem; }
  h1 { font-size: 1.25rem; }
}

/* 機材予約の編集: 機材追加の候補リストと選択済みチップ、クライアントの追加ボタン */
.input-with-btn { display: flex; gap: 0.25rem; align-items: center; }
.input-with-btn input { flex: 1 1 auto; }
.input-with-btn .btn { flex: 0 0 auto; white-space: nowrap; }
.eq-picker-candidates {
  border: 1px solid #cbd5e1; border-radius: 6px; max-height: 220px; overflow-y: auto;
  margin: 0.25rem 0; background: #fff;
}
.eq-picker-candidates .eq-cand {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 4px 8px; cursor: pointer;
}
.eq-picker-candidates .eq-cand:hover { background: #f1f5f9; }
.eq-picker-candidates .eq-cand.is-busy { cursor: not-allowed; color: var(--c-muted); background: #f8fafc; }
.eq-picker-selected { display: flex; flex-wrap: wrap; gap: 4px; margin: 0.25rem 0; }
.eq-picker-selected .eq-pick {
  display: inline-flex; align-items: center; gap: 2px;
  background: #eef2f7; border: 1px solid #cbd5e1; border-radius: 999px;
  padding: 1px 6px 1px 10px; font-size: 0.82rem;
}
.eq-picker-selected .eq-pick-remove {
  border: 0; background: transparent; cursor: pointer; font-size: 0.9rem; line-height: 1;
  padding: 2px 4px; color: var(--c-muted);
}
.eq-picker-selected .eq-pick-remove:hover { color: #dc2626; }

/* 機材割当の状態「現場確認」(onsite)の色。予約(紫)→持ち出し(赤)→現場確認(青緑)→返却(緑) */
.badge-onsite { background: #ccfbf1; color: #115e59; }
.shift-chip.eq-onsite { background: #ccfbf1; color: #115e59; }
.shift-chip.eq-onsite:hover { background: #99f6e4; }

/* 案件の機材タブ。スマホでは .card の横スクロールで見るため、列が潰れない最小幅を持たせる
   (機材・状態が左、期間・日額は右端=スクロールで見る) */
.equip-assign-table { min-width: 560px; }

/* 予約の編集: 機材リストの1行(チェック+用途+メモ)。用途は内容幅、メモが残りを使う */
.eq-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.eq-row .eq-row-name { flex: 1 1 40%; margin-bottom: 0; }
.eq-row .eq-row-usage { flex: 0 0 auto; width: auto; margin-top: 0; }
.eq-row .eq-row-memo { flex: 1 1 30%; margin-top: 0; }
/* 追加機材も既存リストと同じ行形式で縦に積む(チップの横並びをやめる) */
.eq-picker-selected { display: block; }

/* 追加・編集ボタンのドロップダウン(複数の機材予約が紐付く案件で編集先を選ぶ) */
.menu-dd { position: relative; display: inline-block; }
.menu-dd > summary { list-style: none; cursor: pointer; display: inline-block; }
.menu-dd > summary::-webkit-details-marker { display: none; }
.menu-dd-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  min-width: 240px; max-width: 90vw; background: #fff;
  border: 1px solid var(--c-border); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); padding: 4px;
}
.menu-dd-list a {
  display: block; padding: 6px 10px; border-radius: 4px; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-dd-list a:hover { background: var(--c-bg); text-decoration: none; }

/* 案件・機材タブのセクション移動ボタン行。多くても折り返さず横スクロール(バーは出さない)。
   表(.table-scroll)の横スクロールとは独立している */
.ptab-sections { scrollbar-width: none; }
.ptab-sections::-webkit-scrollbar { display: none; }

/* 表だけを横スクロールさせる入れ物(ボタン類は外に置く) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 案件・機材タブのセクション見出し行(移動ボタンの着地点)。控えめな区切り表示。
   scroll-margin-top は sticky なセクションボタン行の高さぶん(着地時に隠れないように) */
.equip-assign-table .ptab-section-row th {
  background: #f8fafc; font-weight: 600; font-size: 0.65rem; color: var(--c-muted);
  padding: 1px 0.6rem; scroll-margin-top: 44px;
}

/* 案件・機材タブ: カードの横スクロールは .table-scroll に任せ、カード自体では行わない
   (モバイルの .card { overflow-x: auto } を打ち消す。スクロール祖先があると
   セクションボタンの sticky がページ追従しなくなるため) */
.card.equip-card { overflow-x: visible; }

/* セクション移動ボタンは下へスクロールしても画面上部に付いてくる */
.equip-card .ptab-sections {
  position: sticky; top: 0; z-index: 5;
  background: var(--c-page); padding: 4px 0; margin-bottom: 0.25rem;
}

/* 案件・概要タブの実施期間欄: 1日程=1行で並べ、その場で変更できる */
.date-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0.6rem; }
.date-line, .date-line-form { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.date-line-form { flex: 1 1 auto; }
.date-line input[type=date], .date-line input[type=time], .date-line select,
.date-line-form input[type=date], .date-line-form input[type=time], .date-line-form select {
  display: inline-block; width: auto; margin-top: 0;
}
/* コンボボックス化されたセレクトは行内でも隠したまま(上の inline-block が .combobox select の
   display:none に勝ってしまい、入力欄と生のセレクトが二重に見えるのを防ぐ) */
.date-line .combobox select, .date-line-form .combobox select { display: none; }
.date-line .combobox, .date-line-form .combobox { flex: 0 1 200px; min-width: 150px; }
.date-line .combobox .combobox-input, .date-line-form .combobox .combobox-input { margin-top: 0; }
.date-line .date-note, .date-line-form .date-note {
  display: inline-block; flex: 1 1 140px; min-width: 120px; margin-top: 0;
}
.date-line-add { border-top: 1px solid #e5e7eb; padding-top: 0.6rem; }

/* 実績欄: スタッフ選択ドロップダウン(チェックボックス)と同日追加(+) */
.staff-dd .menu-dd-list { max-height: 240px; overflow-y: auto; min-width: 180px; }
.staff-dd .menu-dd-list label.check {
  display: block; margin: 0; padding: 3px 8px; border-radius: 4px;
  font-weight: normal; font-size: 0.88rem; cursor: pointer; white-space: nowrap;
}
.staff-dd .menu-dd-list label.check:hover { background: var(--c-bg); }
.staff-dd .menu-dd-list input[type=checkbox] { margin-right: 4px; }
/* 追加済みの行。日付+種別+追加ボタンの行から改行し、1件ずつ下の行に並べる
   (行頭はスタッフ選択(ALL)から始まる。左に少し下げて日付行との親子関係を示す) */
.date-line .date-entry {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  flex: 1 1 100%; margin-left: 1.5rem;
  padding-left: 0.6rem; border-left: 2px solid #e5e7eb;
}
.date-line .date-entry .date-line-form { flex: 0 1 auto; }

/* カレンダーのパネル内: 「← 戻る」はパネルでは意味を持たない(カレンダーはパネルの外に
   見えている)ので隠す。送信中は薄くして二重操作を防ぐ */
.cal-panel-body a[data-history-back] { display: none; }
.cal-panel-body.cal-panel-loading { opacity: 0.6; pointer-events: none; }

/* ---- ヘッダーのAIボタン + サイト内AIチャット ---- */
.ai-fab-btn {
  background: none; border: 1px solid #4b5563; color: #e5e7eb;
  border-radius: 6px; padding: 0.2rem 0.6rem; font-size: 0.85rem; cursor: pointer;
  font-family: inherit; line-height: 1.4; white-space: nowrap;
}
.ai-fab-btn:hover { color: #fff; border-color: #9ca3af; background: #1f2937; }

.ai-chat {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 90px));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); overflow: hidden;
}
.ai-chat[hidden] { display: none; }
.ai-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.75rem; background: #111827; color: #fff; flex: 0 0 auto;
}
.ai-chat-title { font-weight: 600; font-size: 0.95rem; }
.ai-chat-head-btns { display: flex; align-items: center; gap: 0.15rem; }
.ai-chat-close, .ai-chat-clear {
  background: none; border: 0; color: #d1d5db; line-height: 1;
  cursor: pointer; padding: 0 0.25rem;
}
.ai-chat-close { font-size: 1.3rem; }
.ai-chat-clear { font-size: 1rem; }
.ai-chat-close:hover, .ai-chat-clear:hover { color: #fff; }
.ai-chat-log {
  flex: 1 1 auto; overflow-y: auto; padding: 0.75rem;
  display: flex; flex-direction: column; gap: 0.5rem; background: #f8fafc;
}
.ai-msg {
  max-width: 85%; padding: 0.5rem 0.7rem; border-radius: 10px;
  font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.ai-msg-user { align-self: flex-end; background: var(--c-primary); color: #fff; border-bottom-right-radius: 3px; }
.ai-msg-bot { align-self: flex-start; background: #fff; border: 1px solid var(--c-border); border-bottom-left-radius: 3px; }
.ai-msg-thinking { color: var(--c-muted); font-style: italic; }
.ai-msg-error { color: var(--c-danger); border-color: #fecaca; background: #fef2f2; }
.ai-chat-input {
  flex: 0 0 auto; display: flex; gap: 0.4rem; align-items: flex-end;
  padding: 0.5rem; border-top: 1px solid var(--c-border); background: #fff;
}
.ai-chat-input textarea {
  flex: 1 1 auto; margin-top: 0; resize: none; max-height: 140px; line-height: 1.4;
}
.ai-chat-input .btn { flex: 0 0 auto; }
@media (max-width: 480px) {
  /* スマホでは画面の半分くらいの大きさにする(右下に置く。ドラッグで移動可) */
  .ai-chat { right: 8px; bottom: 8px; left: auto; width: 82vw; height: 52vh; }
}

/* AIチャット: ヘッダーは掴んで移動できる(ドラッグ中はカーソルと選択抑止) */
.ai-chat-head { cursor: move; user-select: none; touch-action: none; }
.ai-chat-head .ai-chat-close { cursor: pointer; }
.ai-chat.ai-chat-dragging { opacity: 0.92; }
.ai-chat.ai-chat-dragging .ai-chat-log { pointer-events: none; }

/* AI設定「直近の処理」の内容確認(展開式) */
.ai-detail > summary { display: inline-block; list-style: none; cursor: pointer; }
.ai-detail > summary::-webkit-details-marker { display: none; }
.ai-detail-body {
  margin: 0.35rem 0 0; padding: 0.5rem 0.6rem; background: #f8fafc;
  border: 1px solid var(--c-border); border-radius: 6px;
  white-space: pre-wrap; word-break: break-word; font-size: 0.85rem;
  max-width: 520px; max-height: 240px; overflow: auto;
}