/* OG Workbench。トークンの由来と理由は DESIGN.md。値はここの :root だけに置く */
:root {
  /* 公開サイト (apps/web/site/assets/css/site.css) から引き継ぐもの */
  --og-black: #07080a;          /* site --bg。上の帯にだけ使い、ブランドの連続性を出す */
  --og-sign: #0b7a4f;           /* site --sign。白地で 5.4:1、主ボタンと選択中の印 */
  --og-sign-ink: #ffffff;
  --og-accent: #19f0a9;         /* site --accent。黒帯の上の細線にだけ使う (白地では読めない) */

  /* 作業面。長時間・屋外のスマホでも読めるよう、明るい面に濃い文字 */
  --surface: #f6f7f8;
  --surface-raised: #ffffff;
  --ink: #15191e;               /* 白地で 17.6:1 */
  --ink-muted: #545d68;         /* 白地で 6.6:1。補足と取消の行 */
  --line: #d9dee3;
  --line-strong: #b9c1c9;

  /* 意味の色。赤は「エラー」、橙は「手配の穴 (Driver 未定)」に限って使う */
  --danger: #b42318;            /* site --danger (#ff5a4e) を白地で読める濃さに */
  --danger-surface: #fdf0ee;
  --attention: #8a4b00;
  --attention-surface: #fff4e0;
  --cancelled-surface: #eef0f2;

  --font-ui: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --radius: 4px;                /* site --radius */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --gutter: clamp(12px, 3vw, 32px);
  --focus: 3px solid #1f6feb;
  --tap: 44px;                  /* WCAG 2.5.5 の押せる大きさ */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 15px/1.55 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
[hidden] { display: none !important; }
h1, h2 { line-height: 1.3; margin: 0; }
h1 { font-size: 1.375rem; }
h2 { font-size: 1.125rem; }
.muted { color: var(--ink-muted); }

:focus-visible { outline: var(--focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: var(--space-2); top: -60px; z-index: 10; background: var(--surface-raised); padding: var(--space-2) var(--space-3); }
.skip:focus { top: var(--space-2); }

/* 上の帯: 公開サイトと同じ黒地に、accent の細線 1 本だけ */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--gutter);
  min-height: 52px;
  background: var(--og-black); color: #f3f5f7;
  border-bottom: 2px solid var(--og-accent);
}
.bar__brand { margin: 0; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.bar .button { white-space: nowrap; }
.bar__session { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bar__operator { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b4bcc5; }
.bar .button--quiet { color: #f3f5f7; border-color: rgba(255, 255, 255, .3); background: transparent; }

.shell, .gate { padding: var(--space-4) var(--gutter) var(--space-6); max-width: 1280px; margin: 0 auto; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-raised); color: var(--ink);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.button:hover { border-color: var(--ink-muted); }
.button:disabled { opacity: .5; cursor: default; }
.button--primary { background: var(--og-sign); border-color: var(--og-sign); color: var(--og-sign-ink); }
.button--quiet { background: transparent; }

.dayhead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.dayhead__title p { margin: var(--space-1) 0 0; font-size: .875rem; min-height: 1.3em; }
.daynav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.daynav input[type="date"] {
  min-height: var(--tap); padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-raised); color: var(--ink); font: inherit;
}

/* 合計: 装飾ではなく、手配の判断に使う 3 つの数だけ */
.totals { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.total { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); }
.total dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.total dd { margin: 0; font-weight: 700; }
.total--attention { border-color: var(--attention); background: var(--attention-surface); color: var(--attention); }
.total--muted dd { color: var(--ink-muted); font-weight: 600; }

.content:focus { outline: none; }

.schedule { width: 100%; border-collapse: collapse; background: var(--surface-raised); border: 1px solid var(--line); }
.schedule th, .schedule td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.schedule thead th { position: sticky; top: 0; background: var(--surface-raised); font-size: .8125rem; color: var(--ink-muted); font-weight: 600; border-bottom: 2px solid var(--line-strong); }
.schedule .col-time { white-space: nowrap; font-weight: 700; width: 5.5em; }
.schedule .col-pax { text-align: right; width: 4em; }
.schedule .col-reference { word-break: break-all; }
.schedule tr[data-status="cancelled"] td { background: var(--cancelled-surface); color: var(--ink-muted); }
.schedule tr[data-status="cancelled"] td:not(.col-status) { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.schedule tr.row--attention td.col-driver { background: var(--attention-surface); }

.badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius); font-size: .8125rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.badge--active { color: var(--og-sign); }
.badge--cancelled { color: var(--ink-muted); }
.badge--unknown { color: var(--attention); }
.driver-missing { color: var(--attention); font-weight: 700; }

.state { margin: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); }
.state p { margin: 0 0 var(--space-3); }
.state p:last-child { margin-bottom: 0; }
.state--error { border-color: var(--danger); background: var(--danger-surface); color: var(--danger); }
.state--error .muted { color: var(--ink-muted); font-size: .8125rem; }
.state--gate { max-width: 34rem; margin: var(--space-6) auto; padding: var(--space-6); }
.state--gate h2 { margin-bottom: var(--space-3); }

/* 狭い画面: 表を 1 予約 = 1 ブロックに組み替える。時刻と商品を先頭、他は見出し付きの 2 列 */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .daynav { width: 100%; }
  .daynav input[type="date"] { flex: 1 1 10rem; }
  .schedule, .schedule tbody { display: block; border: 0; background: none; }
  .schedule thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .schedule tr {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-3);
    margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised);
  }
  .schedule tr[data-status="cancelled"] { background: var(--cancelled-surface); }
  .schedule tr.row--attention { border-left: 4px solid var(--attention); }
  .schedule td { display: block; border: 0; padding: var(--space-1) 0; background: none !important; width: auto !important; text-align: left !important; }
  .schedule td::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--ink-muted); text-decoration: none; }
  .schedule .col-time, .schedule .col-product { grid-column: 1 / -1; }
  .schedule .col-time { font-size: 1.0625rem; display: flex; gap: var(--space-2); align-items: baseline; }
  .schedule .col-time::before, .schedule .col-product::before { display: none; }
  .schedule .col-product { font-weight: 600; padding-top: 0; }
}

