/* ============================================================
   共通コンポーネント（2026 ビジュアルリニューアル版）
   ============================================================ */

/* ---- パネル（カード） ---- */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--c-surface);
}
.panel__head h2, .panel__head h3 { flex: 1 1 auto; min-width: 0; }
.panel__note { font-size: var(--fs-xs); color: var(--c-text-3); font-weight: 400; margin-left: 4px; }
.panel__body { padding: 18px 20px; }
.panel__body--flush { padding: 0; }
.panel__foot {
  padding: 12px 20px;
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-surface-sub);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.panel--danger { border-color: var(--c-danger-line); }
.panel--danger .panel__head { background: var(--c-danger-weak); border-bottom-color: var(--c-danger-line); }

/* パネル内のテーブルは枠を持たない */
.panel .table-wrap { border-left: 0; border-right: 0; border-radius: 0; }

/* ---- セクション見出し ---- */
.sect-head {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.sect-head h2 { font-size: var(--fs-md); }
.sect-head p { font-size: var(--fs-sm); color: var(--c-text-3); }

/* ---- ステータスチップ（ピル型。色 + 記号 + 文字ラベル） ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 11px 2px 9px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  background: var(--c-surface-sub);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.chip__mark {
  width: 8px; height: 8px;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 2px;
}
.chip__mark--ring { background: transparent; border: 2px solid currentColor; border-radius: 50%; }
.chip__mark--bar  { width: 3px; height: 11px; border-radius: 1px; }
.chip__mark--tri  {
  width: 0; height: 0; background: transparent;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid currentColor; border-radius: 0;
}

.chip--draft { background: var(--s-draft-bg); border-color: var(--s-draft-line); color: var(--s-draft-fg); }
.chip--draft .chip__mark { background: var(--s-draft-mark); }
.chip--recv  { background: var(--s-recv-bg);  border-color: var(--s-recv-line);  color: var(--s-recv-fg); }
.chip--recv  .chip__mark { background: var(--s-recv-mark); }
.chip--check { background: var(--s-check-bg); border-color: var(--s-check-line); color: var(--s-check-fg); }
.chip--check .chip__mark { background: var(--s-check-mark); }
.chip--back  { background: var(--s-back-bg);  border-color: var(--s-back-line);  color: var(--s-back-fg); }
.chip--back  .chip__mark { border-bottom-color: var(--s-back-mark); background: transparent; }
.chip--ship  { background: var(--s-ship-bg);  border-color: var(--s-ship-line);  color: var(--s-ship-fg); }
.chip--ship  .chip__mark { background: var(--s-ship-mark); }
.chip--done  { background: var(--s-done-bg);  border-color: var(--s-done-line);  color: var(--s-done-fg); }
.chip--done  .chip__mark { background: var(--s-done-mark); }
.chip--void  { background: var(--s-void-bg);  border-color: var(--s-void-line);  color: var(--s-void-fg); }
.chip--void  .chip__mark { background: var(--s-void-mark); }

.chip--sm { font-size: var(--fs-xs); padding: 1px 9px 1px 7px; }

/* ---- ラベル（区分など、状態ではないもの） ----
   チップ・タグ・バッジ類の角丸はピル型で統一する */
.tag {
  display: inline-block;
  padding: 1px 10px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  background: var(--c-surface-sub);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.tag--accent { background: var(--c-accent-weak); border-color: var(--c-accent-line); color: var(--c-accent); }
.tag--warn   { background: var(--c-warn-weak);   border-color: var(--c-warn-line);   color: var(--c-warn); }
.tag--danger { background: var(--c-danger-weak); border-color: var(--c-danger-line); color: var(--c-danger); }
.tag--demo   { background: var(--c-surface-head); border-color: var(--c-border-strong); color: var(--c-text-2); letter-spacing: .03em; }

/* ---- 注記 / 通知 ----
   左アクセントバーは使わない。四辺1pxの薄いボーダー＋ごく薄い背景の
   フラットなカードで表現し、種別は背景・ボーダー色だけで区別する。
   文字はタイトル・本文ともインク色（タイトルはセミボールド）。 */
.notice {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface-sub);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.notice__body { min-width: 0; }
.notice strong { display: block; font-size: var(--fs-base); font-weight: 600; color: inherit; }
.notice--info   { background: var(--c-accent-weak); border-color: var(--c-accent-line); }
.notice--warn   { background: var(--c-warn-weak);   border-color: var(--c-warn-line); }
.notice--danger { background: var(--c-danger-weak); border-color: var(--c-danger-line); }
.notice--ok     { background: var(--c-ok-weak);     border-color: var(--c-ok-line); }
.notice--demo   { background: var(--c-surface-sub); border-color: var(--c-border); }
.notice p { margin: 0; }
.notice ul { margin-top: 4px; }
.notice li { padding-left: 14px; position: relative; }
.notice li::before { content: "－"; position: absolute; left: 0; color: var(--c-text-3); }

/* ---- 定義リスト（明細情報） ---- */
.deflist { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 0; }
.deflist dt, .deflist dd {
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border-soft);
  font-size: var(--fs-base);
}
.deflist dt { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-3); padding-right: var(--sp-4); }
.deflist dd { min-width: 0; word-break: break-word; }
.deflist > :nth-last-child(1), .deflist > :nth-last-child(2) { border-bottom: 0; }
.deflist--cols { grid-template-columns: minmax(96px, auto) minmax(0, 1fr) minmax(96px, auto) minmax(0, 1fr); }

