/* =====================================================================
   カレンダー（月グリッド／チップ／空き〇△×／概要シート）の見た目。
   agc-calendar.js と対で使う。読む側：
     ・代理店ポータル本体 mcj-sales/frontend/index.html
     ・空き状況カレンダー mcj-sales/frontend/cal.html
   色は読み手側の :root トークン（--panel/--line/--text/--muted/--accent/
   --accent-soft）に乗る。使う側でこれらを定義しておくこと。
   ※ 予約管理の「代理店表示」プレビュー mcj-reservation/frontend/agency-view.js
     は別 Pages プロジェクトで実行時の共有ができないため引き続きコピー。
     見え方を変えたらあちらも合わせる（コピー元はこのファイル）。
   ===================================================================== */

/* カレンダーの絞り込み群：PCは従来どおり並ぶ（display:contents） */
.agc-filters{display:contents}
.agc-toolbar{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:sticky;top:95px;z-index:18}
.agc-mnav{display:flex;align-items:center;gap:6px}
.agc-mnav .mlabel{font-size:15px;font-weight:800;min-width:120px;text-align:center}
.agc-mnav button{border:1px solid var(--line);background:#fff;width:30px;height:30px;border-radius:8px;font-size:16px;font-weight:800;cursor:pointer;color:var(--text)}
.agc-mnav button:hover{background:#f3f4f6}
.agc-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.agc-seg button{border:none;background:#fff;padding:6px 12px;font-size:13px;font-weight:800;cursor:pointer;color:var(--muted)}
.agc-seg button.active{background:var(--accent);color:#fff}
.agc-seg button+button{border-left:1px solid var(--line)}
.agc-dlabel{font-size:12px;font-weight:700;color:var(--muted)}
.agc-toolbar select{font-size:12px;padding:5px 8px;border:1px solid var(--line);border-radius:6px}
.agc-ck{font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:5px;cursor:pointer}
.agc-calwrap{overflow-x:auto}
.agc-monthblock{margin-bottom:20px}
.agc-monthtitle{font-size:14px;font-weight:800;margin:0 2px 6px;display:flex;align-items:center;gap:8px}
.agc-monthtitle.cur{color:var(--accent)}
.agc-monthtitle .mtb{font-size:10px;font-weight:800;color:#3730a3;background:#e0e7ff;border:1px solid #c7d2fe;border-radius:20px;padding:1px 8px}
.agc-cal{min-width:900px;background:var(--panel);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.agc-head{display:grid;grid-template-columns:repeat(7,1fr);background:#fbfcfd;border-bottom:1px solid var(--line)}
.agc-head .wd{font-size:11px;font-weight:800;color:var(--muted);padding:6px;text-align:center}
.agc-head .wd.sun{color:#dc2626}.agc-head .wd.sat{color:#2563eb}
.agc-week{border-bottom:1px solid #eef1f4}.agc-week:last-child{border-bottom:none}
/* minmax(0,1fr)＝セルの中身（長い空港名など）で列幅が広がらないようにする */
.agc-wgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.agc-dcell{min-height:92px;border-left:1px solid #eef1f4;padding:2px 3px 5px}
/* 日付クリックでその日の新規問合せへ（過去日は対象外） */
.agc-dcell.agc-pick{cursor:pointer}
.agc-dcell.agc-pick:hover{background:#f0fdfa;box-shadow:inset 0 0 0 2px #99f6e4}
.agc-dcell:first-child{border-left:none}
.agc-dcell.oth{background:#fafbfc}
.agc-dcell.today{background:#f0f9ff;box-shadow:inset 0 0 0 2px #bae6fd}
.agc-dn{font-size:11px;font-weight:800;color:var(--muted);padding:0 3px;display:block;height:16px;line-height:16px}
.agc-dcell.sun .agc-dn{color:#dc2626}.agc-dcell.sat .agc-dn{color:#2563eb}.agc-dcell.oth .agc-dn{color:#c4cbd4}
.agc-chips{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.agc-av{margin-top:2px;display:flex;flex-direction:column;gap:1px}
.agc-av .avr{display:flex;gap:5px;font-size:9.5px;font-weight:800;white-space:nowrap;align-items:center;line-height:1.35}
.agc-av .avt{color:#6b7280;min-width:30px}
.agc-av .avo{color:#166534}.agc-av .avm{color:#b45309}.agc-av .avx{color:#b91c1c}
/* ※＝オーナーの仮のご予定。空き自体は塞がないので〇△×とは別系統の色 */
.agc-av .avh{color:#0f766e}
.agc-chip{display:block;border:1px solid var(--line);border-left:3px solid #94a3b8;border-radius:6px;padding:3px 5px;background:#fff;font-size:10.5px;line-height:1.35;cursor:pointer}
.agc-chip:hover{background:#f8fafc;border-color:#cbd5e1}
.agc-chip.dead{opacity:.5}
.agc-chip.inq{background:#fbfcff}
.agc-chip .c1{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.agc-chip .ccode{font-family:ui-monospace,monospace;font-weight:800;color:#0f766e;font-size:10.5px}
.agc-chip .agc-dep{display:none}   /* 「{出発空港}発」＝携帯のチップだけで使う */
.agc-chip .c2{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agc-chip .ctime{font-weight:700;color:#1f2937}
.agc-ost{display:inline-block;font-size:9px;font-weight:800;border-radius:20px;padding:0 6px;white-space:nowrap;border:1px solid transparent}
.agc-setl{display:inline-block;font-size:9px;font-weight:800;border-radius:20px;padding:0 5px;white-space:nowrap;border:1px solid transparent}
.agc-more{font-size:10px;color:var(--muted);font-weight:700;padding:0 4px;display:block}
.agc-legend{display:flex;gap:12px;flex-wrap:wrap;margin:10px 2px;font-size:11px;color:var(--muted)}
.agc-legend span{display:inline-flex;align-items:center;gap:5px}.agc-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.agc-empty{color:var(--muted);font-size:13px;padding:14px;text-align:center}
/* ===== 携帯：カレンダーのチップをタップしたときの概要シート（詳細ページへ飛ぶ前のワンクッション） ===== */
.osheet-ov{position:fixed;inset:0;z-index:95;background:rgba(15,23,42,.42);display:flex;align-items:flex-end;justify-content:center}
.osheet{width:100%;max-width:520px;max-height:88vh;overflow-y:auto;background:var(--panel);border-radius:14px 14px 0 0;box-shadow:0 -8px 30px rgba(15,23,42,.28);padding:12px 14px 16px}
.osheet .osh{display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.osheet .otype{font-size:11px;font-weight:800;color:#fff;border-radius:20px;padding:2px 9px;white-space:nowrap}
.osheet .oag{font-size:17px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osheet .osx{margin-left:auto;border:none;background:none;cursor:pointer;font-size:22px;line-height:1;color:var(--muted);padding:0 2px;font-family:inherit}
.osheet .orows{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;padding:11px 2px 13px;font-size:13.5px;margin:0}
.osheet .orows dt{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;padding-top:1px;margin:0}
.osheet .orows dd{font-weight:700;color:var(--text);word-break:break-word;display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0}
.osheet .orows dd .sub{font-weight:600;color:var(--muted);font-size:12px}
.osheet .ocode{font-family:ui-monospace,monospace;font-weight:800;color:#0f766e}
/* 行程＝「M/D（W） hh:mm 出発→到着」を1行ずつ。日付・時刻の幅を固定して縦に揃える */
.osheet .olegs{display:flex;flex-direction:column;gap:2px;width:100%}
.osheet .oleg{display:flex;align-items:baseline;gap:8px;padding:2px 5px;border-radius:6px;line-height:1.5}
.osheet .oleg .od{color:var(--muted);font-weight:700;font-size:12.5px;white-space:nowrap;min-width:74px}
.osheet .oleg .ot{font-weight:800;white-space:nowrap;min-width:42px;font-variant-numeric:tabular-nums}
.osheet .oleg .orr{font-weight:700}
/* タップした日の行だけ強調（カレンダーのどこから開いたかを見失わないように） */
.osheet .oleg.cur{background:var(--accent-soft);box-shadow:inset 0 0 0 1px #c7d2fe}
.osheet .obtns{display:flex;gap:8px}
.osheet .obtns .btn{flex:1;min-width:0;justify-content:center;padding:11px 8px;font-size:14px;border-radius:10px;white-space:nowrap;gap:4px;width:auto;cursor:pointer;font-family:inherit}
.osheet .obtns .btn svg{flex:none}
.osheet .obtns .btn-primary{flex:1.5;width:auto;padding:11px 8px}
.agc-ost.pend,.agc-setl.pend{box-shadow:0 0 0 2px #ea580c}

/* 「絞り込み」トグル（携帯のみ表示）。本体ポータルにも同名クラスがあるが、
   この1枚で完結させるためツールバー配下ぶんをここに持つ（宣言は本体と同じ）。 */
.agc-toolbar .filt-toggle{display:none;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:700;color:#374151;cursor:pointer}
.agc-toolbar .filt-toggle svg{width:14px;height:14px;stroke:#6b7280;fill:none;stroke-width:2}
.agc-toolbar .filt-toggle svg:last-child{transition:transform .15s}
.agc-toolbar .filt-toggle[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}

@media(max-width:720px){
  /* 吸着位置：タブ帯が無いのでヘッダー直下(55px)に。PCの top:95px はズレて重なるため上書き。 */
  .agc-toolbar{top:55px}
  /* カレンダーの絞り込み：開いたら最後尾(order)へ回して全幅で1段下に＝再読込が下がらない */
  .agc-filters{display:none!important}
  .agc-filters.open{display:flex!important;flex-wrap:wrap;gap:10px;width:100%;flex-basis:100%;order:9;margin-top:8px}
  /* ===== カレンダーを画面幅に収める（Googleカレンダー携帯風・セル高さ固定） ===== */
  .agc-calwrap{overflow-x:visible}
  .agc-cal{min-width:0;border-radius:9px}
  .agc-monthblock .agc-cal{min-width:0}
  .agc-dcell{height:84px;min-height:0;overflow:hidden;padding:1px 2px 2px}   /* 全セル同じ高さ＝幅・高さのばらつきを解消 */
  .agc-dn{font-size:11px;height:15px;line-height:15px;padding:0 2px}
  .agc-av{margin-top:1px}
  .agc-av .avr{font-size:8px;gap:2px}
  .agc-av .avt{min-width:24px}
  /* セル幅には1項目しか入らないので、受注番号ではなく「{出発空港}発」を出す（番号だけでは中身が分からない）。
     受注番号・区間・状態はチップをタップして出る概要シートで見る。
     ステータスのバッジ文字も幅を食うので出さず、「御社が対応するべき」だけオレンジ枠で示す（一覧と同じ意味）。 */
  .agc-chips{gap:2px}
  .agc-chip{padding:2px 4px;border-left-width:2px}
  .agc-chip .c1{gap:2px;flex-wrap:nowrap}
  .agc-chip .agc-dep{display:block;font-weight:700;color:#374151;font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
  .agc-chip .ccode,.agc-chip .c2,.agc-chip .agc-setl,.agc-chip .agc-ost{display:none}
  .agc-chip.pend{box-shadow:0 0 0 1.5px #ea580c}
  /* 未確定（問合せ）はバッジを出せないぶん破線枠で示す */
  .agc-chip.inq{border-style:dashed;border-left-style:solid}
  .agc-more{font-size:9px;padding:0 3px}
  body.filt-open .agc-calwrap,body.filt-open .agc-legend,body.filt-open .agc-monthblock{opacity:.4;transition:opacity .15s}
  .agc-toolbar .filt-toggle{display:inline-flex}
}