:root {
  --surface-0:#f1efe8; --surface-1:#f7f6f2; --surface-2:#ffffff;
  --text-primary:#0b0b0b; --text-secondary:#5f5e5a; --text-muted:#898781;
  --text-danger:#a32d2d; --text-warning:#854f0b; --text-accent:#185fa5;
  --border:#e1e0d9; --border-accent:#185fa5;
  --fill-danger:#e24b4a; --fill-warning:#ef9f27; --fill-success:#1f8a4c; --fill-success-soft:#e3f3e9;
  --tier-ok:#d7edf5; --tier-ok-text:#0b0b0b;
  --tier-warning:#fbedb0; --tier-warning-text:#0b0b0b;
  --tier-danger:#f7c9c5; --tier-danger-text:#5c1c17;
  --tier-critical:#e0413c; --tier-critical-text:#ffffff;
  --tier-studless:#dedcd3; --tier-studless-text:#3a3830;
  --radius:8px; --font-sans:system-ui,-apple-system,sans-serif; --font-mono:ui-monospace,monospace;
}
* { box-sizing:border-box; }
body { font-family:var(--font-sans); background:var(--surface-0); color:var(--text-primary); margin:0; padding:24px; }
/* モーダルが開いている間、背景のページ(特にスマホでは横スクロールする.board)が
   一緒にスクロールしてしまうと、モーダル内を縦にスクロールしようとした指の動きが
   背景にも伝わって横に揺れて見えるため、開いている間は背景側のスクロールを止める */
body.modalOpenLock { overflow:hidden; }
/* 管理画面はPCの大画面で横に間延びして見づらくならないよう、読みやすい幅に収めて中央に寄せる */
body.adminPage { max-width:1000px; margin:0 auto; }
button, select, input, textarea { font-family:var(--font-sans); font-size:13px; padding:6px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface-2); }
button { cursor:pointer; }
button.primary { border-color:var(--border-accent); color:var(--text-accent); }
/* 「設定変更を保存」ボタン等、押すまで未保存の変更がある事に気付いてもらうための強調表示 */
button.primary.unsaved { background:var(--fill-warning); border-color:var(--fill-warning); color:#fff; font-weight:700; }
button.danger { border-color:var(--fill-danger); color:var(--text-danger); }
button.accentGray { border-color:#c9c6ba; color:var(--text-secondary); background:#ece9e1; font-weight:600; }
button.accentGray:hover { background:#e2ded2; }
h2 { font-size:16px; font-weight:500; }
a { color:var(--text-accent); text-decoration:none; }
/* 認証付きでファイルを取得してから開く必要がある箇所(通常のaタグではトークンを送れないため)の見た目 */
.linkLikeBtn { background:none; border:none; padding:0; color:var(--text-accent); text-decoration:underline; cursor:pointer; font-size:inherit; }

.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.topbar .left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* ページごとの「設定」ボタン。表題のすぐ右に置き、全ページで同じアイコン・見た目・位置に揃える */
.pageSettingsBtn { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--text-secondary); text-decoration:none; cursor:pointer; touch-action:manipulation; }
.pageSettingsBtn:hover { background:var(--surface-1); color:var(--text-accent); border-color:var(--text-accent); }
.pageSettingsBtn svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.topbar .right { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); }
/* 縦に長いページが多いので、上部の「ボードへ戻る」等を
   常に見える位置に固定し、スクロールしてもすぐ戻れるようにする */
.topbar { position:sticky; top:0; z-index:50; background:var(--surface-0); padding:12px 0; margin:-12px 0 16px; border-bottom:1px solid var(--border); }
.legend { display:flex; gap:16px; font-size:12px; color:var(--text-secondary); margin-bottom:16px; flex-wrap:wrap; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }

.summaryBar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.summaryBar .pill { font-size:12px; padding:5px 12px; border-radius:20px; font-weight:600; background:var(--surface-1); }
.summaryBar .pill.warning { background:var(--tier-warning); color:var(--tier-warning-text); }
.summaryBar .pill.danger { background:var(--tier-danger); color:var(--tier-danger-text); }
.summaryBar .pill.critical { background:var(--tier-critical); color:var(--tier-critical-text); }

.toolbar { display:flex; gap:12px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }

.board { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; align-items:flex-start; }
.column { flex:0 0 210px; background:var(--surface-1); border-radius:var(--radius); padding:8px; padding-bottom:28px; max-height:70vh; max-height:70svh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.column-header { font-size:12px; color:var(--text-secondary); font-weight:500; margin-bottom:8px; display:flex; justify-content:space-between; position:sticky; top:0; z-index:2; background:var(--surface-1); padding-bottom:4px; }
.card { position:relative; border:1px solid rgba(0,0,0,0.08); border-radius:8px; padding:7px 9px; margin-bottom:6px; cursor:pointer; background:var(--tier-ok); color:var(--tier-ok-text); touch-action:manipulation; }
.cardChangedDot { position:absolute; top:-4px; right:-4px; width:10px; height:10px; border-radius:50%; background:var(--fill-danger); border:2px solid var(--surface-1); box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.card.tier-warning { background:var(--tier-warning); color:var(--tier-warning-text); }
.card.tier-danger { background:var(--tier-danger); color:var(--tier-danger-text); }
.card.tier-critical { background:var(--tier-critical); color:var(--tier-critical-text); }
/* 「見積のみ」チェックが入ったカード(電話だけの問い合わせ等、本当に来店するか未確定)だけに付ける。
   本当に入庫が決まった車両と見分けられるよう、アラート色・入庫理由色より優先して常に白背景にする
   (どれだけ日数が経っても色を変えない。車種・ナンバーが未入力なだけで見積のみでない車両は対象外=
   通常どおり水色から始まりアラート色に変化してよい、という社長の約束を守ること)。
   同じ.card.tier-*との詳細度は同じなので、この動作を保つには必ずtier系ルールより後ろに書くこと */
.card.tentative { background:var(--surface-2); color:var(--text-primary); border-color:rgba(0,0,0,0.15); }
/* 秋・春の寒波予報時に急増するスタッドレスタイヤ交換作業のカード。見積のみ(白)と見分けられるよう
   薄めのグレーにする。上と同じ理由でtier系ルールより後ろに書くこと */
.card.studlessTire { background:var(--tier-studless); color:var(--tier-studless-text); border-color:rgba(0,0,0,0.12); }
/* 仮登録カード・スタッドレスタイヤ作業カードは、それぞれ2件以上並んだステージでは
   場所を取りすぎないよう重ねて表示し、カーソルを乗せている間だけ1枚ずつ広げて内容を確認できるようにする
   (.stackableは両方の種類に共通して付くクラス。個々の背景色は上の.tentative/.studlessTireが決める) */
.cardStack { position:relative; }
.cardStack .card.stackable { margin-bottom:0; box-shadow:0 1px 3px rgba(0,0,0,0.18); transition:margin-top .22s ease, box-shadow .22s ease; }
/* カード自体の高さは内容(入庫ボタンの有無等)で変わるため、実測した高さをJS側で
   --collapsed-margin に入れ、常に一定の「めくれ」だけが見えるようにする */
.cardStack .card.stackable:not(:first-child) { margin-top:var(--collapsed-margin, -42px); }
.cardStack .card.stackable:nth-child(1) { z-index:5; }
.cardStack .card.stackable:nth-child(2) { z-index:4; }
.cardStack .card.stackable:nth-child(3) { z-index:3; }
.cardStack .card.stackable:nth-child(4) { z-index:2; }
.cardStack .card.stackable:nth-child(n+5) { z-index:1; }
/* タッチ端末はホバーが無いため、タップで.expandedを付け外しして同じ広がった見た目にする(JS側で制御) */
.cardStack:hover .card.stackable:not(:first-child),
.cardStack.expanded .card.stackable:not(:first-child) { margin-top:6px; box-shadow:0 1px 2px rgba(0,0,0,0.1); }
.cardStack:hover .card.stackable,
.cardStack.expanded .card.stackable { margin-bottom:6px; }
/* 右上は既存の「変更あり」「未対応コメント」バッジやタイヤアイコンと被りやすいため、右下に配置する */
.cardStackBadge { position:absolute; bottom:-6px; right:-6px; z-index:6; font-size:10px; font-weight:700; padding:2px 6px; border-radius:10px; background:var(--text-accent); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.3); pointer-events:none; transition:opacity .15s ease; }
.cardStack:hover .cardStackBadge,
.cardStack.expanded .cardStackBadge { opacity:0; }
/* スタッドレスタイヤ作業のカードの左上に、枠から少しはみ出す形で付けるタイヤの目印(右上は受付票などのボタンの場所のため、全社共通で左上) */
.studlessTireIcon { position:absolute; top:-9px; left:-8px; width:26px; height:26px; z-index:4; pointer-events:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.35)); }
.studlessTireIcon svg { display:block; width:100%; height:100%; }
/* 登録直後・ステージ移動直後の車両カードを、しばらくの間目立たせる(青いリングがゆっくり点滅) */
.card.justChanged { animation:cardJustChangedPulse 1.8s ease-in-out infinite; }
@keyframes cardJustChangedPulse { 0%, 100% { box-shadow:0 0 0 0 rgba(230,180,20,0.65); } 50% { box-shadow:0 0 0 5px rgba(230,180,20,0); } }
/* お客様専用ページから直接コメントが届いた車両カードは、対応(返信または「対応済にする」)される
   まで消えない強い赤の点滅+バッジで目立たせる。単にカードを開いて見ただけでは消えない */