/* 画面の切り替え。選択中は og-sign の下線と文字で示す (色だけに頼らず aria-current と太字も) */
.tabs { display: flex; gap: var(--space-1); padding: 0 var(--gutter); background: var(--surface-raised); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); color: var(--ink-muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab[aria-current="page"] { color: var(--og-sign); border-bottom-color: var(--og-sign); }
#main-area:focus, #inquiry-heading:focus { outline: none; }

/* 顧客対応: 広い画面は一覧と詳細の 2 列、狭い画面は詳細を開いたら一覧を隠す */
.inbox__panes { display: grid; grid-template-columns: minmax(18rem, 2fr) 3fr; gap: var(--space-4); align-items: start; }
.inbox__list { position: sticky; top: var(--space-2); max-height: calc(100vh - 2 * var(--space-2)); overflow-y: auto; }
.inbox__detail:empty { display: none; }
.inbox[data-detail="closed"] .inbox__panes { grid-template-columns: minmax(0, 1fr); }
.inbox[data-detail="closed"] .inbox__list { position: static; max-height: none; }
.inq-section { margin-bottom: var(--space-4); }
.inq-section h2 { margin-bottom: var(--space-2); }
.inq-count { font-size: .875rem; font-weight: 600; }
.inq-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); }
.inq-list li + li { border-top: 1px solid var(--line); }
.inq { display: grid; gap: var(--space-1); width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.inq:hover { background: var(--surface); }
.inq[aria-current="true"] { box-shadow: inset 4px 0 0 var(--og-sign); background: var(--surface); }
.inq__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; font-size: .8125rem; margin: 0; }
.inq__summary { font-weight: 600; overflow-wrap: anywhere; }
.inq__reasons { font-size: .8125rem; }
.inq-empty, .inq-done { margin: 0; }
.inq-more { padding: var(--space-3); border: 1px dashed var(--attention); border-radius: var(--radius); background: var(--attention-surface); color: var(--attention); }
.inq-more p { margin: 0 0 var(--space-2); font-weight: 600; }
.badge--danger { color: var(--danger); }
.badge--muted { color: var(--ink-muted); }

.inq-detail { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); }
.inq-detail[aria-busy="true"] { opacity: .75; }
.inq-detail__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.inq-detail__head { margin-bottom: var(--space-3); }
.inq-detail__head h2 { overflow-wrap: anywhere; margin-bottom: var(--space-1); }
.inq-detail h3 { font-size: 1rem; margin: 0 0 var(--space-2); }
.block { padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid var(--line); }
.block p { margin: 0 0 var(--space-2); }
.kvs { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); }
.kv { display: contents; }
.kv dt { color: var(--ink-muted); font-size: .875rem; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
/* 顧客の原文と下書きは平文のまま。折り返して横スクロールさせない */
.plain { margin: 0; padding: var(--space-3); max-height: 28rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.editor { display: block; width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; color: var(--ink); background: var(--surface-raised); resize: vertical; }
.dirty { margin: var(--space-1) 0 0; color: var(--attention); font-weight: 600; min-height: 0; }
.dirty:empty { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.choice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.choice p { margin: 0; flex: 1 1 14rem; }
.notice { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.notice p { margin: 0 0 var(--space-2); }
.notice p:last-child { margin-bottom: 0; }
.notice--danger { border-color: var(--danger); background: var(--danger-surface); color: var(--danger); }
.notice--info { border-color: var(--og-sign); }
.action-status { margin: 0 0 var(--space-3); font-size: .875rem; color: var(--ink-muted); }
.action-status p { margin: 0; }
.staff-notes { padding: var(--space-2) var(--space-3); background: var(--attention-surface); border-radius: var(--radius); }
.state--warn { border-color: var(--attention); background: var(--attention-surface); color: var(--attention); margin-bottom: var(--space-2); }
.confirm { margin-top: var(--space-3); padding: var(--space-4); border: 2px solid var(--og-sign); border-radius: var(--radius); background: var(--surface-raised); }
.confirm .strong { font-weight: 700; }
.back { display: none; }

@media (max-width: 760px) {
  .inbox__panes { grid-template-columns: minmax(0, 1fr); }
  .inbox__list { position: static; max-height: none; }
  .inbox[data-detail="open"] .inbox__list { display: none; }
  .back { display: inline-flex; }
  .inq-detail { padding: var(--space-3); }
  .editor { font-size: 16px; }
}

@media (forced-colors: active) {
  .badge, .total, .state, .notice, .confirm { border: 1px solid CanvasText; }
  .tab[aria-current="page"] { border-bottom-color: Highlight; }
}
@media print {
  .bar, .daynav, .skip, .tabs, .actions, .choice, .inq-detail__bar { display: none; }
  .schedule thead th { position: static; }
}