/* Phase 2A (UI/UX Doctrine): 白基調＋ピンクアクセントの共通カラートークン。
   既存の意味色（success/warning/error）は値を変えずトークン化のみ行う。
   ページ全面のピンク化はしない（主操作・active・soft背景・focusに限定使用）。 */
:root {
  --cargo-primary: #D81B60;
  --cargo-primary-hover: #AD1457;
  --cargo-primary-soft: #FCE4EC;

  --cargo-background: #FFFFFF;
  --cargo-surface: #FFFFFF;
  --cargo-surface-subtle: #F9FAFB;

  --cargo-border: #E5E7EB;
  --cargo-text: #1F2937;
  --cargo-text-muted: #6B7280;

  --cargo-success: #166534;
  --cargo-success-bg: #DCFCE7;
  --cargo-warning: #92400E;
  --cargo-warning-bg: #FEF3C7;
  --cargo-error: #991B1B;
  --cargo-error-bg: #FEE2E2;

  --cargo-focus: var(--cargo-primary);
}

body { font-family: -apple-system, "Segoe UI", "Hiragino Sans", sans-serif; margin: 0; background: var(--cargo-background); color: var(--cargo-text); font-size: 15px; line-height: 1.5; }
header.cargo-hd { background: var(--cargo-surface); color: var(--cargo-text); border-bottom: 2px solid var(--cargo-primary); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; }
header.cargo-hd nav a { color: var(--cargo-text-muted); margin-right: 14px; text-decoration: none; font-size: 14px; }
header.cargo-hd nav a:hover { color: var(--cargo-primary); }
header.cargo-hd nav a.active { color: var(--cargo-primary); font-weight: 700; }
/* Issue #180 (CargoOS Simplification 1A3): renderCargoNav()'s group-label
   spans (出荷/帳票・FAX/履歴/⚙管理) need visual separation from the <a> links
   now that the shared nav is wired into real pages. */
header.cargo-hd nav .cargo-nav-group { color: var(--cargo-text-muted); font-size: 12px; margin-right: 6px; padding-left: 10px; border-left: 1px solid var(--cargo-border); }
header.cargo-hd nav .cargo-nav-group:first-child { padding-left: 0; border-left: none; }
main { max-width: 1280px; margin: 0 auto; padding: 20px 24px; }

/* Phase 3: heading階層。h1=画面名／h2=セクション名(旧h3)／h3=詳細小見出し(旧h4)。
   cargo.cssにはこれまでタグ別セレクタが無かったため、HTML側のタグ変更(h3→h2, h4→h3)は
   視覚的に無風だった。ここで初めて明示サイズを与える。 */
h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--cargo-text); }
h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: var(--cargo-text); }
h3 { font-size: 16px; font-weight: 700; margin: 16px 0 8px; color: var(--cargo-text); }
h3:first-child { margin-top: 0; }
.page-desc { font-size: 14px; color: var(--cargo-text-muted); margin: 0 0 16px; max-width: 760px; }

.card { background: var(--cargo-surface); border: 1px solid var(--cargo-border); border-radius: 8px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
/* Phase 3: 危険操作を主操作群から視覚的に分離するための領域。左に区切り線＋余白を足すだけで、
   danger自体の色・挙動は変えない（cart-assets.htmlの破損発見などで使用）。 */
.danger-zone { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--cargo-border); }

label { font-size: 15px; color: var(--cargo-text-muted); display: inline-flex; align-items: center; gap: 6px; }

/* Phase 1 (UI/UX Doctrine): input/select/textareaの高さ・余白・disabled/readonly識別を統一。
   checkbox/radioはテキスト入力と寸法の性質が異なるため対象から除外する（40pxを強制すると
   carryover.html の行選択チェックボックス等が破綻するため）。 */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--cargo-border);
  border-radius: 4px;
  font-size: 14px;
  background: var(--cargo-surface);
  color: var(--cargo-text);
}
input:not([type="checkbox"]):not([type="radio"])::placeholder,
textarea::placeholder {
  color: var(--cargo-text-muted);
}
/* Phase 2A: focus時のピンク系アクセント。mouse/keyboard問わず表示（フォーム入力欄は
   クリックで入っても現在地が分かる方が業務上有用なため、buttonやnavとは別に通常:focusで出す）。 */
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--cargo-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--cargo-primary-soft);
}
input:disabled:not([type="checkbox"]):not([type="radio"]),
select:disabled,
textarea:disabled,
input:read-only:not([type="checkbox"]):not([type="radio"]),
textarea:read-only {
  background: var(--cargo-surface-subtle);
  color: var(--cargo-text-muted);
  cursor: not-allowed;
}
/* Phase 2A: 後続Phase(HTML改修)でフィールド単位のエラー表示に使う想定の予備クラス。
   今回どのHTMLからも未参照（追加のみ）。 */
input.error, select.error, textarea.error {
  border-color: var(--cargo-error);
}

button {
  box-sizing: border-box;
  min-height: 40px;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  background: var(--cargo-primary);
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.2;
}
button:not(.secondary):not(.danger):hover:not(:disabled) { background: var(--cargo-primary-hover); }
button.secondary { background: var(--cargo-surface); color: var(--cargo-text); border: 1px solid var(--cargo-border); }
button.secondary:hover:not(:disabled) { background: var(--cargo-surface-subtle); }
button.danger { background: #b91c1c; }
button.danger:hover:not(:disabled) { background: #991b1b; }
button:disabled { background: #94a3b8; color: #e2e8f0; cursor: not-allowed; opacity: 0.8; }
/* Phase 2B: 誤操作防止。table内で主操作/開くボタンに隣接する危険操作ボタンへ左余白を足し、
   意図せぬ隣接クリックのリスクを下げる（voyages.htmlの「締切」で使用）。 */
.op-danger-gap { margin-left: 16px; }

.mode-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.mode-tabs button { background: var(--cargo-surface-subtle); color: var(--cargo-text); border: 1px solid var(--cargo-border); }
.mode-tabs button.active { background: var(--cargo-primary); color: #fff; border-color: var(--cargo-primary); }

.msg { padding: 10px 12px; border-radius: 4px; margin-bottom: 8px; font-size: 15px; }
.msg.ok { background: var(--cargo-success-bg); color: var(--cargo-success); }
.msg.warn { background: var(--cargo-warning-bg); color: var(--cargo-warning); }
.msg.err { background: var(--cargo-error-bg); color: var(--cargo-error); }
/* Phase 1: 後続Phase(HTML改修)で使う共通状態クラス。今回どのHTMLからも未参照（追加のみ、既存.ok/.warn/.errは変更なし）。
   empty/loadingはneutral（ピンク不使用）のまま維持。 */
.msg.empty { background: var(--cargo-surface-subtle); color: var(--cargo-text-muted); }
.msg.denied { background: #e2e8f0; color: #334155; font-weight: 700; }
.msg.loading { background: #e0f2fe; color: #075985; }

/* Phase 7.2: assign.htmlのスキャン受付状態表示（スキャン待機中/一時停止中/登録成功/エラー）。
   data-mode属性で色分けする——JS側はテキストとdata-modeの両方を設定する
   （テキストは表示用、data-modeはCSSフックかつテスト用の安定した識別子）。 */
.scan-status { display: inline-block; padding: 10px 20px; border-radius: 6px; font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.scan-status[data-mode="ready"] { background: var(--cargo-surface-subtle); color: var(--cargo-text); }
.scan-status[data-mode="paused"] { background: var(--cargo-warning-bg); color: var(--cargo-warning); }
.scan-status[data-mode="busy"] { background: #e0f2fe; color: #075985; }
.scan-status[data-mode="success"] { background: var(--cargo-success-bg); color: var(--cargo-success); }
.scan-status[data-mode="error"] { background: var(--cargo-error-bg); color: var(--cargo-error); }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { border: 1px solid var(--cargo-border); padding: 10px 10px; text-align: left; }
th { background: var(--cargo-primary-soft); color: var(--cargo-text); font-weight: 700; }
td button { margin: 2px 6px 2px 0; }
/* Phase 2A: ごく薄いpinkのhover/選択行。既存JSはどちらのクラスも付与しないため今回は無風。 */
tbody tr:hover td { background: var(--cargo-primary-soft); }
tr.selected td { background: var(--cargo-primary-soft); }

.kpi-row { display: flex; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.kpi { background: var(--cargo-surface-subtle); border: 1px solid var(--cargo-border); border-radius: 6px; padding: 8px 14px; text-align: center; }
.kpi .num { font-size: 20px; font-weight: 700; }
.kpi .lbl { font-size: 13px; color: var(--cargo-text-muted); }
.split-flag { color: #b45309; font-weight: 700; }

/* Phase 3: 汎用状態バッジ。voyage/cart-asset/shipment-record/exceptionの表示専用ラベルに使う。
   内部status値そのものは変えず、DOM表示テキスト＋色分けのみ（既存の状態ラベル変換関数の
   戻り値をこのクラス付きspanに変える形で適用）。文言も必ず併記し色だけに依存しない。 */
.badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.badge-neutral { background: #e2e8f0; color: #475569; }
.badge-active { background: var(--cargo-primary-soft); color: var(--cargo-primary-hover); }
.badge-success { background: var(--cargo-success-bg); color: var(--cargo-success); }
.badge-warning { background: var(--cargo-warning-bg); color: var(--cargo-warning); }
.badge-danger { background: var(--cargo-error-bg); color: var(--cargo-error); }
.badge-closed { background: #e2e8f0; color: #334155; }
.badge-unavailable { background: #f1f5f9; color: #94a3b8; }

/* Phase 1/2A: keyboard focus。:focus-visibleのためmouseクリック時は表示されない。
   Phase 1ではヘッダーが濃紺だったため白outlineの例外を設けていたが、Phase 2Aでヘッダーが
   白基調になったため統一のピンクoutlineに一本化する。 */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cargo-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 2026-07-31: 伝票取消・修正履歴用のネイティブ<dialog>の最小限の見た目調整。
   card/.rowなど既存トークンをそのまま流用し、新規の色は増やさない。 */
dialog { border: 1px solid var(--cargo-border); border-radius: 8px; padding: 20px; max-width: 480px; width: 92vw; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); color: var(--cargo-text); background: var(--cargo-surface); }
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog h3 { margin-top: 0; }
dialog .row > span { color: var(--cargo-text-muted); min-width: 80px; }

/* Phase 2 (作業者アカウント管理): 受け取りリンク結果の行ラベル・QR表示。
   dialog .row > spanと同じ見た目をカード内でも使うための汎用クラス。 */
.claim-result .row > span { color: var(--cargo-text-muted); min-width: 120px; }
.qr-wrap { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--cargo-border); border-radius: 8px; margin: 8px 0; }
.qr-wrap svg { display: block; }

/* Phase 1: レスポンシブ。1366px・タブレット横向き(概ね1024px)は main の可変 max-width で吸収される。
   より狭い画面のみ余白を縮小し、はみ出し・過剰な余白を防ぐ（文字サイズは縮小しない）。 */
@media (max-width: 1024px) {
  main { padding: 16px; }
}
@media (max-width: 480px) {
  main { padding: 12px; }
  .row { gap: 8px; }
  .kpi-row { gap: 10px; }
}