/* P6-1 ネコポケUIリブランド: 淡ブルー背景+紺アクセント+白カード。
   配色以外(レイアウト機構・フォント指定方式)はP5から変更しない。 */
:root {
  --color-bg: #eaf1fb;
  --color-fg: #1c2b45;
  --color-accent: #1e3a6e;
  --color-accent-soft: #e4ecfa;
  --color-border: #d7e2f5;
  --color-danger: #b3392b;
  --color-muted: #5f6f8c;
  --color-card-shadow: 0 1px 3px rgba(30, 58, 110, 0.08), 0 1px 2px rgba(30, 58, 110, 0.06);
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  background: var(--color-bg);
  color: var(--color-fg);
  line-height: 1.5;
}

header.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: var(--color-accent);
  color: white;
}

header.app-header a { color: white; text-decoration: none; }

.brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-logo { width: 32px; height: 32px; border-radius: 8px; display: block; background: white; }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; font-weight: 700; letter-spacing: 0.02em; }
.brand-name small { font-weight: 500; font-size: 0.6rem; letter-spacing: 0.12em; opacity: 0.85; }

nav.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: white;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

nav.app-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-fg);
  font-size: 0.9rem;
  /* 既存バグ修正(P5起源): flex-wrap:nowrapの親でも、アンカーにwhite-space指定が
     無いと個々のリンクがflex-shrinkで縮められ、日本語ラベルが1文字ずつ縦に
     折り返してしまう(390px幅で顕在化)。nowrap+flex-shrink:0で崩さず、
     親のoverflow-x:autoで横スクロールに委ねる。 */
  white-space: nowrap;
  flex-shrink: 0;
}

nav.app-nav .nav-icon { display: inline-flex; color: var(--color-accent); flex-shrink: 0; }
nav.app-nav a.active .nav-icon { color: white; }
nav.app-nav a:hover { background: var(--color-accent-soft); }

nav.app-nav a.active { background: var(--color-accent); color: white; }
nav.app-nav a.active:hover { background: var(--color-accent); }

/* P5 UX改善[P2]: スマホ用の「横にスクロールできます」案内(base.htmlで幅480px以下のみ表示) */
.nav-scroll-hint {
  display: none;
  font-size: 0.75rem;
  color: var(--color-muted);
  padding: 0.25rem 1rem 0;
  background: white;
}

main { padding: 1rem; max-width: 960px; margin: 0 auto; }

.card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--color-card-shadow);
}

/* P6-1: モック風の統計カード(アイコン+ラベル+数値)。ダッシュボードで使用。
   表示するのは既存の集計値のみ(前日比・相場等の新規データ要素は追加しない)。 */
.stat-card { display: flex; align-items: center; gap: 0.85rem; }
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-soft); color: var(--color-accent);
}
.stat-card .stat-body { min-width: 0; }

/* ログイン画面のロゴ */
.login-logo { display: block; width: 128px; height: 128px; margin: 0 auto 0.75rem; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.5rem; border-bottom: 1px solid var(--color-border); text-align: left; }
/* P5 UX改善[P2]: tr onclick遷移を廃止し通常の<a>に統一したため、リンクのタップ領域を広げる */
td a { display: inline-block; min-height: 24px; padding: 0.2rem 0; }

.table-scroll { overflow-x: auto; }

form.stacked label { display: block; margin-bottom: 0.75rem; font-weight: 600; font-size: 0.95rem; }
form.stacked input, form.stacked select, form.stacked textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem;
  margin-top: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 1rem;
}
form.stacked input[type="checkbox"], form.stacked input[type="radio"] { width: auto; min-height: 22px; }

button, .btn {
  display: inline-block;
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  border: none;
  border-radius: 6px;
  background: var(--color-accent);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}
button:disabled, .btn:disabled { opacity: 0.65; cursor: not-allowed; }
button.secondary, .btn.secondary { background: var(--color-muted); }
button.danger { background: var(--color-danger); }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: #e3ece6;
  color: var(--color-accent);
}