.card.customerAlert { animation:cardCustomerAlertPulse 1.5s ease-in-out infinite; }
@keyframes cardCustomerAlertPulse {
  0%, 100% { box-shadow:inset 0 0 0 3px rgba(226,75,74,0.55), 0 0 0 0 rgba(226,75,74,0.5); }
  50% { box-shadow:inset 0 0 0 3px rgba(226,75,74,1), 0 0 12px 3px rgba(226,75,74,0.65); }
}
.customerAlertBadge { position:absolute; top:-7px; left:-7px; width:22px; height:22px; border-radius:50%; background:var(--fill-danger); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 5px rgba(0,0,0,0.4); z-index:3; animation:customerAlertBadgePop 1.5s ease-in-out infinite; }
@keyframes customerAlertBadgePop { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.15); } }
/* 新規入庫を登録した直後、その場ですっと現れたことが分かるように1回だけ再生する */
.card.cardSlideIn { animation:cardSlideInAnim .5s ease-out; }
@keyframes cardSlideInAnim { from { transform:translateY(-16px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.card .model { font-size:13px; font-weight:600; margin-bottom:2px; }
.card .model .attachIcon { vertical-align:-1px; margin-left:4px; opacity:1; color:var(--text-accent); }
.card.tier-critical .model .attachIcon { color:#fff; }
.card .model .complexityIcon { vertical-align:-2px; margin-left:4px; color:var(--fill-warning); }
.card.tier-critical .model .complexityIcon { color:#fff; }
.card .model .loanerIcon { vertical-align:-2px; margin-left:4px; color:var(--text-accent); }
.card.tier-critical .model .loanerIcon { color:#fff; }
/* 貸出中の代車自体の車検満了が近い場合の強調(30日=黄、15日=赤、1週間以内=大きく脈動する赤) */
.card .model .loanerIcon.warning { color:var(--fill-warning); }
.card .model .loanerIcon.danger { color:var(--fill-danger); }
.card .model .loanerIcon.critical { color:var(--fill-danger); animation:aiInsightPulse 1.4s ease-in-out infinite; }
.card.tier-critical .model .loanerIcon.danger,
.card.tier-critical .model .loanerIcon.critical { color:#fff; }
/* 見積のみカード(常に白背景)は、たとえ長期放置でtier-criticalの赤色判定になっていても、
   白背景用の通常のアイコン色に戻す(上のtier-critical用の白アイコンのままだと見えなくなるため) */
.card.tentative .model .attachIcon { color:var(--text-accent); }
.card.tentative .model .complexityIcon { color:var(--fill-warning); }
.card.tentative .model .loanerIcon { color:var(--text-accent); }
.card.tentative .model .loanerIcon.warning { color:var(--fill-warning); }
.card.tentative .model .loanerIcon.danger,
.card.tentative .model .loanerIcon.critical { color:var(--fill-danger); }
/* アイコンの色変化だけでは見落とされやすいため、隣に点灯する印を追加する。
   カーソルを乗せると詳しいアラート内容がポップアップで見える(app.jsで配線) */
.loanerAlertDot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:3px; vertical-align:middle; cursor:pointer; background:var(--fill-warning); box-shadow:0 0 0 1.5px var(--surface-2); }
.loanerAlertDot.danger { width:9px; height:9px; background:var(--fill-danger); animation:aiInsightPulse 1.6s ease-in-out infinite; }
.loanerAlertDot.critical { width:12px; height:12px; background:var(--fill-danger); animation:aiInsightPulse 1s ease-in-out infinite; }
.card .owner { font-size:11px; opacity:0.85; margin-bottom:4px; }
.card .tag { font-size:10px; padding:1px 7px; border-radius:10px; display:inline-block; }
/* 「入庫理由」配色モードでは、カード全体が理由の色になるため小さいタグでは埋もれてしまう。
   代わりに理由名をアイコン付きの小さなバッジで、文字の大きさはそのままにはっきり目立たせる
   (カード自身のcolor設定を継承するので、どの理由色でも常に読みやすい) */
.card .reasonHighlight { display:inline-flex; align-items:center; gap:4px; width:fit-content; font-size:13px; font-weight:800; letter-spacing:0.2px; margin-bottom:3px; padding:2px 8px 2px 6px; border-radius:999px; background:rgba(0,0,0,0.09); }
.card .reasonHighlight svg { flex-shrink:0; }
.card .cardRow { display:flex; justify-content:space-between; align-items:flex-start; gap:4px; }
.card .cardMain { min-width:0; flex:1 1 auto; }
.card .cardSide { flex:0 0 auto; max-width:70px; text-align:right; font-size:10px; line-height:1.3; }
.card .cardSide .sideItem { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:2px; opacity:0.85; }
.card .cardSide .sideStaff { font-weight:700; opacity:1; }
.card .cardSide .sidePlate { font-family:var(--font-mono); }
.card .cardSide .sideDays { opacity:0.7; }
/* 予約・受付ステージの入庫予定日: 本日に近いほど強く目立たせる(遠い順に薄い→黄→赤→点滅する濃い赤) */
.card .cardSide .sideDays.sideDaysWarn { opacity:1; font-weight:700; background:var(--tier-warning); color:var(--tier-warning-text); padding:0 4px; border-radius:4px; display:inline-block; }
.card .cardSide .sideDays.sideDaysDanger { opacity:1; font-weight:700; background:var(--tier-danger); color:var(--tier-danger-text); padding:0 4px; border-radius:4px; display:inline-block; }
.card .cardSide .sideDays.sideDaysCritical { opacity:1; font-weight:700; background:var(--tier-critical); color:var(--tier-critical-text); padding:0 4px; border-radius:4px; display:inline-block; animation:aiInsightPulse 1.2s ease-in-out infinite; }
.card .cardSide .sideLocation { font-weight:700; opacity:1; display:inline-block; padding:0 4px; border-radius:4px; }
.card .deliverBtn, .card .intakeBtn { display:block; width:100%; margin-top:4px; padding:2px 0; font-size:10px; line-height:1.4; font-weight:600; border:1px solid var(--border-accent); background:var(--surface-2); color:var(--text-accent); border-radius:5px; cursor:pointer; touch-action:manipulation; }
/* 点検チェックシート(コムラテック株式会社専用)をカードからワンタップで開くボタン。未記入は枠線だけの
   アイコン、記入済みは緑色で塗りつぶし、一目で状態が分かるようにする(タップで何度でも再編集できる) */
/* スタッドレスタイヤの目印(.studlessTireIcon)と同じ、カード右上のはみ出す位置に置く
   (以前は右下でカードの記載内容に被っていたため、社長のご指摘で移動した) */
.inspectionChecklistCardBtn, .receptionSheetCardBtn { position:absolute; top:-9px; right:-8px; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; touch-action:manipulation; z-index:4; opacity:0.5; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
/* 未記入は薄く、記入済みは濃くはっきり見せる(社長のご指摘) */
.inspectionChecklistCardBtn.done, .receptionSheetCardBtn.done { opacity:1; border-color:var(--fill-success); background:var(--fill-success-soft); color:var(--fill-success); }
/* 濃い赤(長期アラート)のカードでは、白いアイコンが白い背景に隠れて見えなくなっていたため、
   背景も濃い色にして枠・チェックマークの白がはっきり見えるようにする(社長からのご指摘) */
.card.tier-critical .inspectionChecklistCardBtn:not(.done), .card.tier-critical .receptionSheetCardBtn:not(.done) { border-color:rgba(255,255,255,0.7); background:rgba(0,0,0,0.4); color:#fff; }
/* 点検チェックシート(コムラテック株式会社専用)が使える会社の管理画面でだけ、関連するタブ・列を出す */
body:not(.icEnabled) .icNotifyCol, body:not(.icEnabled) #tab-engineOilTypes { display:none !important; }
/* カレンダー機能が使える会社の管理画面でだけ、天気の地域設定を出す */
body:not(.calEnabled) .calEnabledOnly { display:none !important; }
.dayOffPolicySentence { font-size:13.5px; line-height:2.2; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.dayOffWeekdayChips { display:inline-flex; gap:3px; }
.dayOffWeekdayChip { font-size:11.5px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-secondary); cursor:pointer; }
.dayOffWeekdayChip.active { border-color:var(--text-accent); background:var(--text-accent); color:#fff; }

/* 各所の既存アイコン・見出し等にカーソルオン(スマホは長押し)すると出る説明の吹き出し。
   別に目印のマーク等は付けず、その要素自体にカーソルを乗せるだけで出る(public/js/helpTip.js) */
.helpTipPopover { display:none; position:fixed; z-index:300; max-width:260px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.25); padding:10px 12px; font-size:12.5px; line-height:1.5; }
.helpTipPopover .helpTipMeaning { font-weight:700; margin-bottom:3px; }
.helpTipPopover .helpTipDesc { font-weight:400; color:var(--text-secondary); }
.helpTipPopover a { display:inline-block; margin-top:6px; font-size:11.5px; }

/* 管理画面「アラート設定」タブ: 車両カードアラート/AIの気づき/カレンダー設定を見た目で区切る */
.alertSection { border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-top:14px; max-width:420px; }
.alertSection h3 { font-size:13.5px; margin:0; display:flex; align-items:center; cursor:help; }

.cardPopover { display:none; position:fixed; z-index:100; width:300px; max-width:90vw; max-height:70vh; overflow-y:auto; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.25); padding:12px 14px; }
.popTitle { font-size:14px; font-weight:600; margin-bottom:2px; }
.popSub { font-size:12px; color:var(--text-secondary); font-family:var(--font-mono); margin-bottom:8px; }
.popRow { font-size:12px; color:var(--text-secondary); margin-bottom:4px; }
.popRow b { color:var(--text-primary); font-weight:500; }
.popMemo { font-size:12px; white-space:pre-wrap; background:var(--surface-1); border-radius:6px; padding:6px 8px; margin-top:6px; }
.popRowChip { border-radius:8px; padding:6px 10px; margin-bottom:5px; font-size:12.5px; font-weight:600; }
.popRowChip:last-child { margin-bottom:0; }
.cardPopover .popRowLink { cursor:pointer; padding:5px 6px; margin:0 -6px 2px; border-radius:6px; touch-action:manipulation; }
.cardPopover .popRowLink:hover { background:var(--surface-1); }
.cardPopover .popEditBtn { display:block; width:100%; margin-top:8px; touch-action:manipulation; }
.cardPopover .popEditBtn:disabled { opacity:0.5; cursor:not-allowed; }

.section { margin-top:1.5rem; border-top:1px solid var(--border); padding-top:1rem; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.chip { font-size:12px; padding:4px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:6px; }
.chip .x { cursor:pointer; font-weight:bold; }
.rentalBadge { display:inline-block; font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; margin-left:6px; background:#fdf1de; color:var(--text-warning); vertical-align:middle; }
.loanerAlertRow { padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; }
.loanerAlertRow.warning { background:var(--tier-warning); color:var(--tier-warning-text); }
.loanerAlertRow.danger { background:var(--tier-danger); color:var(--tier-danger-text); }
.loanerAlertRow.critical { background:var(--tier-critical); color:var(--tier-critical-text); font-weight:700; }

/* 代車マスタ管理のカード表示。車両進捗ボードのカードと同じ感覚でひと目で一覧できるよう、
   詳細(走行距離・オイル交換・タイヤ等)はカード面には出さず「編集」ボタンから編集画面で見る */
/* 代車マスタ管理は「貸出中の代車」の予定表と同じ横一列の表形式(dataTable)で表示する。
   以前は格子状のカード表示だったが、目的の車を探しにくいとの声を受けて一覧表に変更した */
.loanerCardStatus { font-weight:600; }
.loanerCardStatus.available { color:var(--text-accent); }
.loanerCardStatus.loaned { color:var(--text-secondary); }
/* タイヤ溝残量など、しきい値を下回った数値をひと目で目立たせる小さなバッジ(車検アラートの色と揃えている) */
.metricBadge { display:inline-block; font-size:11px; font-weight:700; padding:1px 6px; border-radius:10px; }
.metricBadge.warning { background:var(--tier-warning); color:var(--tier-warning-text); }
.metricBadge.critical { background:var(--tier-critical); color:var(--tier-critical-text); }
.loanerEditBtn { width:100%; font-size:12px; padding:6px 0; margin-top:6px; }
/* 代車カードの車検アラート。丸い点だけでは気づきにくいとの声を受け、アイコン+「check!!」の
   バッジ表示にした。黄色(warning)は他の黄色(--tier-warning)より濃くして視認性を上げている */
.loanerAlertIcon { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800; letter-spacing:0.01em; padding:2px 7px 2px 6px; border-radius:999px; line-height:1.5; flex-shrink:0; }
.loanerAlertIcon svg { flex-shrink:0; }
.loanerAlertIcon.warning { background:#f0b100; color:#2b1d00; }
.loanerAlertIcon.danger { background:var(--tier-danger); color:var(--tier-danger-text); }
.loanerAlertIcon.critical { background:var(--tier-critical); color:var(--tier-critical-text); animation:aiInsightPulse 1.2s ease-in-out infinite; }

/* 管理者確認要カードの見出し用バッジ(数値・アラート種別を、素のテキストではなく丸みのある
   アイコン風の塊として見せることで、直感的にタップできる要素だと分かるようにする) */
.ptBadge { display:inline-flex; align-items:center; gap:4px; background:var(--border-accent); color:#fff; font-weight:800; font-size:20px; line-height:1; padding:7px 8px 7px 14px; border-radius:999px; }
.ptUnit { display:inline-block; font-size:10px; font-weight:800; letter-spacing:0.02em; padding:3px 7px; border-radius:999px; line-height:1.4; }
.ptBadge .ptUnit { background:rgba(255,255,255,0.28); }
.alertBadge { display:inline-flex; align-items:center; gap:6px; background:var(--fill-warning); color:#fff; font-weight:800; font-size:14px; line-height:1; padding:8px 14px; border-radius:999px; }
.alertBadge svg { flex:0 0 auto; }

/* ポイント明細の「区分」(フロント/サービス)を、色とアイコンで一目で区別できるようにする */
.categoryBadge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.categoryBadge svg { flex:0 0 auto; }
.categoryBadge.front { background:var(--tier-ok); color:var(--tier-ok-text); }
.categoryBadge.service { background:var(--tier-warning); color:var(--tier-warning-text); }
.categoryBadge.support { background:#e3dcf7; color:#3a2b6b; }
.row { display:flex; gap:8px; }
.row > input { flex:1; }

.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.statCard { background:var(--surface-1); border-radius:var(--radius); padding:1rem; }
.statCard .label { font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.statCard .big { font-size:24px; font-weight:500; margin-bottom:6px; }
.statCard .big small { font-size:12px; color:var(--text-muted); font-weight:400; }

.staffSectionCompact { margin-top:0.75rem; padding-top:0.5rem; }
.staffSectionHeader { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.staffSectionHeader h2 { margin:0; font-size:13px; color:var(--text-secondary); font-weight:500; }
.staffSectionHeader a { font-size:12px; }
.staffCompact { display:flex; flex-wrap:wrap; gap:6px; }
.staffChip { font-size:12px; padding:4px 10px; border-radius:20px; background:var(--surface-1); cursor:pointer; touch-action:manipulation; }
.staffChip b { font-weight:600; color:var(--text-accent); }

/* 車両カードの編集画面いちばん下、誤操作を避けるため他の操作ボタンとは離して単独の行に置く削除ボタン。
   目立ちすぎないよう、背景の無い小さな文字リンク風にしている */
.deleteVehicleBtn { display:block; margin:14px auto 0; padding:4px 8px; background:none; border:none; color:var(--text-secondary); font-weight:400; font-size:11px; cursor:pointer; touch-action:manipulation; text-decoration:underline; }
.deleteVehicleBtn:hover { color:var(--fill-danger); }

.modalWrap { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); align-items:center; justify-content:center; z-index:50; touch-action:manipulation; }
.modalWrap.open { display:flex; }
/* 確認ダイアログ・スタッフ選択は、他のモーダル(車両編集・新規登録など)の上に開くことがあるため、
   同じz-index:50同士だとDOM上の並び順次第で背面に隠れてしまう。常に最前面に出す */
#confirmModalWrap, #staffPickModalWrap { z-index:55; }
.modalBox { background:var(--surface-2); border-radius:12px; border:1px solid var(--border); padding:1.25rem; width:300px; max-height:90vh; overflow-y:auto; }
.modalBox label { display:block; font-size:12px; color:var(--text-secondary); margin-top:6px; }
.modalBox select, .modalBox input, .modalBox textarea { width:100%; margin-bottom:6px; font-family:var(--font-sans); resize:vertical; }
.modalTitle { font-size:15px; font-weight:500; margin-bottom:2px; }
.modalSub { font-size:12px; color:var(--text-secondary); font-family:var(--font-mono); margin-bottom:14px; }
.modalActions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:12px; }
/* 「メンテ記録」ボタンは他の項目に埋もれて気づかれにくかったため薄い色を付け、押した先の
   入力画面(モーダル)の背景も同じ色に揃えることで、別の画面に切り替わったことが伝わるようにする */
.loanerMaintenanceBtn { background:#e3f3ef; border-color:#8ec9bb; color:#1f6e5c; }
.loanerMaintenanceModalBox { background:#e3f3ef; }

.attachmentsSection { margin-top:8px; border-top:1px solid var(--border); padding-top:8px; }
.attachmentsSection > label { margin-top:0; }
.attachmentsList { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.attachmentsList:empty { display:none; }
.attachmentThumb { position:relative; width:64px; height:64px; border-radius:6px; overflow:hidden; background:var(--surface-1); border:1px solid var(--border); cursor:pointer; touch-action:manipulation; }
.attachmentThumb img { width:100%; height:100%; object-fit:cover; display:block; }
.attachmentThumb .thumbLoading { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:10px; color:var(--text-muted); }
.attachmentThumbDoc { display:flex; align-items:center; justify-content:center; color:var(--text-accent); }
/* 写真は「写真+その場での説明」をひとまとまりのカードとして見せる(お客様専用ページと同じ考え方) */
.attachmentPhotoCard { width:100%; display:flex; flex-direction:column; gap:6px; background:var(--surface-1); border-radius:8px; padding:8px; }
.attachmentPhotoCard.internal, .attachmentDocCard.internal { background:#fdf3e3; }
.attachmentPhotoCard .attachmentThumb { width:100%; height:150px; border-radius:6px; }
.attachmentCaptionRow { display:flex; gap:6px; align-items:flex-end; }
/* 長い説明文でも右に流れず、書いた分だけ枠が下に伸びて全文見える(auto-grow用にresize/overflowは殺す) */
.attachmentCaptionInput { flex:1; font-size:12px; padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); font-family:inherit; line-height:1.5; resize:none; overflow:hidden; min-height:29px; }
.attachmentCaptionSaveBtn { flex:none; font-size:11px; padding:6px 10px; white-space:nowrap; }
.attachmentCaptionText { font-size:12px; color:var(--text-secondary); padding:0 2px; white-space:pre-wrap; }
/* 管理者専用: 保存済みの説明文・メモ本文の書き直し(整理目的。ポイントは新たに付かない) */
.attachmentCaptionDisplay { display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; }
.attachmentEditToggleBtn, .attachmentCaptionEditToggleBtn { flex:none; font-size:10.5px; padding:2px 8px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-secondary); cursor:pointer; touch-action:manipulation; margin-top:4px; }
.attachmentNoteBody { white-space:pre-wrap; }
.attachmentNoteEditRow { margin-top:6px; display:flex; flex-direction:column; gap:6px; }
.attachmentNoteEditInput { width:100%; box-sizing:border-box; font-size:12px; padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); font-family:inherit; line-height:1.5; }
.attachmentNoteEditActions { display:flex; gap:6px; justify-content:flex-end; }
.attachmentNoteEditActions button { font-size:11px; padding:5px 10px; }
/* PDF等の書類は、写真カードと同じ枠組みでサムネイルの代わりにアイコン+ファイル名のリンクを見せる */
.attachmentDocCard { position:relative; width:100%; display:flex; flex-direction:column; gap:6px; background:var(--surface-1); border-radius:8px; padding:8px; }
.attachmentDocLink { display:flex; align-items:center; gap:8px; padding:8px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-accent); text-decoration:none; cursor:pointer; touch-action:manipulation; }
.attachmentDocLink svg { flex-shrink:0; }
.attachmentDocName { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachmentNote { position:relative; width:100%; font-size:12px; background:var(--surface-1); border-radius:6px; padding:6px 26px 6px 8px; white-space:pre-wrap; }
.attachmentNote.internal { background:#fdf3e3; }
.noteMeta { font-size:10px; color:var(--text-muted); margin-bottom:2px; display:flex; align-items:center; gap:4px; }
.noteSourceBadge { display:inline-block; font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:8px; }
.noteSourceBadge.customer { background:#e6f1fb; color:#0c447c; }
.noteSourceBadge.internal { background:#fde8d0; color:#8a4a05; }
.noteSourceBadge.department { background:#eaf3de; color:#3a5c1e; }
.plateCandidates { border:1px solid var(--border); border-radius:8px; background:var(--surface-1); margin:-2px 0 10px; overflow:hidden; }
.plateCandidateItem { padding:8px 10px; font-size:12.5px; cursor:pointer; border-bottom:1px solid var(--border); }
.plateCandidateItem:last-child { border-bottom:none; }
.plateCandidateItem:hover { background:var(--surface-2); }
.plateCandidateItem .pcName { font-weight:700; }
.plateCandidateItem .pcSub { color:var(--text-muted); font-size:11px; margin-top:1px; }
/* 「車両情報なし(名前のみ)」の候補は、実際の車両履歴と見分けやすいよう控えめな背景にする */
.plateCandidateItem.plateCandidateNoVehicle { background:var(--surface-1); }
.plateCandidateItem.plateCandidateNoVehicle:hover { background:var(--surface-2); }
.plateCandidateItem.plateCandidateNoVehicle .pcName { font-weight:600; }
.vehicleDataBox { border:1px solid var(--border); border-radius:8px; background:var(--surface-1); padding:10px 12px; margin:-2px 0 10px; font-size:12.5px; cursor:pointer; }
.vehicleDataBox .vdRow { display:flex; gap:6px; padding:3px 0; }
.vehicleDataBox .vdLabel { color:var(--text-muted); min-width:6em; flex-shrink:0; }
.vehicleDataBox .vdCandidate { border-top:1px solid var(--border); margin-top:6px; padding-top:6px; }
.noteSourceToggle { display:flex; gap:6px; margin-bottom:6px; }
.noteSourceToggle .noteSourceBtn { flex:1; font-size:11px; padding:6px 4px; border-radius:6px; border:1px solid var(--border); background:var(--surface-1); color:var(--text-secondary); cursor:pointer; touch-action:manipulation; }
.noteSourceToggle .noteSourceBtn.active { background:var(--text-accent); border-color:var(--text-accent); color:#fff; font-weight:700; }
.attachmentDelBtn { position:absolute; top:2px; right:2px; width:18px; height:18px; line-height:16px; padding:0; text-align:center; font-size:12px; border-radius:50%; border:none; background:rgba(0,0,0,0.55); color:#fff; cursor:pointer; touch-action:manipulation; }
.attachmentAddRow { display:flex; gap:6px; }
.attachmentAddRow button { flex:1; font-size:12px; padding:6px 0; }
#editNoteInputBox { margin-top:6px; }
/* 未確認の変更(メモ変更・新しい写真/メモ)があった箇所を、編集画面で赤枠で強調する */
.fieldChangedHighlight { border:2px solid var(--fill-danger) !important; }
.attachmentNoteActions { display:flex; gap:6px; justify-content:flex-end; margin-top:4px; }
/* 写真・PDFを選んでから実際に保存するまでのプレビュー欄。保存前であることが分かるよう
   枠線で囲み、保存後は同じ場所に目立つ完了メッセージを一瞬表示してから消す */
.photoPendingBox { margin-bottom:8px; padding:8px; border:1.5px solid var(--border-accent); border-radius:8px; background:var(--surface-1); }
.photoPendingThumbs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.photoPendingThumb { width:56px; height:56px; object-fit:cover; border-radius:6px; border:1px solid var(--border); display:block; cursor:zoom-in; touch-action:manipulation; }
/* まとめて選んだ写真の並び替え(社長のご依頼: ブラウザが返す順番と実際に選んだ順が一致しないことが
   あるため、番号を振って「◀ ▶」で直せるようにする。PC・スマホ共通のシンプルな操作にするため
   ドラッグ&ドロップではなくボタンにしている) */
.photoPendingItem { display:flex; flex-direction:column; align-items:center; gap:3px; width:56px; }
.stagedPhotoWrap { display:flex; flex-direction:column; align-items:center; gap:3px; width:64px; }
.stagedOrderRow { display:flex; flex-direction:column; align-items:center; gap:2px; }
.photoPendingOrderBadge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--text-accent); color:#fff; font-size:10.5px; font-weight:700; line-height:1; }
.orderMoveBtns { display:flex; gap:2px; }
.photoPendingMoveBtn, .stagedMoveBtn { width:26px; height:22px; padding:0; font-size:11px; line-height:1; border-radius:5px; cursor:pointer; touch-action:manipulation; }
.photoPendingMoveBtn:disabled, .stagedMoveBtn:disabled { opacity:0.3; cursor:default; }
/* 写真の説明文をAIに提案してもらうボタン。押せる状態がひと目で分かるようアクセント色にする */
.aiSuggestBtn { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; border-color:var(--border-accent); color:var(--text-accent); font-weight:700; font-size:12px; padding:6px 10px; }
.aiSuggestBtn:disabled { opacity:0.5; cursor:not-allowed; }
/* AIが実際に判定・生成した内容であることを示す小さな印(ルールベースの自動化とは区別するため、
   本当にAIが関わっている箇所にだけ付ける)。ボタンではなく単なる目印として使う */
.aiTag { display:inline-flex; align-items:center; gap:3px; color:var(--text-accent); font-weight:700; font-size:11px; white-space:nowrap; vertical-align:middle; }
.aiTag svg { flex:none; }
/* 車両ボード上の「備忘メモ」。ふだんは小さなボタンだけで、押した時だけ付箋のように開く
   (常時表示のメモ欄にしてボードを圧迫しないため) */
.boardMemoWrap { position:relative; margin-left:auto; }
.boardMemoToggleBtn { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text-secondary); position:relative; }
.boardMemoToggleBtn:hover { color:var(--text-accent); border-color:var(--border-accent); }
.boardMemoCount { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--fill-warning); color:#fff; font-size:10px; font-weight:700; }
.boardMemoPanel { display:none; position:absolute; right:0; top:calc(100% + 6px); width:300px; max-width:calc(100vw - 32px); max-height:min(70vh, 480px); overflow-y:auto; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px; box-shadow:0 8px 24px rgba(0,0,0,0.22); z-index:60; }
.boardMemoPanel.open { display:block; }
.boardMemoAddRow { display:flex; gap:6px; margin-bottom:8px; }
.boardMemoAddRow input { flex:1; margin-bottom:0; font-size:13px; }
.boardMemoErrorMsg { font-size:11.5px; color:var(--text-danger); margin-bottom:6px; min-height:0; }
.boardMemoErrorMsg:empty { display:none; }
.boardMemoList { display:flex; flex-direction:column; gap:5px; }
.boardMemoEmpty { font-size:12px; color:var(--text-secondary); text-align:center; padding:8px 0; }
/* ふだんは1行だけ(誰がいつ書いたか)を表示して収納しておき、カーソルを乗せる(title属性)と
   全文がツールチップで見え、クリックすると初めて編集用の入力欄が開く。たくさん溜まっても
   ボードを圧迫しないようにするための工夫 */
.boardMemoItem { border:1px solid var(--border); border-radius:8px; background:var(--surface-1); overflow:hidden; }
.boardMemoItemHead { display:flex; align-items:center; gap:6px; padding:6px 8px; cursor:pointer; font-size:12px; }
.boardMemoItemHead:hover { background:var(--tier-warning); }
.boardMemoItemAuthor { font-weight:700; flex:none; }
.boardMemoItemPreview { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); }
.boardMemoItemDate { flex:none; font-size:10.5px; color:var(--text-secondary); }
.boardMemoItemEdit { display:none; padding:0 8px 8px; }
.boardMemoItem.open .boardMemoItemEdit { display:block; }
.boardMemoItemEdit textarea { width:100%; height:80px; resize:vertical; box-sizing:border-box; font-size:13px; margin-bottom:6px; }
.boardMemoItemActions { display:flex; justify-content:flex-end; gap:6px; }
.boardMemoItemActions button { font-size:12px; padding:4px 10px; }
.photoPendingFile { width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:9px; text-align:center; border-radius:6px; border:1px solid var(--border); background:var(--surface-2); padding:2px; word-break:break-all; line-height:1.3; }
.photoPendingSavedMsg { margin-top:8px; padding:10px; background:var(--tier-ok); color:var(--tier-ok-text); border-radius:6px; font-weight:700; font-size:13px; text-align:center; animation:notifySlideIn .18s ease; }

.aiInsightWrap { position:relative; display:none; }
.aiInsightBtn { position:relative; background:transparent; border:none; padding:6px; border-radius:6px; color:var(--text-secondary); display:flex; align-items:center; touch-action:manipulation; cursor:pointer; }
.aiInsightBtn:hover { color:var(--text-accent); background:var(--surface-1); }
.aiInsightBadge { position:absolute; top:3px; right:3px; width:8px; height:8px; border-radius:50%; background:var(--fill-danger); border:1.5px solid var(--surface-2); }
/* 重要な未読の気づきがある場合、通常の点よりひと回り大きくして脈動させ、見逃されにくくする */
.aiInsightBadge.urgent { width:11px; height:11px; top:1px; right:1px; animation:aiInsightPulse 1.4s ease-in-out infinite; }
/* 未読「件数」を数字で見せるバッジ(社内チャット等)。ただの点では件数が伝わらないため、
   数字が収まる大きさに広げ、白文字で中央に表示する */
.aiInsightBadge.count { width:auto; height:16px; min-width:16px; top:-3px; right:-5px; border-radius:8px; padding:0 4px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; line-height:1; color:#fff; }
@keyframes aiInsightPulse { 0%, 100% { box-shadow:0 0 0 0 rgba(226,75,74,0.6); } 50% { box-shadow:0 0 0 4px rgba(226,75,74,0); } }
/* 社内チャットの着信お知らせ(吹き出し)。トップバーのチャットアイコンの下にくっつけて表示する。
   他の通知トースト(.notifyToast)と見分けやすいようアクセント色にし、横書きを明示。
   クリックでの誤操作(意図せずチャット画面へ飛んで吹き出しが消えてしまう)を防ぐため、
   吹き出し自体はクリックを受け付けない純粋な表示専用パーツにしている */
.chatArrivalBubble { position:absolute; top:calc(100% + 10px); right:0; width:max-content; max-width:min(240px, calc(100vw - 24px)); white-space:normal; writing-mode:horizontal-tb; direction:ltr; background:var(--text-accent); color:#fff; border:1px solid var(--border-accent); border-radius:10px; padding:8px 12px; font-size:12.5px; font-weight:600; line-height:1.5; box-shadow:0 6px 18px rgba(0,0,0,0.28); z-index:70; pointer-events:none; animation:notifySlideIn .18s ease; }
.chatArrivalBubble::before { content:''; position:absolute; bottom:100%; right:13px; border:7px solid transparent; border-bottom-color:var(--border-accent); }
.chatArrivalBubble::after { content:''; position:absolute; bottom:calc(100% + 1px); right:14px; border:6px solid transparent; border-bottom-color:var(--text-accent); }
.aiInsightItem.important { color:var(--fill-danger); font-weight:700; }
/* 車両カード・代車アイコンのアラートと同じ色で表示し、ひと目でどれくらい深刻かが伝わるようにする */
.aiInsightItem.severity-warning { background:var(--tier-warning); color:var(--tier-warning-text); font-weight:600; border-radius:6px; padding:8px; border-bottom:none; margin-bottom:4px; }
.aiInsightItem.severity-danger { background:var(--tier-danger); color:var(--tier-danger-text); font-weight:700; border-radius:6px; padding:8px; border-bottom:none; margin-bottom:4px; }
.aiInsightItem.severity-critical { background:var(--tier-critical); color:var(--tier-critical-text); font-weight:700; border-radius:6px; padding:8px; border-bottom:none; margin-bottom:4px; }
.aiInsightItem.severity-warning .aiInsightDate,
.aiInsightItem.severity-danger .aiInsightDate,
.aiInsightItem.severity-critical .aiInsightDate { color:inherit; opacity:0.75; }
.aiInsightPanel { display:none; position:absolute; right:0; top:calc(100% + 8px); width:300px; max-width:90vw; max-height:60vh; overflow-y:auto; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.25); padding:8px; z-index:60; }
.aiInsightPanel.open { display:block; }
.aiInsightItem { font-size:12.5px; padding:8px 6px; border-bottom:1px solid var(--border); line-height:1.5; }
.aiInsightItem:last-child { border-bottom:none; }
.aiInsightItem .aiInsightDate { font-size:10px; color:var(--text-muted); margin-bottom:2px; }
.aiInsightEmpty { font-size:12px; color:var(--text-muted); padding:14px 6px; text-align:center; }
/* 「【昨日の振り返り】」等、朝礼ダイジェストの行頭ラベルを太字・網掛けで目立たせる */
.aiInsightLabel { display:inline-block; font-weight:700; color:var(--text-primary); background:var(--surface-1); border:1px solid var(--border); border-radius:4px; padding:1px 6px; margin-right:4px; }
.aiInsightConfirmRow { display:flex; gap:6px; margin-top:6px; }
.aiInsightConfirmBtn { font-size:11.5px; font-weight:600; padding:4px 12px; border-radius:6px; cursor:pointer; touch-action:manipulation; border:1px solid var(--border-accent); background:var(--surface-1); color:var(--text-primary); }
.aiInsightConfirmBtn.yes { border-color:var(--text-accent); color:var(--text-accent); }
.aiInsightConfirmBtn:disabled { opacity:0.6; cursor:default; }
.aiInsightConfirmDone { font-size:11.5px; color:var(--text-muted); }
.aiChatOpenBtn { display:block; width:100%; margin-top:6px; padding:7px 0; font-size:12px; font-weight:600; background:var(--surface-1); border:1px solid var(--border-accent); color:var(--text-accent); border-radius:6px; cursor:pointer; touch-action:manipulation; }
.aiChatBox { width:340px; max-width:92vw; display:flex; flex-direction:column; height:min(70vh, 560px); }
.aiChatMessages { flex:1; overflow-y:auto; background:var(--surface-1); border-radius:8px; padding:8px; margin:8px 0; display:flex; flex-direction:column; gap:8px; }
.aiChatMsg { max-width:85%; font-size:12.5px; line-height:1.5; padding:7px 10px; border-radius:10px; white-space:pre-wrap; }
.aiChatMsg-user { align-self:flex-end; background:var(--border-accent); color:#fff; }
.aiChatMsg-assistant { align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); }
.aiChatInputRow { display:flex; gap:6px; }
.aiChatInputRow input { flex:1; margin-bottom:0; }

.feedbackCard { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.feedbackCard.feedbackNew { border-left:4px solid var(--border-accent); }
.feedbackCardHead { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--text-muted, #888); flex-wrap:wrap; }
.feedbackCardCompany { font-weight:700; color:var(--text-primary, inherit); }
.feedbackCardStaff { font-size:11.5px; color:var(--text-muted, #888); margin-top:2px; }
.feedbackCardAnalysis { font-size:13px; line-height:1.6; white-space:pre-wrap; margin:8px 0; }
.feedbackCardDetail { font-size:12px; margin:6px 0; }
.feedbackCardDetail summary { cursor:pointer; color:var(--text-accent); }
.feedbackCardQA { margin-top:6px; padding:6px 8px; background:var(--surface-1); border-radius:6px; white-space:pre-wrap; }
.feedbackCardActions { display:flex; gap:8px; align-items:center; margin-top:8px; }
.feedbackCardActions button { font-size:12px; padding:5px 12px; }
.feedbackStatusBadge { font-size:11.5px; padding:3px 9px; border-radius:999px; }
.feedbackStatusBadge.ADOPTED { background:var(--tier-ok); }
.feedbackStatusBadge.DISMISSED { background:var(--surface-1); border:1px solid var(--border); color:var(--text-muted, #888); }

.notifyToastWrap { position:fixed; top:16px; right:16px; z-index:150; display:flex; flex-direction:column; gap:8px; max-width:320px; width:calc(100vw - 32px); }
.notifyToast { background:var(--surface-2); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.22); padding:10px 12px; font-size:12.5px; line-height:1.5; display:flex; flex-direction:column; gap:8px; animation:notifySlideIn .18s ease; }
.notifyToastActions { display:flex; justify-content:flex-end; gap:8px; }
.notifyToast button { flex:none; padding:4px 12px; font-size:12px; touch-action:manipulation; }
@keyframes notifySlideIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
/* お知らせが2件以上溜まった時だけ出る「まとめて既読にする」ボタン(社長のご依頼) */
.notifyClearAllBtn { align-self:stretch; padding:9px 12px; font-size:12.5px; font-weight:700; border-radius:8px; border:1px solid var(--border-accent); background:var(--surface-2); color:var(--text-accent); box-shadow:0 4px 16px rgba(0,0,0,0.18); cursor:pointer; touch-action:manipulation; animation:notifySlideIn .18s ease; }
.notifyClearAllBtn:disabled { opacity:0.6; cursor:wait; }
/* 備忘メモのリマインドだけは、他の車両活動通知と見た目で区別できるよう付箋のような色にする */
.notifyToastMemo { background:var(--tier-warning); border-color:var(--fill-warning); color:var(--tier-warning-text); }
.notifyToastMemoLabel { display:inline-flex; align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:0.04em; background:var(--fill-warning); color:#fff; border-radius:999px; padding:2px 9px; }

/* 工賃調査依頼: 「調査中」であることが一目で分かるよう、ステータスの丸を点滅させる */
.statusPulseDot { display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:5px; animation:statusPulse 1.2s ease-in-out infinite; vertical-align:middle; }
@keyframes statusPulse { 0%, 100% { opacity:0.35; transform:scale(0.85); } 50% { opacity:1; transform:scale(1.1); } }

/* 工賃調査依頼: 「調査中」を、実際にくるくる回るスピナーではっきり分かるようにする */
.statusSpinner { display:inline-block; width:13px; height:13px; margin-right:6px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; opacity:0.85; animation:statusSpin 0.7s linear infinite; vertical-align:middle; }
@keyframes statusSpin { to { transform:rotate(360deg); } }

.lightboxWrap { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:200; align-items:center; justify-content:center; padding:16px; cursor:zoom-out; touch-action:manipulation; }
.lightboxWrap.open { display:flex; }
.lightboxInner { position:relative; max-width:100%; max-height:100%; }
.lightboxInner img { display:block; max-width:100%; max-height:calc(100vh - 32px); border-radius:6px; cursor:zoom-out; }
.lightboxCloseBtn { position:absolute; top:-16px; right:-16px; width:34px; height:34px; border-radius:50%; background:#fff; color:#111; border:none; font-size:20px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.45); touch-action:manipulation; }
.lightboxDeleteBtn { position:absolute; top:-16px; left:-16px; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--text-danger); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.45); touch-action:manipulation; }
.lightboxNavBtn { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.92); color:#111; border:none; font-size:28px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.45); touch-action:manipulation; }
.lightboxPrevBtn { left:-18px; }
.lightboxNextBtn { right:-18px; }
@media (max-width:640px) {
  .lightboxPrevBtn { left:4px; }
  .lightboxNextBtn { right:4px; }
}

.authWrap { min-height:80vh; display:flex; align-items:center; justify-content:center; }
.authBox { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:2rem; width:300px; }
.authBox h1 { font-size:18px; margin-bottom:4px; }
.authBox p.sub { font-size:12px; color:var(--text-secondary); margin-bottom:16px; }
.authBox label { display:block; font-size:12px; color:var(--text-secondary); margin-top:10px; }
.authBox input { width:100%; }
.authBox button { width:100%; margin-top:16px; }
.errorMsg { color:var(--text-danger); font-size:12px; margin-top:8px; min-height:1em; }
/* お客様への連絡先(〇〇)が未設定の間、案内文の説明の該当箇所を赤太字で目立たせる。設定済みになれば通常の文字色に戻す */
.contactInfoHintUnresolved { color:var(--text-danger); font-weight:700; }

/* お客様への案内文設定(管理画面・基本設定): 誤って編集してしまわないよう、既定では現在の文面を
   読み取り専用のプレビューとして表示し、「編集」ボタンを押した時だけ実際のtextareaに切り替える */
.templateHeadRow { display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:480px; font-size:14px; font-weight:700; color:var(--text-primary); }
.templateHeadRow button { font-size:11.5px; padding:4px 10px; flex:none; }
.templatePreview { max-width:480px; background:var(--surface-1); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:13px; color:var(--text-primary); white-space:pre-wrap; margin-top:6px; }

/* 列数が多い表(担当者一覧等)をwidth:100%で無理に収めると、各セルが縦に潰れて文字が
   1文字ずつ折り返される崩れた表示になってしまう。min-widthで内容の自然な幅を確保し、
   収まりきらない場合は.tableWrap側の横スクロールに任せる(狭い画面でも文字が潰れない) */
table.dataTable { width:100%; min-width:max-content; border-collapse:collapse; font-size:13px; background:var(--surface-2); }
/* 説明文を含む表(評価タブのポイント設定・用語説明など)は、長い文章が横スクロール無しで
   最後まで読めるよう、上のmin-width:max-contentを打ち消して2段以上に折り返す */
table.dataTable.settingsExplainTable { min-width:0; }
table.dataTable.settingsExplainTable td { white-space:normal; word-break:break-word; }
table.dataTable.settingsExplainTable td:first-child { white-space:nowrap; }
table.dataTable th, table.dataTable td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); }
table.dataTable th { color:var(--text-secondary); font-weight:500; font-size:12px; white-space:nowrap; }
table.dataTable tr.row-warning td { background:var(--tier-warning); color:var(--tier-warning-text); }
table.dataTable tr.row-danger td { background:var(--tier-danger); color:var(--tier-danger-text); }
table.dataTable tr.row-critical td { background:var(--tier-critical); color:var(--tier-critical-text); }
table.dataTable tr.stageGroupHeader td { background:var(--surface-0); color:var(--text-primary); font-weight:700; font-size:13px; padding:9px 8px; border-top:3px solid var(--border-accent); border-bottom:1px solid var(--border-accent); }
table.dataTable tr.rowLink { cursor:pointer; touch-action:manipulation; }
table.dataTable tr.rowLink:hover { background:var(--surface-1); }

.staffNameCell { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--text-primary); }
.staffAvatar { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--text-accent); color:#fff; font-size:11px; font-weight:700; }

/* 「主な役割」ボタン。ON/OFFがひと目で分かるよう、選択中ははっきり塗りつぶす */
.roleToggle { display:inline-flex; gap:4px; }
.roleToggle button { border:1px solid var(--border-accent); background:var(--surface-2); color:var(--text-secondary); padding:5px 10px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; touch-action:manipulation; }
.roleToggle button.active { background:var(--text-accent); border-color:var(--text-accent); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.2); }

.tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.tabs button { background:var(--surface-1); border:1px solid transparent; }
.tabs button.active { background:var(--surface-2); border-color:var(--border-accent); color:var(--text-accent); }
/* 管理画面: タブを下にスクロールしても見えたままにする(topbarと合わせて丸ごと固定) */
.adminHeaderSticky { position:sticky; top:0; z-index:50; background:var(--surface-0); padding-bottom:4px; margin-bottom:12px; }
.adminHeaderSticky .tabs { margin-bottom:0; padding:6px 0 10px; }

.viewToggle, .segmentToggle { display:inline-flex; gap:4px; background:var(--surface-1); border-radius:8px; padding:3px; }
.viewToggle button, .segmentToggle button { border:none; background:transparent; padding:5px 12px; border-radius:6px; }
.viewToggle button.active, .segmentToggle button.active { background:var(--surface-2); color:var(--text-accent); font-weight:600; cursor:default; box-shadow:0 1px 2px rgba(0,0,0,0.1); }

.muted { color:var(--text-muted); }
.badge-admin { font-size:11px; background:var(--surface-1); border-radius:4px; padding:2px 6px; }

.tableWrap { width:100%; overflow-x:auto; }
/* スタッフ一覧は列数が多く横に長いため、上にスクロールしても見出し行が隠れないよう固定し、
   横スクロール用のバーも表全体の下(画面外になりがち)ではなくこの枠の下端(画面内)に来るようにする */
.tableWrapSticky { max-height:60vh; overflow:auto; }
.tableWrapSticky table.dataTable thead th { position:sticky; top:0; z-index:3; background:var(--surface-2); box-shadow:0 1px 0 var(--border); }
/* スタッフ一覧は項目(列)も多く横に長いため、右へスクロールしても「氏名」列だけは
   隠れないよう固定する(社長のご指摘: 人数が多いと誰の行か分からなくなるため) */
#staffTable td:first-child, #staffTable th:first-child {
  position:sticky; left:0; z-index:2; background:var(--surface-2); box-shadow:1px 0 0 var(--border);
}
#staffTable thead th:first-child { z-index:4; }

/* 担当者ポイントの行編集(分配)フォーム。1件のポイントを複数の担当者・区分に分配し直せる。
   各行の幅を揃え、分配後の合計が元のポイントと一致するまで保存できないようにする */
.pointSplitEditor { padding:8px 2px; }
.pointSplitRows { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.point-split-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--surface-1); border-radius:8px; padding:6px 8px; }
.point-split-row select, .point-split-row input[type="number"] { font-size:13px; padding:5px 6px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); }
.point-split-row .alloc-staff { width:130px; }
.point-split-row .alloc-category { width:100px; }
.point-split-row .alloc-points { width:80px; }
.point-split-row .alloc-remove { width:26px; height:26px; padding:0; border-radius:50%; font-size:12px; }
.pointSplitAddBtn { font-size:12px; margin-bottom:8px; }
.pointSplitTotalBar { font-size:13px; font-weight:700; padding:7px 10px; border-radius:8px; margin-bottom:8px; text-align:center; }
.pointSplitTotalBar.ok { background:var(--tier-ok); color:var(--tier-ok-text); }
.pointSplitTotalBar.bad { background:var(--tier-danger); color:var(--tier-danger-text); }
.pointEditActions { display:flex; gap:6px; }
.pointEditActions button { font-size:12px; }
.edit-msg { font-size:12px; color:var(--text-danger); }
.pointSplitRevertBtn { font-size:11px; color:var(--text-secondary); background:none; border:none; text-decoration:underline; padding:2px 0; cursor:pointer; }
.editedBadge { display:inline-block; font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; background:var(--tier-warning); color:var(--tier-warning-text); margin-left:4px; }

/* ===== 説明書ページ ===== */
.manualToc { display:flex; flex-wrap:wrap; gap:8px; margin:1rem 0 2rem; }
.manualToc a { background:var(--surface-1); border:1px solid var(--border); border-radius:20px; padding:6px 14px; font-size:12.5px; }
.manualToc a:hover { border-color:var(--border-accent); color:var(--text-accent); }
.manualLede { font-size:13px; color:var(--text-secondary); max-width:680px; line-height:1.7; }
.manualSection { scroll-margin-top:70px; }
.manualSection h2 { display:flex; align-items:center; gap:8px; }
.manualSection h3 { font-size:13.5px; margin-top:1.4rem; }
.manualSection p { font-size:13px; line-height:1.8; max-width:700px; }
.manualSection ul, .manualSection ol { font-size:13px; line-height:1.85; max-width:700px; padding-left:1.3em; }
.manualSection li { margin-bottom:4px; }
.manualIconRow { display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); max-width:700px; }
.manualIconRow:last-child { border-bottom:none; }
.manualIconRow .iconBox { flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:var(--surface-1); display:flex; align-items:center; justify-content:center; color:var(--text-accent); }
.manualIconRow .iconLabel { font-size:13px; font-weight:600; margin-bottom:2px; }
.manualIconRow .iconDesc { font-size:12px; color:var(--text-secondary); line-height:1.6; }
.techBox { background:#1b232e; color:#dbe4ee; border-radius:10px; padding:16px 20px; margin:1.4rem 0 2.4rem; max-width:760px; }
.techBox h4 { margin:0 0 10px; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:#87b1e6; font-weight:700; }
.techBox p { color:#c3d0dd; font-size:12.5px; line-height:1.8; max-width:none; }
.techBox ul { margin:0; padding-left:1.15em; font-size:12.5px; line-height:1.85; color:#dbe4ee; max-width:none; }
.techBox li { margin-bottom:7px; }
.techBox code { background:rgba(255,255,255,0.12); padding:1px 6px; border-radius:4px; font-family:var(--font-mono); font-size:11.5px; color:#a9d1ff; }

/* 社内チャット: 左に部屋一覧、右にスレッドを並べた2ペイン構成。スマホでは
   一覧⇄スレッドをその場で切り替える(.threadOpenで一覧を隠しスレッドを表示) */
.chatLayout { display:flex; gap:12px; height:calc(100vh - 90px); height:calc(100svh - 90px); max-width:1100px; }
.chatRoomListWrap { flex:0 0 280px; background:var(--surface-1); border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; }
.chatRoomListNote { flex:0 0 auto; padding:9px 12px; font-size:11px; line-height:1.6; color:var(--text-secondary); border-bottom:1px solid var(--border); }
.chatRoomList { display:flex; flex-direction:column; overflow-y:auto; flex:1 1 auto; }
.chatSelfRow { flex:0 0 auto; display:flex; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.chatRoomItem { display:flex; gap:10px; padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--border); touch-action:manipulation; }
.chatRoomItem:hover { background:var(--surface-2); }
.chatRoomItem.active { background:var(--surface-2); box-shadow:inset 3px 0 0 var(--text-accent); }
.chatRoomIcon.initial { background:var(--text-accent); color:#fff; font-size:15px; font-weight:700; }
.chatRoomIcon { flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:16px; }
.chatRoomMain { min-width:0; flex:1 1 auto; }
.chatRoomNameRow { display:flex; justify-content:space-between; gap:6px; }
.chatRoomName { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatRoomTime { font-size:10.5px; color:var(--text-muted); flex:0 0 auto; }
.chatRoomPreviewRow { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-top:2px; }
.chatRoomPreview { font-size:12px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatUnreadBadge { flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--fill-danger); color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.chatThreadWrap { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; background:var(--surface-1); border-radius:var(--radius); overflow:hidden; }
.chatThreadHeader { flex:0 0 auto; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); display:flex; align-items:center; gap:10px; }
.chatBackBtn { flex:0 0 auto; }
.chatThreadTitle { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatMessages { flex:1 1 auto; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:2px; }
.chatBubbleRow { display:flex; flex-direction:column; align-items:flex-start; max-width:78%; margin-bottom:10px; }
.chatBubbleRow.mine { align-self:flex-end; align-items:flex-end; }
.chatBubbleSender { font-size:11px; color:var(--text-secondary); margin-bottom:2px; margin-left:2px; }
.chatBubble { padding:8px 12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); font-size:13.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.chatBubble.mine { background:var(--text-accent); color:#fff; border-color:var(--text-accent); }
.chatBubbleTime { font-size:10px; color:var(--text-muted); margin-top:2px; display:flex; align-items:center; gap:4px; }
/* 個別チャットで自分が送ったメッセージの既読/未読アイコン。未読=グレーのチェック1つ、既読=アクセント色のチェック2つ */
.chatReadStatus { display:inline-flex; align-items:center; gap:2px; color:var(--text-muted); }
.chatReadStatus.read { color:var(--text-accent); }
.chatReadStatusLabel { font-size:10px; }
/* 送信済みメッセージの添付(写真はその場でサムネイル表示、PDFはアイコン付きのリンクとして表示) */
.chatAttachmentImage { max-width:220px; border-radius:10px; overflow:hidden; cursor:pointer; margin-bottom:4px; background:var(--surface-2); border:1px solid var(--border); }
.chatAttachmentImage img { display:block; max-width:100%; max-height:260px; }
.chatAttachmentLoading { display:block; padding:20px; font-size:11px; color:var(--text-muted); text-align:center; }
.chatAttachmentDoc { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-accent); font-size:12.5px; margin-bottom:4px; max-width:240px; }
.chatAttachmentDoc span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatInputRow { flex:0 0 auto; display:flex; flex-direction:column; border-top:1px solid var(--border); background:var(--surface-2); }
.chatInputBottomRow { display:flex; gap:8px; padding:10px 12px; }
.chatInputRow textarea { flex:1 1 auto; resize:none; max-height:100px; }
.chatInputRow button { flex:0 0 auto; align-self:flex-end; }
.chatAttachBtn { flex:0 0 auto; align-self:flex-end; padding:6px 10px; display:flex; align-items:center; }
/* 送信前の添付プレビュー。まだ送っていないことが分かるよう入力欄のすぐ上に小さく表示する */
.chatPendingAttachment { position:relative; display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px dashed var(--border); }
.chatPendingThumb { width:44px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--border); }
.chatPendingFile { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.chatPendingFileName { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatPendingRemoveBtn { width:20px; height:20px; line-height:18px; padding:0; text-align:center; font-size:13px; border-radius:50%; border:none; background:rgba(0,0,0,0.5); color:#fff; cursor:pointer; touch-action:manipulation; }

@media (max-width: 480px) {
  .chatLayout { height:calc(100vh - 70px); height:calc(100svh - 70px); }
  .chatRoomListWrap { flex-basis:auto; width:100%; }
  .chatLayout:not(.threadOpen) .chatThreadWrap { display:none; }
  .chatLayout.threadOpen .chatRoomListWrap { display:none; }
  .chatBubbleRow { max-width:88%; }
}

/* ===== 契約先一覧: 一覧は簡単な表、詳しい内容は行クリックで開くモーダル内のカード(運営者専用画面) ===== */
.opCompanyCard {
  background:var(--surface-2); border:1px solid var(--border); border-left:4px solid var(--border-accent);
  border-radius:var(--radius); padding:16px 18px; box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.opCompanyCard.tier-yellow { border-left-color:var(--fill-warning); }
.opCompanyCard.tier-red { border-left-color:var(--fill-danger); }

.opCompanyHead { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.opCompanyName { font-size:15px; font-weight:700; color:var(--text-primary); line-height:1.4; }
.opCompanyCode { display:inline-block; margin-top:3px; font-size:11px; font-family:var(--font-mono); color:var(--text-secondary); background:var(--surface-1); border-radius:5px; padding:1px 6px; }
.opTierBadge { flex:none; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.opTierBadge.tier-green { background:var(--fill-success-soft); color:var(--fill-success); }
.opTierBadge.tier-yellow { background:var(--tier-warning); color:var(--tier-warning-text); }
.opTierBadge.tier-red { background:var(--tier-danger); color:var(--tier-danger-text); }

.opCompanySection { margin-bottom:13px; }
.opCompanySection:last-child { margin-bottom:0; }
.opSectionLabel { font-size:10.5px; font-weight:700; color:var(--text-muted); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px; }
.opFieldGrid { display:grid; grid-template-columns:auto 1fr; gap:5px 10px; font-size:12.5px; align-items:center; }
.opFieldGrid .k { color:var(--text-secondary); white-space:nowrap; }
.opFieldGrid .v { color:var(--text-primary); }
.opFieldGrid .v button { font-size:11px; margin-left:5px; padding:1px 8px; }

.opBadgeRow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.opStatusPill { font-size:11px; padding:3px 10px; border-radius:999px; font-weight:700; cursor:default; }
.opStatusPill.on { background:var(--fill-success-soft); color:var(--fill-success); }
.opStatusPill.off { background:var(--surface-1); color:var(--text-muted); }
button.opStatusPill { cursor:pointer; border:none; }

.opRevenueTotal { font-size:18px; font-weight:700; color:var(--text-accent); }
.opRevenueTotal small { font-size:11px; font-weight:500; color:var(--text-muted); margin-left:2px; }
.opRevenueBreakdown { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11.5px; color:var(--text-secondary); margin-top:5px; }

.opCompanyFoot { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid var(--border); }

@media (max-width: 640px) {
  body { padding:12px; }
  .topbar .left, .topbar .right { gap:8px; }
  .topbar h2 { font-size:15px; }
  .board { -webkit-overflow-scrolling:touch; }
  .column { flex-basis:clamp(150px, 45vw, 200px); max-height:58vh; max-height:58svh; padding-bottom:48px; }
  /* スマホでモーダルを開いた状態で中身を縦スクロールすると、幅の基準を100vwにしていると
     アドレスバーの出没に合わせて左右にわずかに揺れて見えることがあるため、vwではなく
     モーダル背景(.modalWrap)を基準にした%指定にして、スクロール中も横位置がぶれないようにする */
  .modalBox { width:calc(100% - 32px); max-width:340px; padding:1rem; }
  .authBox { width:88vw; padding:1.5rem; }
  .grid { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
  table.dataTable { font-size:12px; }
  .opCompanyCard { padding:14px; }
  .tabs { flex-wrap:wrap; }
  .row { flex-wrap:wrap; }
}

.rsLabel { display:block; font-size:12px; color:var(--text-secondary); margin-bottom:2px; }

.dateCalBtn { flex:0 0 auto; width:38px; height:38px; padding:0; font-size:18px; line-height:1; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; }
.dateCalBtn:disabled { opacity:0.4; cursor:not-allowed; }
/* 隣に.dateCalBtn(📅ボタン)がある日付欄は、ブラウザ標準のカレンダーアイコンを二重に出さないよう隠す */
.dateInputHasCalBtn::-webkit-calendar-picker-indicator { display:none; -webkit-appearance:none; }

/* デモ専用: お客様のスマホ画面プレビューの枠 */
.phoneFrame { position:relative; width:375px; max-width:92vw; height:min(720px, 80vh); margin:0 auto; padding:34px 12px 22px; background:#1b1b1d; border-radius:38px; box-shadow:0 10px 40px rgba(0,0,0,0.5); box-sizing:border-box; }
.phoneNotch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:90px; height:14px; border-radius:8px; background:#000; }
.phoneFrame iframe { width:100%; height:100%; border:0; border-radius:16px; background:#fff; }

/* スタッドレスタイヤの目印(左上)と、お客様からのコメント未対応のバッジ(左上)が重なる時は、バッジをタイヤの右へずらす */
.card.studlessTire .customerAlertBadge { left:20px; }
/* 「部品が全て揃いました」のチェック欄と、部品が揃った目印(受付票アイコンの下) */
.partsReadyRow__unused { display:flex; align-items:center; gap:6px; margin-top:6px; padding:3px 6px; border-radius:6px; background:rgba(255,255,255,0.55); font-size:11.5px; font-weight:600; cursor:pointer; touch-action:manipulation; }
.partsReadyRow input { width:auto; margin:0; }
.partsReadyRow.on { background:var(--fill-success-soft); color:var(--fill-success); }
.partsReadyIcon { position:absolute; bottom:4px; right:5px; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--fill-success); background:var(--fill-success-soft); color:var(--fill-success); display:flex; align-items:center; justify-content:center; z-index:4; box-shadow:0 1px 3px rgba(0,0,0,0.25); pointer-events:none; }
.card.tier-critical .partsReadyRow:not(.on) { background:rgba(0,0,0,0.3); color:#fff; }
/* お客様の既読/未読(車両カードの入庫理由の右) */
.customerReadBadge { display:inline-block; margin-left:5px; padding:0 6px; border-radius:9px; font-size:10.5px; font-weight:700; line-height:1.6; vertical-align:middle; }
.customerReadBadge.read { background:var(--fill-success-soft); color:var(--fill-success); border:1px solid var(--fill-success); }
.customerReadBadge.unread { background:rgba(0,0,0,0.08); color:var(--text-secondary); border:1px solid var(--border); }

/* 拡大表示した写真の回転ボタン(写真の下) */
.lightboxRotateBar { position:absolute; left:50%; bottom:-46px; transform:translateX(-50%); display:flex; gap:10px; }
.lightboxRotateBtn { width:40px; height:40px; border-radius:50%; border:none; background:#fff; color:#222; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.45); touch-action:manipulation; }
.lightboxRotateBtn:disabled { opacity:0.5; cursor:wait; }

/* 写真・メモの左下に付ける、お客様の既読/未読の小さな印(車両カードの表面には出さない) */
.attachReadRow { margin-top:4px; display:flex; justify-content:flex-start; }
.attachReadBadge { display:inline-flex; align-items:center; gap:3px; padding:0 6px; border-radius:9px; font-size:10px; font-weight:700; line-height:1.7; }
.attachReadBadge.read { background:var(--fill-success-soft); color:var(--fill-success); border:1px solid var(--fill-success); }
.attachReadBadge.unread { background:rgba(0,0,0,0.06); color:var(--text-secondary); border:1px solid var(--border); }

/* 写真の小さな表示(サムネイル)の右下に付ける回転アイコン(保存前・保存後どちらの写真にも付く) */
.attachmentRotBtn { position:absolute; bottom:3px; right:3px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(0,0,0,0.6); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; touch-action:manipulation; }
.attachmentRotBtn:disabled { opacity:0.5; cursor:wait; }

/* カーソルを乗せた時の窓(ポップアップ)の上部に出す、部品が揃ったことの目立つ表示 */
.popPartsReady { display:flex; align-items:center; gap:7px; margin:6px 0 8px; padding:7px 10px; border-radius:8px; background:var(--fill-success); color:#fff; font-size:14px; font-weight:800; letter-spacing:0.02em; box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.popPartsReady svg { flex:0 0 auto; }

/* カーソルを乗せた時の窓に出す、お客様の未読の投稿がある目印 */
.popUnread { margin:0 0 8px; padding:5px 10px; border-radius:8px; background:#fff1cc; color:#6b4a00; border:1px solid #e3b93c; font-size:12.5px; font-weight:800; }
.popUnreadHint { display:block; margin-top:1px; font-size:10.5px; font-weight:400; }

/* ボードの下の「入庫理由」「担当者別」をタップして絞り込んだ時の表示 */
.reasonChipBtn, .staffChip { cursor:pointer; touch-action:manipulation; }
.reasonChipBtn.active, .staffChip.active { outline:2px solid var(--text-accent); }
.chipClearBtn { font-size:11px; padding:1px 8px; border-radius:10px; border:1px solid var(--text-accent); background:#fff; color:var(--text-accent); cursor:pointer; margin-left:2px; }
.boardFilterBar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0; padding:6px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--text-accent); font-size:13px; font-weight:600; }
.boardFilterBar button { font-size:12px; padding:3px 12px; border-radius:12px; border:1px solid var(--text-accent); background:#fff; color:var(--text-accent); cursor:pointer; }

/* 上部バーの「ボードへ戻る」「設定」「ログアウト」等を、アイコン+小さな文字のボタンにして見やすくする(全ページ共通。api.jsが付与) */
.topbar .right { flex-wrap:wrap; justify-content:flex-end; }
.topbar .right .navBtn { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:54px; max-width:96px; padding:5px 8px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text-secondary); font-size:10.5px; line-height:1.2; text-align:center; text-decoration:none; cursor:pointer; touch-action:manipulation; }
.topbar .right .navBtn:hover { color:var(--text-accent); background:var(--surface-1); border-color:var(--text-accent); }
.topbar .right .navBtn svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.topbar .right .navBtn span { display:block; }
/* スマホ・タブレットでは、上部の各種ボタンが画面を占領しすぎないよう、アイコンだけの表示にする。
   名前は1回目のタップで(helpTip.jsの吹き出しとして)確認でき、2回目のタップで実際に画面移動する。
   PC表示(この幅より広い画面)は変更しない */
@media (max-width:860px) {
  .topbar .right .navBtn { flex-direction:row; min-width:0; max-width:none; padding:7px; gap:0; border-radius:8px; }
  .topbar .right .navBtn span { display:none; }
  .topbar .right .navBtn svg { width:19px; height:19px; }
}

/* ===== AIブログ: 保存した写真の一覧と「AIぼかし」 ===== */
.blogGallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin-top:10px; }
.blogGalleryItem { border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface-1); display:flex; flex-direction:column; }
/* AIブログメーカー(blogDraft.html)側だけ: 枚数が多くても一目で見渡せるよう、枠の中に収めてスクロールさせ、
   サムネイルも少し小さくする(社長のご依頼: 「もっと小さくていいから、ちゃんと18枚なら18枚出して、それを枠内に収めて」) */
#blogPhotoGalleryBox { border:1px solid var(--border); border-radius:8px; padding:10px; max-height:560px; overflow-y:auto; background:var(--surface-2, #fff); margin-top:8px; }
#blogPhotoGallery.blogGallery { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; margin-top:0; }
/* 1枚ずつ読み込んで並べる都合上、読み込みが終わった一番下に「以上〇枚です」と表示し、
   まだ続くのか終わりなのか迷わせないようにする(社長のご指摘) */
.blogGalleryEndMsg { grid-column:1 / -1; text-align:center; font-size:12px; color:var(--text-secondary); padding:8px 0 2px; }
.blogGalleryItem img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:zoom-in; background:var(--border); }
.blogGalleryItem .bgName { font-size:11px; color:var(--text-secondary); padding:6px 8px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blogGalleryItem .bgBadge { font-size:10px; font-weight:700; color:var(--fill-success, #1b7f3b); padding:0 8px; }
/* 下書きの本文中「【写真①】」と対応する番号を、サムネイルの左上に重ねて表示する(社長のご依頼) */
.blogGalleryItem .bgOrderBadge { position:absolute; top:6px; left:6px; min-width:24px; height:24px; padding:0 5px; border-radius:12px; background:rgba(0,0,0,0.7); color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.blogGalleryItem.bgConfirmed { border-color:var(--fill-success, #1b7f3b); box-shadow:0 0 0 1px var(--fill-success, #1b7f3b); }
.blogGalleryItem .bgActions { display:flex; gap:6px; padding:6px 8px 8px; flex-wrap:wrap; }
.blogGalleryItem .bgActions button { font-size:12px; padding:5px 10px; }
/* AIブログメーカー(blogDraft.html)側だけ: 写真がメインで見えるよう、ぼかしの選択肢は普段は
   「ぼかす」1つのボタンにたたんでおき、押した時だけ小さく開く(社長のご依頼:
   「それぞれの写真にナンバーを消すとか顔ぼかしとか、沢山のボタンが並び過ぎていて物凄く見難い。
   出して来るのは写真がメインでその下一行位にしておいて欲しい」) */
.blogGalleryItem .bgActionsCompact { padding:6px 8px 8px; }
.blogGalleryItem .bgBlurMenuBtn { font-size:11.5px; padding:3px 9px; }
.blogGalleryItem .bgBlurMenu { display:flex; flex-direction:column; gap:4px; padding:0 8px 8px; }
.blogGalleryItem .bgBlurMenu button { font-size:11.5px; padding:4px 8px; text-align:left; }
.blogGalleryItem .bgBlurMenu[hidden] { display:none; }
.blurDialog { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.blurDialog[hidden] { display:none; }
.blurDialogInner { background:var(--surface-1, #fff); color:var(--text-primary); border-radius:12px; padding:16px; width:min(900px, 100%); max-height:calc(100vh - 32px); overflow:auto; box-sizing:border-box; }
.blurCompare { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.blurCompare figure { margin:0; }
.blurCompare figure[hidden] { display:none; }
.blurCompare img { width:100%; max-height:52vh; object-fit:contain; background:#111; border-radius:6px; display:block; }
.blurCompare figcaption { font-size:12px; color:var(--text-secondary); margin-top:4px; }
.blurChips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.blurChips button { font-size:12px; padding:4px 10px; }

/* ブログ用の写真ページ: 写真ごとに、AIぼかしの指示欄・結果をカードの中にそのまま出す */
.blogGalleryItem .bgBlurRow { padding:6px 8px 8px; display:flex; flex-direction:column; gap:6px; }
.blogGalleryItem .bgBlurRow[hidden] { display:none; }
.blogGalleryItem .bgBlurInput { font-size:12px; width:100%; box-sizing:border-box; }
.blogGalleryItem .bgBlurChips { display:flex; flex-wrap:wrap; gap:4px; }
.blogGalleryItem .bgBlurChips button { font-size:11px; padding:3px 7px; }
.blogGalleryItem .bgBlurResult { display:none; grid-template-columns:1fr 1fr; gap:6px; margin-top:4px; }
.blogGalleryItem .bgBlurResult.show { display:grid; }
.blogGalleryItem .bgBlurResult img { width:100%; border-radius:6px; cursor:zoom-in; background:#111; }
.blogGalleryItem .bgBlurResult figcaption { font-size:10.5px; color:var(--text-secondary); text-align:center; margin-top:2px; }