/* ---- 指標（数値の要約。装飾目的のスコアは置かない） ---- */
.stat {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.stat:hover { border-color: var(--c-accent-line); box-shadow: var(--shadow-pop); text-decoration: none; }
.stat__label {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); color: var(--c-text-2); font-weight: 700;
}
.stat__label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--stat-mark, var(--c-border-strong));
  flex: 0 0 auto;
}
.stat__value {
  display: block;
  font-size: 28px; font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums; line-height: 1.35;
  margin-top: 3px;
}
.stat__unit  { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); margin-left: 3px; }
.stat__sub   { display: block; font-size: var(--fs-xs); color: var(--c-text-3); }
.stat--alert { --stat-mark: #d47a26; }
.stat--watch { --stat-mark: #af7d09; }
.stat--calm  { --stat-mark: var(--c-accent); }
.stat--flat  { cursor: default; }
.stat--flat:hover { border-color: var(--c-border); box-shadow: var(--shadow-card); }

/* ---- 検索バー ---- */
.searchbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: flex-end;
  padding: 14px 20px;
  background: var(--c-surface-sub);
  border-bottom: 1px solid var(--c-border-soft);
}
.searchbar:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.searchbar .field { margin: 0; }
.searchbar__grow { flex: 1 1 220px; min-width: 160px; }
.searchbar__item { flex: 0 1 180px; min-width: 140px; }
.searchbar__actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; }