.flash { padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem; }
.flash.error { background: #fbe8e6; color: var(--color-danger); }
.flash.success { background: #e3ece6; color: var(--color-accent); }
.flash.warning { background: #fdf3d9; color: #8a6410; }

/* P5 UX改善[P1]: フィールド直下のエラー表示 */
.field-error { color: var(--color-danger); font-size: 0.85rem; font-weight: 400; display: block; margin-top: 0.25rem; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filters select, .filters input {
  min-height: 44px;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.stat-value { font-size: 1.6rem; font-weight: 700; }
.stat-label { color: var(--color-muted); font-size: 0.85rem; }

/* P8-2: 単価帯別/カテゴリ別分析の構成比バー(SVG不使用。幅%指定のみのCSSバー) */
.bar-track {
  background: var(--color-accent-soft);
  border-radius: 999px;
  height: 8px;
  min-width: 60px;
  overflow: hidden;
}
.bar-fill { background: var(--color-accent); height: 100%; }

/* P8-1: 推移グラフの凡例 */
.chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: var(--color-muted); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.chart-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

/* P5 UX改善[P1 Vision待機表示]: 送信中インジケータ(htmxのクラス命名慣習に合わせ、
   .htmx-indicator は既定で非表示、.htmx-request が付いた時だけ表示する) */
.htmx-indicator, [data-loading-indicator] { display: none; }
.htmx-request .htmx-indicator,
[data-loading-indicator].is-active { display: flex; align-items: center; gap: 0.5rem; }

/* 実機検証[実機-1]修正: #vision-loadingへインラインstyle="display:flex"を
   直接付けていたため、[hidden]属性のUA既定スタイル(display:none)より
   詳細度で勝ってしまい、初期表示時から常にインジケータが見えていた。
   インラインstyleを廃し、[hidden]が外れた時だけflex表示するCSSに置き換える。 */
#vision-loading { display: none; align-items: center; gap: 0.5rem; }
#vision-loading:not([hidden]) { display: flex; }

.spinner {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: hanbai-spin 0.8s linear infinite;
}
@keyframes hanbai-spin { to { transform: rotate(360deg); } }

/* P5 UX改善[P2]: タップ領域44px確保(checkbox付き行のlabel) */
.tap-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.4rem 0.25rem;
  cursor: pointer;
}
.tap-row input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }

/* P6-2a: Vision明細の編集可能行(カード名+単価+削除ボタン) */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px dashed var(--color-border);
}
.card-row label { flex: 1 1 160px; margin-bottom: 0; }
.card-row .card-row-remove { flex: 0 0 auto; }

/* スマホ最適化(仕入れ登録画面はこの幅を基準に設計する。PC前提化しないこと) */
@media (max-width: 480px) {
  main { padding: 0.75rem; }
  form.stacked input, form.stacked select, form.stacked textarea { font-size: 1.05rem; padding: 0.8rem; }
  form.stacked input[type="file"] { padding: 0.5rem 0; }
  button, .btn { width: 100%; padding: 0.9rem; font-size: 1.05rem; }
  nav.app-nav { overflow-x: auto; flex-wrap: nowrap; }
  .nav-scroll-hint { display: block; }
  .card ul { padding-left: 1.1rem; margin: 0.5rem 0 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .card-row { flex-direction: column; align-items: stretch; }
}

/* P6-1: PC幅=左サイドバーナビ(モック準拠)。スマホ幅は上のnav.app-navが現行どおり
   上部の横スクロールナビとして残る(このブレークポイント未満では一切変更しない)。 */
@media (min-width: 769px) {
  header.app-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    padding: 0 1.5rem;
    z-index: 20;
  }
  nav.app-nav {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: 220px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.15rem;
    padding: 1rem 0.75rem;
    border-bottom: none;
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    z-index: 10;
  }
  nav.app-nav a { font-size: 0.95rem; }
  .nav-scroll-hint { display: none; }
  main { margin: 64px 0 0 220px; max-width: 1040px; padding: 1.5rem 2rem; }
}