/*
  基幹システムシミュレーター — デザインシステム
  Apple HIG（Human Interface Guidelines）のWeb翻案。
  content over chrome / 淡い区切り線 / 十分な余白 / システムフォント / セマンティックカラー変数。
  light・dark 両対応、prefers-reduced-motion 尊重、AAコントラスト目標。
*/

/* ==========================================================================
   1. Design Tokens（CSS変数）
   ========================================================================== */

:root {
  /* --- タイポグラフィ --- */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.9375rem;/* 15px */
  --text-md: 1.0625rem;  /* 17px */
  --text-lg: 1.375rem;   /* 22px */
  --text-xl: 1.75rem;    /* 28px */
  --text-2xl: 2.25rem;   /* 36px */

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* --- スペーシング（4pxグリッド） --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* --- 角丸・シャドウ --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);

  /* --- モーション --- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* --- ブランド --- */
  --accent: #098fd3;       /* NCSブルー */
  --accent-strong: #001f3f; /* ネイビー（濃色） */
  --accent-strong-hover: #06325c;
  --accent-fg: #ffffff;    /* アクセント上の文字色 */
  --link: var(--accent-strong); /* 本文中の文字リンク色（AA確保のためlightはnavy、darkは明るいblueに切替） */
  --choice-ring: rgba(9, 143, 211, 0.14); /* 選択カードのフォーカスリング（テーマで上書き） */

  color-scheme: light dark;

  /* --- セマンティックカラー（Light） --- */
  --bg: #f5f5f7;              /* systemBackground相当（グループ背景） */
  --bg-elevated: #ffffff;     /* secondarySystemBackground相当（カード等） */
  --bg-grouped: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 0, 0, 0.07);

  --label: #1d1d1f;              /* label */
  --label-secondary: #6e6e73;    /* secondaryLabel */
  --label-tertiary: #75757a;     /* tertiaryLabel（4.5:1以上を確保する濃さに調整） */
  --label-on-accent: #ffffff;

  --separator: rgba(60, 60, 67, 0.16);       /* separator（薄い罫線） */
  --separator-opaque: rgba(60, 60, 67, 0.29);

  --danger: #d70015;
  --danger-bg: rgba(215, 0, 21, 0.1);
  --success: #1f8a3d;
  --success-bg: rgba(31, 138, 61, 0.1);
  --warning: #b8720a;
  --warning-bg: rgba(184, 114, 10, 0.12);
  --info: #098fd3;
  --info-bg: rgba(9, 143, 211, 0.1);

  /* バッジの文字色（淡いtint背景上でもAAコントラストを保つ専用トーン） */
  --badge-danger-fg: var(--danger);
  --badge-success-fg: #146b2c;
  --badge-warning-fg: #8a5807;
  --badge-info-fg: #0a6ea8;

  --focus-ring: rgba(9, 143, 211, 0.45);
}

/* --- セマンティックカラー（Dark） --- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --bg-grouped: #1c1c1e;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-active: rgba(255, 255, 255, 0.10);

    --label: #f5f5f7;
    --label-secondary: #98989d;
    --label-tertiary: #88888f;
    --label-on-accent: #ffffff;

    --separator: rgba(84, 84, 88, 0.6);
    --separator-opaque: rgba(84, 84, 88, 0.75);

    --danger: #ff453a;
    --danger-bg: rgba(255, 69, 58, 0.16);
    --success: #32d74b;
    --success-bg: rgba(50, 215, 75, 0.16);
    --warning: #ffd60a;
    --warning-bg: rgba(255, 214, 10, 0.16);
    --info: #35b0f0;
    --info-bg: rgba(53, 176, 240, 0.16);

    --badge-danger-fg: var(--danger);
    --badge-success-fg: var(--success);
    --badge-warning-fg: var(--warning);
    --badge-info-fg: var(--info);

    --accent: #35b0f0;        /* dark時はやや明るいブルーで視認性確保 */
    --accent-strong: #0f76bd; /* 白文字でAA(4.5:1)を満たす濃さに調整 */
    --accent-strong-hover: #0c63a0;
    --link: var(--accent);    /* darkはaccent自体がAA達成するのでそのままリンク色に使う */
    --choice-ring: rgba(53, 176, 240, 0.22);
    --focus-ring: rgba(53, 176, 240, 0.5);
  }
}

/* 手動テーマ切替に対応（将来のトグル実装用フック） */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-elevated: #1c1c1e;
  --bg-grouped: #1c1c1e;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.10);
  --label: #f5f5f7;
  --label-secondary: #98989d;
  --label-tertiary: #88888f;
  --separator: rgba(84, 84, 88, 0.6);
  --separator-opaque: rgba(84, 84, 88, 0.75);
  --danger: #ff453a;
  --danger-bg: rgba(255, 69, 58, 0.16);
  --success: #32d74b;
  --success-bg: rgba(50, 215, 75, 0.16);
  --warning: #ffd60a;
  --warning-bg: rgba(255, 214, 10, 0.16);
  --info: #35b0f0;
  --info-bg: rgba(53, 176, 240, 0.16);
  --badge-danger-fg: var(--danger);
  --badge-success-fg: var(--success);
  --badge-warning-fg: var(--warning);
  --badge-info-fg: var(--info);
  --accent: #35b0f0;
  --accent-strong: #0f76bd;
  --accent-strong-hover: #0c63a0;
  --link: var(--accent);
  --choice-ring: rgba(53, 176, 240, 0.22);
  --focus-ring: rgba(53, 176, 240, 0.5);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-grouped: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 0, 0, 0.07);
  --label: #1d1d1f;
  --label-secondary: #6e6e73;
  --label-tertiary: #75757a;
  --separator: rgba(60, 60, 67, 0.16);
  --separator-opaque: rgba(60, 60, 67, 0.29);
  --danger: #d70015;
  --danger-bg: rgba(215, 0, 21, 0.1);
  --success: #1f8a3d;
  --success-bg: rgba(31, 138, 61, 0.1);
  --warning: #b8720a;
  --warning-bg: rgba(184, 114, 10, 0.12);
  --info: #098fd3;
  --info-bg: rgba(9, 143, 211, 0.1);
  --badge-danger-fg: var(--danger);
  --badge-success-fg: #146b2c;
  --badge-warning-fg: #8a5807;
  --badge-info-fg: #0a6ea8;
  --accent: #098fd3;
  --accent-strong: #001f3f;
  --accent-strong-hover: #06325c;
  --link: var(--accent-strong);
  --choice-ring: rgba(9, 143, 211, 0.14);
  --focus-ring: rgba(9, 143, 211, 0.45);
}

/* ==========================================================================
   2. Reset / Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-system);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-2) 0;
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-3) 0; }

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* --- フォーカスリング（キーボード操作向け・アクセシビリティ） --- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* --- モーション最小化 --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. レイアウト: .app / .app__sidebar / .app__main / .topbar
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 100vh;
  min-height: 100vh;
  background: var(--bg);
}

.app__sidebar {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  background: var(--bg-elevated);
  border-right: 1px solid var(--separator);
  overflow-y: auto;
}

.app__sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-4);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--label);
}

.app__sidebar-brand .app__brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
}

.app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.app__content {
  flex: 1;
  padding: var(--space-8);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--separator);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--label);
  margin: 0;
}

.topbar__meta {
  font-size: var(--text-sm);
  color: var(--label-secondary);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* レスポンシブ: 狭幅ではサイドバー折りたたみ相当（縦積み） */
@media (max-width: 720px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .app__sidebar {
    grid-row: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--separator);
    padding: var(--space-3) var(--space-4);
  }
  .app__content {
    padding: var(--space-4);
  }
  .topbar {
    padding: var(--space-3) var(--space-4);
  }
}

/* ==========================================================================
   4. ナビ: .nav / .nav__item / .nav__item--active
   ========================================================================== */

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--label-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
}

.nav__item:hover {
  background: var(--bg-hover);
  color: var(--label);
}

.nav__item--active {
  /* accent単体は白文字でAA未達のため、常にAAを満たすaccent-strongを背景に使う */
  background: var(--accent-strong);
  color: var(--label-on-accent);
}

.nav__item--active:hover {
  background: var(--accent-strong-hover);
  color: var(--label-on-accent);
}

.nav__item-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* 横並びナビ（狭幅サイドバー用） */
@media (max-width: 720px) {
  .nav {
    flex-direction: row;
  }
  .nav__item {
    white-space: nowrap;
    width: auto;
  }
}

/* ==========================================================================
   5. ウィザード: .wizard / .wizard__progress / .wizard__step / .choice-grid / .choice
   ========================================================================== */

/* 入口ウィザードは画面いっぱいのステージに中央のカードとして配置する（apple-design/HIG） */
.wizard-page {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-4);
  background: var(--bg);
  color: var(--label);
}

.wizard-page *,
.wizard-page *::before,
.wizard-page *::after {
  box-sizing: border-box;
}

.wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: min(100%, 640px);
  padding: clamp(var(--space-5), 5vw, var(--space-8));
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.wizard__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wizard__progress small {
  color: var(--label-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.wizard__progress h1 {
  max-width: 20ch;
  margin: 0;
  color: var(--label);
  font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.wizard__progress-step {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--separator);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.wizard__progress-step--done,
.wizard__progress-step--active {
  background: var(--accent);
}

/* 現在地は色だけでなくリング（形状）でも判別できるようにする */
.wizard__progress-step--active {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.wizard__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wizard__step-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--label);
}

.wizard__step-subtitle {
  font-size: var(--text-base);
  color: var(--label-secondary);
  margin-bottom: var(--space-4);
}

.wizard__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* アクションが1つ（次へ／この設定ではじめる）のときは右寄せにして視線を落とす */
.wizard__actions .btn:only-child {
  margin-inline-start: auto;
}

.wizard__guide-link {
  margin: 0;
  padding-top: var(--space-2);
  text-align: center;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* ウィザード内の選択肢グリッドは中央に寄せる（ダッシュボードのKPI行は全幅のまま） */
.wizard .choice-grid {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--separator);
  background: var(--bg-elevated);
  color: var(--label);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.choice:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.choice__icon {
  width: 2rem;
  height: 2rem;
  color: var(--accent);
}

.choice__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--label);
}

.choice__desc {
  font-size: var(--text-sm);
  color: var(--label-secondary);
}

.choice--selected {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--info-bg);
  box-shadow: 0 0 0 3px var(--choice-ring);
}

.choice--selected .choice__title {
  /* accent-strongはdarkテーマでこの淡いtint背景上ではAAぎりぎりになるため、
     常に高コントラストなlabelを使い、選択状態は枠線・リング・背景tintで示す */
  color: var(--label);
}

/* ウィザードのモバイル調整（本文は横スクロールさせず選択肢は縦積み） */
@media (max-width: 480px) {
  .wizard {
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
  }
  .wizard .choice-grid {
    grid-template-columns: 1fr;
  }
  .wizard__actions .btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .choice {
    transition: none;
  }
}

/* ==========================================================================
   6. 基本部品: ボタン
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px; /* タッチ操作しやすい最小サイズ（Apple HIG推奨） */
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
  background: var(--bg-elevated);
  color: var(--label);
  border-color: var(--separator);
}

.btn:hover {
  background: var(--bg-hover);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  /* accent単体は白文字でAA(4.5:1)未達のため、常にAAを満たすaccent-strongを背景に使う */
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-fg);
}

.btn--primary:hover {
  background: var(--accent-strong-hover);
  border-color: var(--accent-strong-hover);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--link);
}

.btn--ghost:hover {
  background: var(--bg-hover);
}

.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

.btn--danger:hover {
  filter: brightness(0.9);
}

.btn--sm {
  /* コンパクト表示用途の意図的な例外（デスクトップの密なツールバー等）。
     単独のタップ操作対象になる場合は.btnの標準サイズを使うこと。 */
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* ==========================================================================
   7. 基本部品: カード / KPI
   ========================================================================== */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.card__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--label);
  margin-bottom: var(--space-1);
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--label-secondary);
  margin-bottom: var(--space-4);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.kpi__label {
  font-size: var(--text-sm);
  color: var(--label-secondary);
  font-weight: 500;
}

.kpi__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--label);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi__delta {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* 色だけに頼らず矢印記号でも増減を判別できるようにする */
.kpi__delta--up { color: var(--success); }
.kpi__delta--up::before { content: "\25B2\0020"; } /* ▲ */
.kpi__delta--down { color: var(--danger); }
.kpi__delta--down::before { content: "\25BC\0020"; } /* ▼ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* ==========================================================================
   8. 基本部品: フォーム（.field / .input / .select）
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--label-secondary);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--label-tertiary);
}

.field__error {
  font-size: var(--text-xs);
  color: var(--danger);
}

.input,
.select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
  background: var(--bg-elevated);
  color: var(--label);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.input::placeholder {
  color: var(--label-tertiary);
}

.input:hover,
.select:hover {
  border-color: var(--separator-opaque);
}

.input:focus,
.select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

.select {
  /* 矢印色はlabel-secondaryに追従させ、dark時も視認性を確保する（テーマごとに切替） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236e6e73' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 10px 7px;
  padding-right: var(--space-8);
}

@media (prefers-color-scheme: dark) {
  .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2398989d' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2398989d' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236e6e73' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
}

.input:disabled,
.select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   9. テーブル: .data-table / .data-table__toolbar
   ========================================================================== */

.data-table__wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-table__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--separator);
  flex-wrap: wrap;
}

.data-table__toolbar-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--label);
}

.data-table__toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-5);
  font-weight: 600;
  color: var(--label-secondary);
  border-bottom: 1px solid var(--separator);
  white-space: nowrap;
}

.data-table tbody td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--separator);
  color: var(--label);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table__empty {
  padding: var(--space-10);
  text-align: center;
  color: var(--label-secondary);
}

/* 横スクロール対応（狭幅） */
.data-table__scroll {
  overflow-x: auto;
}

/* ==========================================================================
   10. 状態表示: .badge
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--bg-hover);
  color: var(--label-secondary);
}

.badge--alert {
  background: var(--danger-bg);
  color: var(--badge-danger-fg);
}

.badge--ok {
  background: var(--success-bg);
  color: var(--badge-success-fg);
}

.badge--pending {
  background: var(--warning-bg);
  color: var(--badge-warning-fg);
}

.badge--processing {
  background: var(--info-bg);
  color: var(--badge-info-fg);
}

.badge--done {
  background: var(--success-bg);
  color: var(--badge-success-fg);
}

/* ==========================================================================
   11. ユーティリティ
   ========================================================================== */

.u-text-secondary { color: var(--label-secondary); }
.u-text-tertiary { color: var(--label-tertiary); }
.u-mt-0 { margin-top: 0; }
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Apple native refinement
   既存の "Apple HIG refinement" ブロックを丸ごと置き換える
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. アプリ全体
   -------------------------------------------------------------------------- */

.app {
  grid-template-columns: 224px minmax(0, 1fr);
  background: var(--bg);
}

.app__sidebar {
  gap: var(--space-5);
  padding: var(--space-5) var(--space-3);
  background: var(--bg-elevated);
  border-right: 1px solid var(--separator);
  box-shadow: none;
}

.app__content {
  width: 100%;
  max-width: 1280px;
  padding: var(--space-8) var(--space-10) var(--space-12);
}

.app__content > .card + .card,
.app__content > .choice-grid + .card,
.app__content > .dash-split + .card,
.app__content > .dash-split + .dash-split,
.app__content > .card + .dash-split {
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   2. macOSソースリスト調のナビゲーション
   -------------------------------------------------------------------------- */

.nav {
  gap: var(--space-1);
}

.nav__item {
  min-height: 36px;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: 0;
  box-shadow: none;
}

.nav__item:hover {
  background: var(--bg-hover);
  color: var(--label);
}

.nav__item--active,
.nav__item--active:hover {
  background: var(--bg-active);
  color: var(--label);
  font-weight: 600;
  box-shadow: none;
}

.nav__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   3. トップバー
   -------------------------------------------------------------------------- */

.topbar {
  min-height: 56px;
  padding: var(--space-2) var(--space-10);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--separator);
  box-shadow: none;
}

.topbar > span:first-child {
  color: var(--label);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.topbar > span:last-child {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.topbar .btn--ghost {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}

.topbar .btn--ghost:hover {
  color: var(--label);
}

/* --------------------------------------------------------------------------
   4. インセットグループと見出し
   -------------------------------------------------------------------------- */

.card {
  padding: var(--space-6);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.app__content .card > h3 {
  margin: 0 0 var(--space-4);
  color: var(--label);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

/* テーブルを持つカードは外周を一つのインセットグループとして扱う */
.app__content > .card:has(> .data-table__scroll),
.app__content > .card:has(> .data-table__toolbar) {
  padding: 0;
  overflow: hidden;
}

.app__content > .card:has(> .data-table__scroll) > h3,
.app__content > .card:has(> .data-table__toolbar) > h3 {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
}

/* テーブルを持つ（padding:0の）カード内のノート文・チップ列にも左右の余白を戻し、
   見出し／ツールバー／セルと同じインセットに揃える（flush内で左端に張り付くのを防ぐ） */
.app__content > .card:has(> .data-table__scroll) > .card__subtitle,
.app__content > .card:has(> .data-table__toolbar) > .card__subtitle {
  margin: 0;
  padding: var(--space-2) var(--space-5) var(--space-4);
}

.app__content > .card:has(> .data-table__scroll) > h3:has(+ .card__subtitle),
.app__content > .card:has(> .data-table__toolbar) > h3:has(+ .card__subtitle) {
  padding-bottom: var(--space-1);
}

.app__content > .card:has(> .data-table__scroll) > .ai-samples,
.app__content > .card:has(> .data-table__toolbar) > .ai-samples {
  padding: 0 var(--space-5) var(--space-4);
}

/* 追加フォームは親カードの中で静かに区切る */
#inv-addform:not(:empty) {
  border-bottom: 1px solid var(--separator);
}

#inv-addform > .card {
  border: 0;
  border-radius: 0;
  background: var(--bg-grouped);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. ダッシュボードKPI
   ウィザード内の .choice-grid には影響させない
   -------------------------------------------------------------------------- */

.app__content > .choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.app__content .kpi {
  position: relative;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 前回追加された装飾的なカラーバーを明示的に無効化 */
.app__content .kpi::before {
  display: none;
  content: none;
}

/* 4列表示では各スタットをhairlineで区切る */
.app__content > .choice-grid > .kpi:nth-child(n + 2) {
  border-left: 1px solid var(--separator);
}

.app__content .kpi > .field__label {
  margin: 0;
  color: var(--label-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-normal);
  letter-spacing: 0;
}

.app__content .kpi__value {
  color: var(--label);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. テーブルツールバーとフォーム部品
   -------------------------------------------------------------------------- */

.data-table__toolbar {
  min-height: 56px;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-grouped);
  border-bottom: 1px solid var(--separator);
}

.data-table__toolbar > .input,
.data-table__toolbar > .select {
  width: auto;
  min-width: 144px;
  flex: 1 1 160px;
}

.data-table__toolbar > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.input,
.select {
  min-height: 36px;
  padding-block: var(--space-2);
  background-color: var(--bg-elevated);
  border: 1px solid var(--separator-opaque);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.input:hover,
.select:hover {
  background-color: var(--bg-hover);
  border-color: var(--separator-opaque);
}

.input:focus,
.select:focus {
  background-color: var(--bg-elevated);
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   7. macOSリスト調のテーブル
   -------------------------------------------------------------------------- */

.data-table {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.data-table thead {
  background: var(--bg-hover);
}

.data-table thead th {
  padding: var(--space-2) var(--space-5);
  color: var(--label-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-normal);
  letter-spacing: 0;
  border-bottom: 1px solid var(--separator);
}

.data-table tbody td {
  height: 44px;
  padding: var(--space-2) var(--space-5);
  color: var(--label);
  vertical-align: middle;
  border-bottom: 1px solid var(--separator);
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table tbody td:first-child {
  font-weight: 500;
}

/* ダッシュボード：在庫、発注点 */
.app__content > .choice-grid + .card .data-table :is(th, td):nth-child(n + 2) {
  text-align: right;
}

/* 在庫管理：在庫数 */
.card:has(#inv-filter) .data-table :is(th, td):nth-child(3) {
  text-align: right;
}

/* 受発注：数量 */
.card:has(#ord-type) .data-table :is(th, td):nth-child(4) {
  text-align: right;
}

/* 品目マスタ：単価 */
.card:has(input[data-price]) .data-table :is(th, td):nth-child(4) {
  text-align: right;
}

/* 数値列の右寄せ。上の :has() 方式はカード内に掴めるIDがある表しか指定できず、
   入出庫履歴・会計のようにフックのない表では列位置頼みの脆いセレクタになる。
   th と td の両方に .num を付けて、見出しと数値を必ず同じ端に揃える。 */
.data-table :is(th, td).num {
  text-align: right;
}

.data-table td .input,
.data-table td .select {
  min-height: 32px;
  font-size: var(--text-sm);
}

.data-table td .btn {
  min-height: 32px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   8. ボタン
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--radius-sm);
  letter-spacing: 0;
  box-shadow: none;
}

.btn:hover {
  box-shadow: none;
}

.btn--primary {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-fg);
  box-shadow: none;
}

.btn--primary:hover {
  background: var(--accent-strong-hover);
  border-color: var(--accent-strong-hover);
  color: var(--accent-fg);
  box-shadow: none;
}

.btn--ghost,
.btn--ghost:hover {
  box-shadow: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   9. 小さく静かな状態バッジ
   -------------------------------------------------------------------------- */

.badge {
  min-height: 20px;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
}

.badge--alert {
  background: var(--danger-bg);
  color: var(--badge-danger-fg);
}

.badge--ok,
.badge--done {
  background: var(--success-bg);
  color: var(--badge-success-fg);
}

.badge--pending {
  background: var(--warning-bg);
  color: var(--badge-warning-fg);
}

.badge--processing {
  background: var(--info-bg);
  color: var(--badge-info-fg);
}

/* --------------------------------------------------------------------------
   10. レスポンシブ調整
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
  .app__content {
    padding-inline: var(--space-6);
  }

  .topbar {
    padding-inline: var(--space-6);
  }

  .app__content > .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app__content > .choice-grid > .kpi {
    border-left: 0;
  }

  .app__content > .choice-grid > .kpi:nth-child(even) {
    border-left: 1px solid var(--separator);
  }

  .app__content > .choice-grid > .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--separator);
  }
}

@media (max-width: 720px) {
  .app {
    grid-template-columns: 1fr;
  }

  .app__sidebar {
    padding: var(--space-2) var(--space-4);
  }

  .nav__item {
    min-height: 36px;
  }

  .nav__item--active,
  .nav__item--active:hover {
    box-shadow: none;
  }

  .topbar {
    min-height: 52px;
    padding-inline: var(--space-4);
  }

  .topbar > span:last-child {
    gap: 0;
  }

  .app__content {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }

  .data-table__toolbar > .input,
  .data-table__toolbar > .select {
    min-width: 120px;
  }
}

@media (max-width: 560px) {
  .app__content > .choice-grid {
    grid-template-columns: 1fr;
  }

  .app__content > .choice-grid > .kpi,
  .app__content > .choice-grid > .kpi:nth-child(even),
  .app__content > .choice-grid > .kpi:nth-child(n + 3) {
    border-left: 0;
  }

  .app__content > .choice-grid > .kpi:nth-child(n + 2) {
    border-top: 1px solid var(--separator);
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .topbar > span:last-child {
    width: 100%;
    overflow-x: auto;
  }

  .data-table__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .data-table__toolbar > .input,
  .data-table__toolbar > .select,
  .data-table__toolbar > span {
    width: 100%;
    margin-inline-start: 0;
  }

  .data-table__toolbar > span .btn {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   11. モーション抑制
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nav__item,
  .data-table tbody tr,
  .btn,
  .input,
  .select {
    transition: none;
  }

  .btn:active {
    transform: none;
  }
}

/* ==========================================================================
   12. 経営ダッシュボード / 受発注パイプライン / レポート / トースト / 時計
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 ビュー見出し
   -------------------------------------------------------------------------- */

.view-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.view-head h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

.view-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}

.view-sub {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

/* --------------------------------------------------------------------------
   12.2 KPIグリッド（6枚対応・hairline方式）
   -------------------------------------------------------------------------- */

.app__content > .choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--separator);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: none;
}

.app__content .kpi {
  background: var(--bg-grouped);
  border: 0;
  border-radius: 0;
}

.app__content > .choice-grid > .kpi {
  border-left: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 1050px) {
  .app__content > .choice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .app__content > .choice-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   12.3 2カラムレイアウト（グラフ・ランキング）
   -------------------------------------------------------------------------- */

.dash-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.dash-split .card {
  margin-top: 0;
}

/* 左右で同格の2枚（売掛/買掛など）は均等割りにして、
   片側が極端に狭くなり表が折り返すのを防ぐ */
.dash-split--even {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

@media (max-width: 900px) {
  .dash-split {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   12.4 要対応リスト
   -------------------------------------------------------------------------- */

.action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--separator);
}

.action-item:last-child {
  border-bottom: 0;
}

.action-item__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--radius-full);
  background: var(--label-tertiary);
}

.action-item--danger .action-item__dot { background: var(--danger); }
.action-item--warning .action-item__dot { background: var(--warning); }
.action-item--info .action-item__dot { background: var(--label-tertiary); }

.action-item__body {
  flex: 1;
  min-width: 0;
}

.action-item__title {
  font-weight: 600;
  color: var(--label);
  font-size: var(--text-sm);
}

.action-item__desc {
  color: var(--label-secondary);
  font-size: var(--text-sm);
}

.action-item__link {
  margin-inline-start: auto;
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--link);
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12.5 チャート（棒＋折れ線）
   -------------------------------------------------------------------------- */

.chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart__bar {
  fill: var(--accent);
  fill-opacity: 0.85;
}

.chart__line {
  fill: none;
  stroke: var(--label-secondary);
  stroke-width: 2;
}

.chart__dot {
  fill: var(--label-secondary);
}

.chart__axis {
  stroke: var(--separator);
  stroke-width: 1;
}

.chart__xlabel {
  fill: var(--label-tertiary);
  font-size: 10px;
}

.chart-empty {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  padding: var(--space-4);
}

.chart-caption {
  color: var(--label-tertiary);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   12.6 ドーナツグラフ
   -------------------------------------------------------------------------- */

.donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.chart--donut {
  width: 160px;
  height: 160px;
  flex: 0 0 auto;
}

.donut__total {
  fill: var(--label);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}

.donut__seg {
  fill: none;
  stroke-width: 26;
}

.donut__seg--1, .donut-legend__swatch--1 { stroke: var(--accent); background: var(--accent); }
.donut__seg--2, .donut-legend__swatch--2 { stroke: var(--success); background: var(--success); }
.donut__seg--3, .donut-legend__swatch--3 { stroke: var(--warning); background: var(--warning); }
.donut__seg--4, .donut-legend__swatch--4 { stroke: var(--info); background: var(--info); }
.donut__seg--5, .donut-legend__swatch--5 { stroke: var(--danger); background: var(--danger); }
.donut__seg--6, .donut-legend__swatch--6 { stroke: var(--label-tertiary); background: var(--label-tertiary); }
.donut__seg--7, .donut-legend__swatch--7 { stroke: var(--accent-strong); background: var(--accent-strong); }
.donut__seg--8, .donut-legend__swatch--8 { stroke: var(--label-secondary); background: var(--label-secondary); }

.donut-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.donut-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--label-secondary);
}

.donut-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.donut-legend__value {
  margin-inline-start: auto;
  color: var(--label-tertiary);
}

/* --------------------------------------------------------------------------
   12.7 モジュール状況タイル
   -------------------------------------------------------------------------- */

.module-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 720px) {
  .module-tiles {
    grid-template-columns: 1fr;
  }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.tile:hover {
  background: var(--bg-hover);
}

.tile__label {
  font-size: var(--text-xs);
  color: var(--label-secondary);
}

.tile__value {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--label);
}

.tile__note {
  font-size: var(--text-xs);
  color: var(--label-tertiary);
}

/* --------------------------------------------------------------------------
   12.8 受発注ステータス パイプライン
   -------------------------------------------------------------------------- */

.pipeline {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pipeline__stage {
  flex: 1 1 0;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.pipeline__stage:hover {
  background: var(--bg-hover);
}

.pipeline__stage--active {
  border-color: var(--accent);
  background: var(--info-bg);
}

.pipeline__count {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--label);
}

.pipeline__label {
  font-size: var(--text-sm);
  color: var(--label);
}

.pipeline__amt {
  font-size: var(--text-xs);
  color: var(--label-tertiary);
}

.pipeline__arrow {
  display: flex;
  align-items: center;
  color: var(--label-tertiary);
  font-size: var(--text-lg);
}

@media (max-width: 560px) {
  .pipeline__arrow {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12.9 水平バー（ランキング）
   -------------------------------------------------------------------------- */

.hbar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hbar {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.hbar__label {
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hbar__track {
  height: 8px;
  background: var(--bg-hover);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.hbar__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
}

/* レポートの売上/仕入ランキング（棒グラフ）は角丸なし。テーブル内の進捗バーは対象外 */
.hbar-list .hbar__track,
.hbar-list .hbar__fill {
  border-radius: 0;
}

.hbar__value {
  color: var(--label-secondary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .hbar {
    grid-template-columns: 90px 1fr auto;
  }
}

/* --------------------------------------------------------------------------
   12.10 トップバーの時計
   -------------------------------------------------------------------------- */

.app-clock {
  color: var(--label-tertiary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  margin-inline-end: var(--space-2);
}

@media (max-width: 720px) {
  .app-clock {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12.11 トースト通知
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: var(--label);
  color: var(--bg-elevated);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
  z-index: 100;
  pointer-events: none;
}

.toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

/* ==========================================================================
   Apple premium craft refinement
   style.cssの末尾に追記する最終上書き
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. タイポグラフィと共通アイコン
   -------------------------------------------------------------------------- */

body {
  letter-spacing: -0.005em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--leading-tight);
  letter-spacing: -0.018em;
}

.view-head h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.card h3,
.card__title,
.data-table__toolbar-title {
  font-weight: 650;
  letter-spacing: -0.012em;
}

.kpi__value,
.tile__value,
.pipeline__count,
.pipeline__amt,
.hbar__value,
.data-table td,
.app-clock {
  font-variant-numeric: tabular-nums;
}

.icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
  max-width: none;
  flex: 0 0 auto;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   2. サイドバーとソースリスト
   -------------------------------------------------------------------------- */

.app {
  grid-template-columns: 232px minmax(0, 1fr);
}

.app__sidebar {
  gap: var(--space-4);
  padding: var(--space-5) var(--space-3);
  background: var(--bg-elevated);
  border-right: 1px solid var(--separator);
  box-shadow: inset -1px 0 0 var(--bg-hover);
}

.app__sidebar-brand {
  padding: 0 var(--space-3) var(--space-4);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.018em;
}

.nav {
  gap: var(--space-4);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-group__label {
  margin: var(--space-2) var(--space-3) var(--space-1);
  color: var(--label-tertiary);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: var(--leading-tight);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.006em;
  box-shadow: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.nav__item:hover {
  background: var(--bg-hover);
  border-color: var(--separator);
  color: var(--label);
}

.nav__item--active,
.nav__item--active:hover {
  background: var(--info-bg);
  border-color: var(--separator);
  color: var(--label);
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--bg-hover);
}

.nav__icon {
  display: inline-grid;
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--label-secondary);
}

.nav__icon .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.8;
}

.nav__item:hover .nav__icon {
  color: var(--label);
}

.nav__item--active .nav__icon,
.nav__item--active:hover .nav__icon {
  color: var(--accent);
}

.nav__item:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   3. トップバーとコンテンツ
   -------------------------------------------------------------------------- */

.topbar {
  min-height: 58px;
  padding: var(--space-2) var(--space-10);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--separator);
  box-shadow: inset 0 -1px 0 var(--bg-hover);
}

.topbar > span:first-child,
.topbar__title {
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.app__content {
  max-width: 1280px;
  padding: var(--space-8) var(--space-10) var(--space-12);
}

/* --------------------------------------------------------------------------
   4. カード
   -------------------------------------------------------------------------- */

.card {
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card h3 {
  margin-bottom: var(--space-4);
  color: var(--label);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}

.card__subtitle,
.view-sub {
  color: var(--label-secondary);
  line-height: var(--leading-normal);
}

/* Lightテーマだけに、ごく薄い内側ハイライトを加える */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      var(--shadow-sm);
  }
}

:root[data-theme="light"] .card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    var(--shadow-sm);
}

/* Darkテーマでは影を消し、面と境界の明度差だけで奥行きを作る */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card {
    box-shadow: none;
  }
}

:root[data-theme="dark"] .card {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. ダッシュボード直下のKPI行
   ウィザード内の.choice-gridには影響させない
   -------------------------------------------------------------------------- */

.app__content > .choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.app__content > .choice-grid > .card.kpi {
  position: relative;
  min-height: 142px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  padding: var(--space-5);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--separator) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.app__content > .choice-grid > .card.kpi:hover {
  border-color: var(--separator-opaque) !important;
}

.kpi__icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--info-bg);
  color: var(--accent);
}

.kpi__icon .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.app__content > .choice-grid > .kpi > .field__label,
.app__content > .choice-grid > .kpi > .kpi__label {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

.app__content > .choice-grid > .kpi > .kpi__value {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  color: var(--label);
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.kpi__delta {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 22px;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  color: var(--label-secondary);
  background: var(--bg-hover);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.kpi__delta--up {
  color: var(--badge-success-fg);
  background: var(--success-bg);
}

.kpi__delta--down {
  color: var(--badge-danger-fg);
  background: var(--danger-bg);
}

.kpi__delta--up::before {
  content: "\25B2";
  font-size: 0.72em;
}

.kpi__delta--down::before {
  content: "\25BC";
  font-size: 0.72em;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"])
    .app__content > .choice-grid > .card.kpi {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      var(--shadow-sm);
  }
}

:root[data-theme="light"]
  .app__content > .choice-grid > .card.kpi {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    var(--shadow-sm);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])
    .app__content > .choice-grid > .card.kpi {
    background: var(--bg-grouped);
    box-shadow: none;
  }
}

:root[data-theme="dark"]
  .app__content > .choice-grid > .card.kpi {
  background: var(--bg-grouped);
  box-shadow: none;
}

/* アイコン未実装の移行期間も、既存KPIの配置を崩さない */
.app__content > .choice-grid > .kpi:not(:has(.kpi__icon))
  > .field__label,
.app__content > .choice-grid > .kpi:not(:has(.kpi__icon))
  > .kpi__label {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   6. ボタンとフォーム
   -------------------------------------------------------------------------- */

.btn {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--label);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-sm);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn:hover {
  background: var(--bg-hover);
  border-color: var(--separator-opaque);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  background: var(--bg-active);
  transform: scale(0.985);
}

.btn--primary {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-fg);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--accent-strong-hover);
  border-color: var(--accent-strong-hover);
  color: var(--accent-fg);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--link);
  box-shadow: none;
}

.btn--ghost:hover {
  background: var(--bg-hover);
  border-color: transparent;
  color: var(--link);
  box-shadow: none;
}

.btn:focus-visible,
.input:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.input,
.select {
  min-height: 40px;
  border-color: var(--separator);
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  font-size: var(--text-sm);
}

.input:hover,
.select:hover {
  border-color: var(--separator-opaque);
}

/* --------------------------------------------------------------------------
   7. テーブル
   -------------------------------------------------------------------------- */

.data-table__scroll {
  overflow-x: auto;
  border-radius: var(--radius-md);
}

.data-table__toolbar {
  gap: var(--space-3);
  /* 左右を表セル(th/td)と同じ space-5 に揃える。0だとドロップダウンやボタンが
     カードの端に貼り付き、下の表の内容とインセットがズレて見える */
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--separator);
}

.data-table {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.data-table thead th {
  padding: var(--space-3) var(--space-5);
  background: var(--bg-grouped);
  border-bottom: 1px solid var(--separator-opaque);
  color: var(--label-secondary);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: var(--leading-tight);
  letter-spacing: 0.025em;
}

.data-table tbody td {
  padding: var(--space-4) var(--space-5);
  border-bottom-color: var(--separator);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table tbody tr:focus-within {
  background: var(--bg-hover);
}

/* --------------------------------------------------------------------------
   8. バッジ
   -------------------------------------------------------------------------- */

.badge {
  min-height: 22px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--separator);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  box-shadow: inset 0 1px 0 var(--bg-hover);
}

.badge--alert {
  background: var(--danger-bg);
  color: var(--badge-danger-fg);
}

.badge--ok,
.badge--done {
  background: var(--success-bg);
  color: var(--badge-success-fg);
}

.badge--pending {
  background: var(--warning-bg);
  color: var(--badge-warning-fg);
}

.badge--processing {
  background: var(--info-bg);
  color: var(--badge-info-fg);
}

/* --------------------------------------------------------------------------
   9. モジュールタイル
   -------------------------------------------------------------------------- */

.module-tiles {
  gap: var(--space-3);
}

.tile {
  position: relative;
  min-height: 124px;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  color: var(--label);
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.tile:hover {
  background: var(--bg-hover);
  border-color: var(--separator-opaque);
  transform: translateY(-1px);
}

.tile:active {
  transform: translateY(0);
}

.tile:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.tile > .icon,
.tile__icon {
  color: var(--accent);
}

.tile > .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: var(--space-1);
}

.tile__label {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.tile__value {
  color: var(--label);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.tile__note {
  color: var(--label-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile {
    box-shadow: none;
  }
}

:root[data-theme="dark"] .tile {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   10. パイプライン
   -------------------------------------------------------------------------- */

.pipeline {
  gap: var(--space-2);
}

.pipeline__stage {
  min-width: 108px;
  min-height: 104px;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.pipeline__stage:hover {
  background: var(--bg-hover);
  border-color: var(--separator-opaque);
}

.pipeline__stage--active,
.pipeline__stage--active:hover {
  background: var(--info-bg);
  border-color: var(--accent);
}

.pipeline__stage--active .pipeline__count {
  color: var(--accent);
}

.pipeline__stage:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.pipeline__count {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.pipeline__label {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.pipeline__amt {
  margin-top: var(--space-1);
  color: var(--label-tertiary);
  font-size: var(--text-xs);
}

.pipeline__arrow {
  color: var(--label-tertiary);
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pipeline__stage {
    box-shadow: none;
  }
}

:root[data-theme="dark"] .pipeline__stage {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   11. 要対応リスト
   -------------------------------------------------------------------------- */

.action-item {
  align-items: center;
  gap: var(--space-3);
  min-height: 58px;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.action-item:hover {
  background: var(--bg-hover);
}

.action-item__dot {
  width: 7px;
  height: 7px;
  margin-top: 0;
  box-shadow: 0 0 0 3px var(--bg-hover);
}

.action-item__title {
  font-weight: 650;
  letter-spacing: -0.006em;
}

.action-item__desc {
  margin-top: var(--space-1);
  color: var(--label-secondary);
  line-height: var(--leading-normal);
}

.action-item__link {
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.action-item__link:hover {
  background: var(--bg-hover);
  text-decoration: none;
}

.action-item__link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   12. グラフ
   -------------------------------------------------------------------------- */

.chart__bar {
  fill: var(--accent);
  fill-opacity: 0.76;
}

.chart__line {
  stroke: var(--label-secondary);
  stroke-width: 1.7;
}

.chart__dot {
  fill: var(--bg-elevated);
  stroke: var(--label-secondary);
  stroke-width: 1.5;
}

.chart__axis {
  stroke: var(--separator);
}

.chart-caption {
  color: var(--label-tertiary);
  line-height: var(--leading-normal);
}

.hbar-list {
  gap: var(--space-4);
}

.hbar__track {
  height: 7px;
  background: var(--bg-hover);
  border: 1px solid var(--separator);
}

.hbar__fill {
  background: var(--accent);
}

.donut__seg {
  stroke-width: 24;
}

/* --------------------------------------------------------------------------
   13. レスポンシブ
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
  .app__content {
    padding-inline: var(--space-6);
  }

  .topbar {
    padding-inline: var(--space-6);
  }

  .app__content > .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app__content > .choice-grid > .card.kpi {
    border: 1px solid var(--separator) !important;
  }
}

@media (max-width: 720px) {
  .app {
    grid-template-columns: 1fr;
  }

  .app__sidebar {
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--separator);
    box-shadow: inset 0 -1px 0 var(--bg-hover);
  }

  .nav {
    flex-direction: row;
    gap: var(--space-2);
  }

  .nav-group {
    flex-direction: row;
  }

  .nav-group__label {
    display: none;
  }

  .nav__item {
    width: auto;
    min-height: 38px;
    white-space: nowrap;
  }

  .topbar {
    padding-inline: var(--space-4);
  }

  .app__content {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }

  .tile:hover {
    transform: none;
  }
}

@media (max-width: 560px) {
  .app__content > .choice-grid {
    grid-template-columns: 1fr;
  }

  .app__content > .choice-grid > .card.kpi {
    min-height: 132px;
    border: 1px solid var(--separator) !important;
  }

  .pipeline__arrow {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   14. モーションを減らす設定
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nav__item,
  .card,
  .tile,
  .pipeline__stage,
  .action-item,
  .data-table tbody tr,
  .btn,
  .input,
  .select {
    transition: none;
  }

  .btn:active,
  .tile:hover,
  .tile:active {
    transform: none;
  }
}

/* ==========================================================================
   15. 補助ルール（統合仕様2: 新クラスの最小スタイル。既存トークンのみ使用）
   ========================================================================== */

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

.tile__icon .icon,
.kpi__icon .icon {
  width: 1.3em;
  height: 1.3em;
}

.action-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.action-item__icon--danger {
  color: var(--danger);
}

.action-item__icon--warning {
  color: var(--warning);
}

.action-item__icon--info {
  color: var(--label-tertiary);
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.settings-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--separator);
  font-size: var(--text-sm);
}

.settings-list__row:last-child {
  border-bottom: 0;
}

.settings-list__row dt {
  color: var(--label-secondary);
}

.settings-list__row dd {
  margin: 0;
  color: var(--label);
  font-weight: 600;
}
/* ==========================================================================
   追補: グラフのリッチ化（グラデバー/グリッド/エリア塗り/ハロードット）＋設定の余白
   ========================================================================== */

/* 棒は縦グラデーション（角丸なし）。CSSのfillが属性より優先されるため、
   ここでグラデーションを明示指定して既存の単色fillを上書きする */
.chart__bar {
  fill: url(#chartBarGrad);
  fill-opacity: 1;
}
.chart__grad-bar-a { stop-color: var(--accent); stop-opacity: 0.95; }
.chart__grad-bar-b { stop-color: var(--accent); stop-opacity: 0.42; }

/* 目安の水平グリッド（淡く） */
.chart__grid {
  stroke: var(--separator);
  stroke-opacity: 0.55;
  stroke-width: 1;
}

/* 折れ線の下の面（粗利率トレンドの厚み） */
.chart__area { fill: url(#chartAreaGrad); }
.chart__grad-area-a { stop-color: var(--label-secondary); stop-opacity: 0.16; }
.chart__grad-area-b { stop-color: var(--label-secondary); stop-opacity: 0; }

/* 折れ線とドット（ハロー付き） */
.chart__line {
  fill: none;
  stroke: var(--label-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart__dot {
  fill: var(--bg-elevated);
  stroke: var(--warning);
  stroke-width: 1.6;
}
.chart__axis { stroke: var(--separator); stroke-width: 1; }

/* 折れ線＝粗利率はアンバーで棒（青）と色分けし、どちらが何かを一目で分かるように */
.chart__line { stroke: var(--warning); }
.chart__grad-area-a { stop-color: var(--warning); stop-opacity: 0.14; }
.chart__grad-area-b { stop-color: var(--warning); stop-opacity: 0; }

/* Y軸の目盛り（左＝売上高/万円＝青、右＝粗利率/%＝アンバー） */
.chart__ylabel { font-size: 10px; }
.chart__ylabel--bar { fill: var(--accent); }
.chart__ylabel--line { fill: var(--warning); }

/* 軸タイトル（何の軸かを明示） */
.chart__axis-title { font-size: 10.5px; font-weight: 700; }
.chart__axis-title--bar { fill: var(--accent); }
.chart__axis-title--line { fill: var(--warning); }

/* ドーナツ中央の単位ラベル */
.donut__unit { fill: var(--label-tertiary); font-size: 11px; }

/* キャプションの凡例キー（棒／折れ線の色見本） */
.legend-key { display: inline-block; vertical-align: middle; margin-right: 4px; }
.legend-key--bar { width: 12px; height: 12px; border-radius: 2px; background: var(--accent); }
.legend-key--line {
  width: 16px;
  height: 0;
  border-top: 3px solid var(--warning);
  border-radius: 2px;
}

/* 設定画面のボタン群（.data-table__toolbar を流用するとカードの余白が消えるため専用クラス） */
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   原価・製番照会（wave 2）
   -------------------------------------------------------------------------- */

/* 原価の見積差異が超過（実績原価 > 見積）の場合の強調表示 */
.cost-over {
  color: var(--danger);
}

/* 製番タイムラインの完了ステージ（.pipeline を流用） */
.pipeline__stage--done {
  border-color: var(--success);
  background: var(--success-bg);
}

.pipeline__stage--done .pipeline__count {
  color: var(--success);
}

/* --------------------------------------------------------------------------
   生産・設計・アフターサービス（wave 3）
   -------------------------------------------------------------------------- */

/* 生産ビューの作業指図テーブル内で進捗バーを使うための調整。
   .hbar__track は span（既定でinline）のため、inline styleのwidthが効くよう
   inline-blockに切り替える。色・トークンは既存の .hbar__track/.hbar__fill を流用。 */
.data-table .hbar__track {
  display: inline-block;
  vertical-align: middle;
  height: 6px;
  width: 120px;
}

/* 設計・技術ビューのBOMカード見出し行（品目名＋右に図番/Rev.）。
   .view-head はページ見出し用に余白が大きいため、カード内の小見出しには
   専用クラスで余白を詰める。色・フォントは既存の h3 / .card__subtitle を流用。 */
.bom-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.bom-head h3,
.bom-head .card__subtitle {
  margin-bottom: 0;
}

/* 表を持つカードは padding: 0 になり、余白は「> h3」「> .card__subtitle」にだけ
   戻している（上部の .app__content > .card:has(> .data-table__scroll) 参照）。
   .bom-head はその間に挟まる div なのでどちらにも当たらず、品目名と図番が
   カード枠に張り付いて表のセルとインセットがズレていた。h3 と同じ余白を与える。 */
.app__content > .card:has(> .data-table__scroll) > .bom-head {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
}

/* BOM表の数量列。td だけ右寄せで th が左寄せのままだったため、
   見出しと数値の位置がズレていた。他ビュー同様 th/td をまとめて右寄せにする。 */
.bom-head + .data-table__scroll .data-table :is(th, td):nth-child(2) {
  text-align: right;
}

/* --------------------------------------------------------------------------
   AI取込・ナレッジ・権限（wave 4・全業種）
   -------------------------------------------------------------------------- */

/* ナレッジ一覧のタグチップ */
.doc-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--label-secondary);
  font-size: var(--text-xs);
  margin-right: 4px;
}

/* 権限マトリクスの ○/– */
.perm-yes {
  color: var(--accent);
  font-weight: 600;
}

.perm-no {
  color: var(--label-tertiary);
}

/* AI取込のサンプル候補ボタン列 */
.ai-samples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* AI取込の結果カード（種別バッジ＋確信度） */
.ai-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.ai-result__conf {
  font-size: var(--text-xs);
  color: var(--label-secondary);
}

.ai-field-row {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--label-secondary);
}

.ai-field__k {
  color: var(--label-tertiary);
}

/* topbarの権限（ロール）切替 */
.role-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-end: var(--space-2);
}

.role-switch__label {
  font-size: var(--text-xs);
  color: var(--label-tertiary);
}

.role-switch .select {
  min-height: 32px;
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .role-switch__label {
    display: none;
  }
}

/* ==========================================================================
   デモ側修正: サイドバー固定＋ウィザードの業種アイコン
   ========================================================================== */

/* --------------------------------------------------------------------------
   サイドバーを固定にする（本文＝#view だけスクロール）
   -------------------------------------------------------------------------- */

.app { height: 100vh; overflow: hidden; }
.app__sidebar { height: 100vh; overflow-y: auto; }
.app__main { height: 100vh; min-height: 0; overflow: hidden; }
.topbar { flex: 0 0 auto; }
.app__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* モバイル(<=720px)は従来どおり縦積みスクロールに戻す */
@media (max-width: 720px) {
  .app { height: auto; overflow: visible; }
  .app__sidebar { height: auto; }
  .app__main { height: auto; overflow: visible; }
  .app__content { overflow: visible; }
}

/* --------------------------------------------------------------------------
   ウィザードの業種選択ボタン（アイコン＋ラベル）
   -------------------------------------------------------------------------- */

.choice__icon { display: inline-flex; }
.choice__icon .icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.choice--industry { gap: var(--space-2); }

/* ウィザードstep3の「すべて選択」小ボタン */
.wizard__selectall-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-1);
}
.wizard__selectall {
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: none;
  color: var(--link);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}