/* ---- 絞り込みボタン群（ピル型トグル） ---- */
.filterset { display: flex; flex-wrap: wrap; gap: 6px; }
.filterset__btn {
  min-height: 34px;
  padding: 4px 15px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.filterset__btn:hover { background: var(--c-hover); border-color: #b6c2d2; }
.filterset__btn[aria-pressed="true"] {
  background: var(--c-accent-weak);
  border-color: var(--c-accent);
  color: var(--c-accent);
  font-weight: 700;
}
.filterset__btn[aria-pressed="true"]::before { content: "✓ "; font-weight: 700; }

/* ---- ページャ ---- */
.pager {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 11px 20px;
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: var(--fs-sm);
}
.pager__info { color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.pager__nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.pager__btn {
  min-width: 34px; min-height: 32px;
  padding: 3px 9px;
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  background: var(--c-surface); color: var(--c-text-2);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
  cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background-color var(--transition), border-color var(--transition);
}
.pager__btn:hover { background: var(--c-hover); }
.pager__btn[aria-current="true"] { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.pager__btn[disabled] { color: var(--c-text-3); background: var(--c-surface-sub); cursor: not-allowed; }

/* ---- 空状態 ---- */
.empty {
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--c-text-2);
  background: var(--c-surface);
}
.empty__title { font-size: var(--fs-md); font-weight: 700; color: var(--c-text); }
.empty__desc { font-size: var(--fs-sm); color: var(--c-text-3); margin-top: 4px; }
.empty__act { margin-top: var(--sp-3); }

/* ---- タブ ---- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  border-bottom: 1px solid var(--c-border-soft);
  overflow-x: auto;
}
.tabs__btn {
  min-height: 46px;
  padding: 10px 16px;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text-2);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.tabs__btn:hover { color: var(--c-text); }
.tabs__btn[aria-selected="true"] { color: var(--c-accent); font-weight: 700; border-bottom-color: var(--c-accent); }
.tabs__count {
  display: inline-block; margin-left: 6px;
  padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--c-surface-head); color: var(--c-text-2);
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.tabs__btn[aria-selected="true"] .tabs__count { background: var(--c-accent-weak); color: var(--c-accent); }

/* ---- ステップ表示 ---- */
.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  padding: 12px 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px 5px 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit; cursor: default;
}
.steps__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1.5px solid currentColor; border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* 完了ステップの文字はミュート（機能色の文字はチップ外では使わない）。
   完了状態は緑の丸番号（記号）で示す */
.steps__item--done { color: var(--c-text-2); cursor: pointer; }
.steps__item--done:hover { background: var(--c-ok-weak); }
.steps__item--done .steps__no { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.steps__item--current {
  color: var(--c-accent);
  font-weight: 700;
  background: var(--c-accent-weak);
  border-color: var(--c-accent-line);
}
.steps__item--current .steps__no { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.steps__arrow { color: var(--c-border-strong); font-size: var(--fs-sm); }

/* ---- 顧客固定ヘッダ（誤発注防止・淡いブルーで固定表示。左バーなしのフラットカード） ---- */
.ctxbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--c-accent-weak);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--radius-lg);
  color: var(--c-text);
}
.ctxbar__k { font-size: var(--fs-xs); color: var(--c-text-2); font-weight: 700; display: block; }
.ctxbar__v { font-size: var(--fs-base); font-weight: 700; color: var(--c-text); }
.ctxbar__v--lg { font-size: var(--fs-md); }
.ctxbar__sep { width: 1px; align-self: stretch; background: var(--c-accent-line); }
.ctxbar__act { margin-left: auto; display: flex; gap: var(--sp-2); }
.ctxbar .tag { background: var(--c-surface); border-color: var(--c-accent-line); color: var(--c-accent); }

/* ---- モーダル ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 19, 34, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh var(--sp-4) var(--sp-4);
  overflow-y: auto;
}
.modal {
  width: 100%;
  max-width: 640px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
}
.modal--wide { max-width: 940px; }
.modal__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 15px 20px;
  border-bottom: 1px solid var(--c-border-soft);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal__head h2 { flex: 1 1 auto; font-size: var(--fs-md); }
.modal__close {
  width: 34px; height: 34px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--c-text-3);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.modal__close:hover { background: var(--c-surface-head); color: var(--c-text); }
.modal__body { padding: 18px 20px; }
.modal__body > * + * { margin-top: var(--sp-3); }
.modal__foot {
  display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-surface-sub);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ---- クイック検索（グローバル検索） ---- */
.gs-input-wrap { position: relative; }
.gs-results { max-height: 46vh; overflow-y: auto; }
.gs-section {
  padding: 8px 4px 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-text-3);
}
.gs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 7px 10px;
  font: inherit;
  font-size: var(--fs-base);
  text-align: left;
  color: var(--c-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.gs-item:hover { background: var(--c-hover); }
.gs-item--sel { background: var(--c-accent-weak); }
.gs-item--sel:hover { background: var(--c-accent-weak); }
.gs-item__kind {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: center;
  padding: 1px 9px;
  border-radius: var(--radius-pill);
  background: var(--c-surface-head);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.gs-item__main { flex: 1 1 auto; min-width: 0; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item__sub { flex: 0 1 auto; font-size: var(--fs-xs); color: var(--c-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-hint {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  padding-top: 10px; margin-top: 6px;
  border-top: 1px solid var(--c-border-soft);
  font-size: var(--fs-xs); color: var(--c-text-3);
}
.gs-hint kbd {
  padding: 0 5px;
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  background: var(--c-surface-sub);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* ---- トースト ---- */
.toaster {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(420px, calc(100vw - 32px));
}
/* 左バーは使わない。四辺ボーダー＋薄い背景色で種別を区別するフラットなカード */
.toast {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.toast--ok { background: var(--c-ok-weak); border-color: var(--c-ok-line); }
.toast--warn { background: var(--c-warn-weak); border-color: var(--c-warn-line); }
.toast--err { background: var(--c-danger-weak); border-color: var(--c-danger-line); }
.toast strong { display: block; font-size: var(--fs-base); font-weight: 600; }
.toast span { color: var(--c-text-2); }
.toast__close {
  margin-left: auto; background: none; border: 0; color: var(--c-text-3);
  font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.toast__close:hover { color: var(--c-text); }

/* ---- 進捗履歴（タイムライン） ---- */
.hist { position: relative; padding-left: 20px; }
.hist::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--c-border-soft);
}
.hist__item { position: relative; padding: 0 0 var(--sp-4); }
.hist__item:last-child { padding-bottom: 0; }
.hist__dot {
  position: absolute; left: -19px; top: 5px;
  width: 12px; height: 12px;
  border: 2px solid var(--c-border-strong); border-radius: 50%;
  background: var(--c-surface);
}
.hist__item--latest .hist__dot { border-color: var(--c-accent); background: var(--c-accent); }
.hist__meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  font-size: var(--fs-sm); color: var(--c-text-2);
}
.hist__time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-text); }
.hist__comment {
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--c-surface-sub);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}

/* ---- 補足テキスト ---- */
.muted { color: var(--c-text-3); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.strong { font-weight: 700; }
.stack > * + * { margin-top: var(--sp-3); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.inline-list { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }