/* ==========================================================================
   New MVP テーマ定義 v3
   ワイヤーフレーム (s301_product_list.html) 差分クローズ版
   ========================================================================== */

/* --------- デザイントークン --------- */
:root {
  --nm-font: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;

  /* テキスト色 — wireframe 準拠、高コントラスト */
  --nm-c-heading:     #111827;
  --nm-c-body:        #1a1a1a;   /* テーブル本文 */
  --nm-c-label:       #333;      /* UI ラベル・パネル見出し */
  --nm-c-secondary:   #555;      /* 補助情報 */
  --nm-c-muted:       #6b7b8d;   /* ソートラベル・注記 */
  --nm-c-faint:       #9ca3af;
  --nm-c-placeholder: #888;      /* placeholder（視認できる濃さ） */
  --nm-c-empty:       #bbb;      /* 空値（—） */

  /* プライマリ — wireframe Bootstrap blue (#337ab7) */
  --nm-c-primary:   #337ab7;
  --nm-c-primary-h: #286090;

  /* リンク色 — wireframe 準拠 Bootstrap blue (#337ab7) */
  --nm-c-link:      #337ab7;
  --nm-c-link-h:    #2563a8;

  /* アクセント */
  --nm-c-success: #16a34a;
  --nm-c-danger:  #dc2626;
  --nm-c-warning: #d97706;
  --nm-c-purple:  #7c3aed;
  --nm-c-orange:  #f97316;

  /* 入力フィールド */
  --nm-input-height: 28px;
  --nm-input-radius: 2px;
  --nm-input-padding: 4px 8px;

  /* カード */
  --nm-card-radius: 2px;
  --nm-card-border: 1px solid #d9d9d9;

  /* ボーダー */
  --nm-border:       #d9d9d9;
  --nm-border-light: #e5e7eb;

  /* 背景 */
  --nm-bg-page:    #f0f0f0;
  --nm-bg-surface: #ffffff;
  --nm-bg-header:  #f5f5f5;
  --nm-bg-hover:   #f8fafc;

  /* フォントサイズ */
  --nm-sz-xs:   11px;
  --nm-sz-sm:   12px;
  --nm-sz-base: 13px;
  --nm-sz-md:   14px;
  --nm-sz-num:  15px;   /* 数値列 */
  --nm-sz-lg:   16px;
  --nm-sz-xl:   18px;

  /* フォントウェイト */
  --nm-fw-normal:   400;
  --nm-fw-medium:   500;
  --nm-fw-semibold: 600;
  --nm-fw-bold:     700;

  /* バッジ — さらに四角い印象に */
  --nm-badge-radius: 1px;
}

/* =========================================================================
   ページ見出し
   ========================================================================= */
.nm-page-title {
  font-size: var(--nm-sz-xl);
  font-weight: var(--nm-fw-bold);
  color: var(--nm-c-heading);
  line-height: 1.3;
}

/* =========================================================================
   フィルターパネル
   ========================================================================= */

/* パネルヘッダー — wireframe: bg #f5f5f5, fw 700, 14px, color #333 */
.nm-panel-header {
  background: var(--nm-bg-header);
  font-size: var(--nm-sz-md);
  font-weight: var(--nm-fw-bold);
  color: var(--nm-c-label);
  cursor: pointer;
  user-select: none;
}

/* フィルター入力ラベル — wireframe: fw 600, 13px, #333 */
.nm-filter-label {
  display: block;
  font-size: var(--nm-sz-base);   /* 13px (wireframe 準拠) */
  font-weight: var(--nm-fw-bold); /* 700 — くっきり */
  color: var(--nm-c-label);
  margin-bottom: 3px;
}

/* フィルター内セクションタイトル */
.nm-filter-section-title {
  font-size: var(--nm-sz-sm);
  font-weight: var(--nm-fw-bold);
  color: var(--nm-c-label);
}

/* 列ヘッダー（非表示にする / 表示する） */
.nm-filter-col-header {
  font-size: var(--nm-sz-xs);
  font-weight: var(--nm-fw-bold);
  color: var(--nm-c-label);
  padding-bottom: 2px;
}

/* ラジオ / チェックボックス横テキスト — wireframe: fw 400, 13px */
.nm-check-label {
  font-size: var(--nm-sz-base);
  font-weight: var(--nm-fw-medium); /* 500 — wireframe より少し強め */
  color: var(--nm-c-label);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ソートラベル / 補足テキスト */
.nm-sort-label {
  font-size: var(--nm-sz-sm);       /* 11px→12px: 視認性向上 */
  font-weight: var(--nm-fw-medium); /* 500: 軽すぎないウェイト */
  color: var(--nm-c-secondary);     /* #555: muted より濃く可読性向上 */
  white-space: nowrap;
}

/* select / input 共通 — wireframe: 13px, color #1a1a1a */
.nm-select,
.nm-input {
  font-family: var(--nm-font);
  font-size: var(--nm-sz-base);
  color: var(--nm-c-body);
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
}
.nm-input::placeholder {
  color: var(--nm-c-placeholder); /* #888 — wireframe 寄りの視認できる薄さ */
  font-size: var(--nm-sz-base);
}
.nm-select:focus,
.nm-input:focus {
  outline: none;
  border-color: var(--nm-c-primary);
  box-shadow: 0 0 0 2px rgba(51,122,183,0.18);
}

/* =========================================================================
   ストア別フィルタバッジ（ページ上部）
   wireframe: border-radius 3px, name 14px/700, counts 13px/500
   ========================================================================= */
.nm-store-filter-btn {
  border-radius: var(--nm-badge-radius); /* 2px — 四角さ強め */
  padding: 7px 12px;
  text-align: left;
  color: #fff;
  border: 2px solid transparent;
  transition: border-color 0.15s, opacity 0.15s;
  cursor: pointer;
  min-width: 110px;
}
.nm-store-filter-btn:hover { opacity: 0.88; }

.nm-store-filter-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.nm-store-filter-counts {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
  line-height: 1.45;
  margin-top: 3px;
}

/* =========================================================================
   バッジ共通
   ========================================================================= */

/* ベースバッジ */
.nm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: var(--nm-badge-radius);
  font-size: var(--nm-sz-xs);
  font-weight: var(--nm-fw-bold);
  white-space: nowrap;
  line-height: 1.5;
}

/* ストアバッジ（テーブル行内 — 上部フィルタバッジと同一カラー/白文字/太字） */
.nm-store-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: var(--nm-sz-xs);
  font-weight: var(--nm-fw-bold);
  color: #fff;
  white-space: nowrap;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* 仕入先バッジ */
.nm-supplier-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--nm-badge-radius);
  font-size: var(--nm-sz-xs);
  font-weight: var(--nm-fw-bold); /* 700 — くっきり */
  background: #fef3c7;
  color: #78350f; /* 暗めのアンバー */
  white-space: nowrap;
}

/* ステータスバッジ — 文字サイズ・余白調整済み */
.nm-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: var(--nm-fw-bold);
  color: #fff;
  white-space: nowrap;
  line-height: 20px;
  letter-spacing: 0.02em;
}

/* ラベルバッジ共通 */
.nm-label {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--nm-badge-radius);
  font-size: 11px;
  font-weight: var(--nm-fw-bold); /* 700 — wireframe: label-badge fw 700 */
  white-space: nowrap;
  line-height: 1.5;
}

/* ラベルバッジ種別 — wireframe の label 色に合わせ高コントラストに */
.nm-label-ship   { background: #d1fae5; color: #065f46; }
.nm-label-profit { background: #d1fae5; color: #065f46; }
.nm-label-keepa  { background: #dbeafe; color: #1e3a8a; }
.nm-label-ng     { background: #fee2e2; color: #991b1b; }
.nm-label-ip     { background: #fef3c7; color: #78350f; }
.nm-label-rule   { background: #ede9fe; color: #5b21b6; }

/* =========================================================================
   テーブル
   wireframe: th bg #f5f5f5, fw 700, color #333, 12px / td color #1a1a1a, 13px
   ========================================================================= */

.nm-data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;            /* 列幅を厳密に制御 */
}

/* ヘッダー行 */
.nm-data-table thead th {
  background: var(--nm-bg-header);
  font-size: 11px;                    /* WF準拠: 14px → 11px */
  font-weight: var(--nm-fw-semibold); /* 600 */
  color: var(--nm-c-label);           /* #333 */
  padding: 6px 8px;                   /* WF準拠: 8px 6px → 6px 8px */
  height: 32px;                       /* WF準拠 */
  border-bottom: 2px solid var(--nm-border);
  vertical-align: middle;
  white-space: nowrap;
}

/* ボディセル共通 */
.nm-data-table tbody td {
  font-size: 12px;                /* WF準拠: 13px → 12px */
  font-weight: 400;               /* WF準拠 */
  color: var(--nm-c-body);        /* #1a1a1a */
  padding: 6px 8px;               /* WF準拠: 7px 6px → 6px 8px */
  border-bottom: 1px solid var(--nm-border-light);
  vertical-align: middle;         /* 全列縦中央 */
  text-align: center;             /* 全列横中央（商品情報列はtemplate側でtext-leftを明示） */
}

/* ホバー */
.nm-data-table tbody tr:hover td {
  background: var(--nm-bg-hover);
}

/* NG 行（赤み） */
tr.nm-row-ng td           { background: #fff5f5; }
tr.nm-row-ng:hover td     { background: #fee2e2; }

/* 知財行（黄み） */
tr.nm-row-ip td           { background: #fffde7; }
tr.nm-row-ip:hover td     { background: #fef9c4; }

/* 出品済み行（sku_locked）— opacity廃止、薄い背景で区別 */
tr.nm-row-locked td       { background: #f8f9fa; }
tr.nm-row-locked:hover td { background: #f1f3f5; }

/* =========================================================================
   テーブル内テキスト階層 — wireframe の cell 階層に準拠
   ========================================================================= */

/* 商品名（英語）— table-layout:fixedでの溢れ対策 */
.nm-cell-primary {
  font-size: 12px;                  /* WF準拠: 14px → 12px */
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;                 /* WF準拠: 700 → 600 */
  color: var(--nm-c-heading);       /* #111827 */
  line-height: 1.4;
}

/* 商品名（日本語）/ カテゴリ / SKU — wireframe: cell-sub 12px/normal #555 */
.nm-cell-sub {
  font-size: 11px;                    /* WF準拠: 12px → 11px */
  color: var(--nm-c-secondary);       /* #555 */
  line-height: 1.4;
  font-weight: var(--nm-fw-medium);   /* 500: SKU等の視認性向上 */
}

/* カテゴリー文字（テーブル内） — やや小さめに調整 */
.nm-cell-category {
  font-size: 10px;
  color: var(--nm-c-secondary);
  line-height: 1.3;
  font-weight: var(--nm-fw-normal);
}

/* ブランド / 仕入価格 / 重量 */
.nm-cell-meta {
  font-size: 10px;                  /* WF準拠: 11px → 10px */
  color: var(--nm-c-secondary);     /* #555 */
  line-height: 1.6;
  font-weight: var(--nm-fw-normal);
}
.nm-cell-meta strong {
  font-weight: var(--nm-fw-bold);   /* 値部分は太字 */
  color: var(--nm-c-body);
}

/* 価格列 — wireframe: 数値は大きめ・太め */
.nm-cell-price {
  font-size: 12px;
  font-weight: 400;
  color: var(--nm-c-body);
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  text-align: right;                /* WF準拠: 価格は右揃え */
}

/* 在庫 / 販売数 */
.nm-cell-number {
  font-size: 12px;                  /* WF準拠: 15px → 12px */
  font-weight: 400;                 /* WF準拠: 600 → 400 */
  color: var(--nm-c-body);
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  text-align: center;
}

/* アナリティクス */
.nm-cell-analytics {
  font-size: 12px;
  font-weight: 400;
  color: var(--nm-c-label);
  font-variant-numeric: tabular-nums;
  line-height: 1.65;
  text-align: right;                /* WF準拠: アナリティクスは右揃え */
}

/* 日付列 — 文字サイズやや小さめ */
.nm-cell-date {
  font-size: 11px;
  font-weight: 400;
  color: var(--nm-c-secondary);
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

/* 配送料補足（価格列内 — 初期価格/現在価格と同サイズ・同ウェイトに統一） */
.nm-cell-shipping {
  font-size: var(--nm-sz-base);     /* 13px: 初期/現在価格と同サイズ */
  color: var(--nm-c-muted);
  font-weight: var(--nm-fw-normal); /* 400: 価格テキストと同ウェイト */
}

/* =========================================================================
   条件付き色
   ========================================================================= */
.nm-stock-zero    { color: var(--nm-c-danger);  font-weight: var(--nm-fw-bold); }
.nm-sales-positive{ color: var(--nm-c-success); font-weight: var(--nm-fw-bold); }

/* =========================================================================
   リンク — 日本語UI慣習: 青 + 下線（wireframe: #337ab7）
   ========================================================================= */
.nm-data-table a,
.nm-breadcrumb a {
  color: var(--nm-c-link);      /* ボタン primary と独立したリンク青 */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nm-data-table a:hover,
.nm-breadcrumb a:hover {
  color: var(--nm-c-link-h);
  opacity: 0.85;
}

/* チェックボックスサイズ拡大（テスト・レビュー容易性向上） */
.nm-data-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* =========================================================================
   ページネーション
   ========================================================================= */
.nm-page-btn {
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nm-border);
  border-radius: 3px;
  background: var(--nm-bg-surface);
  color: var(--nm-c-label);
  font-size: var(--nm-sz-sm);
  font-family: var(--nm-font);
  cursor: pointer;
  transition: background 0.1s;
  padding: 0 5px;
}
.nm-page-btn:hover:not(:disabled) { background: var(--nm-bg-header); }
.nm-page-btn.active {
  background: var(--nm-c-primary);
  color: #fff;
  border-color: var(--nm-c-primary);
  font-weight: var(--nm-fw-semibold);
}
.nm-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================================================================
   ボタン
   ========================================================================= */

/* テーブル行内アクション（編集 / 削除 / ログ） */
.nm-btn-action {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 10px;
  font-weight: var(--nm-fw-medium);
  color: var(--nm-c-label);
  background: #fff;
  cursor: pointer;
  transition: background 0.1s;
  font-family: var(--nm-font);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
}
.nm-btn-action:hover { background: var(--nm-bg-header); }

/* プライマリアクション（ST変更 / 実行） */
.nm-btn-action-primary {
  display: inline-block;
  padding: 2px 6px;
  border: none;
  border-radius: 3px;
  font-size: 10px;
  font-weight: var(--nm-fw-semibold);
  color: #fff;
  background: var(--nm-c-primary);
  cursor: pointer;
  transition: background 0.1s;
  font-family: var(--nm-font);
  white-space: nowrap;
  line-height: 1.5;
}
.nm-btn-action-primary:hover { background: var(--nm-c-primary-h); }

/* フィルター送信（中サイズ） */
.nm-btn-primary-md {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: none;
  border-radius: 3px;
  font-size: var(--nm-sz-base);
  font-weight: var(--nm-fw-semibold);
  color: #fff;
  background: var(--nm-c-primary);
  cursor: pointer;
  transition: background 0.1s;
  font-family: var(--nm-font);
}
.nm-btn-primary-md:hover { background: var(--nm-c-primary-h); }

/* フィルタークリア（中サイズ） */
.nm-btn-outline-md {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: var(--nm-sz-base);
  font-weight: var(--nm-fw-medium);
  color: var(--nm-c-label);
  background: #fff;
  cursor: pointer;
  transition: background 0.1s;
  font-family: var(--nm-font);
}
.nm-btn-outline-md:hover { background: var(--nm-bg-header); }

/* NG 系ボタン（赤）— wireframe: label-exclude bg #ffcdd2 color #b71c1c */
.nm-btn-danger-soft {
  display: inline-block;
  padding: 1px 5px;
  border: none;
  border-radius: 3px;
  font-size: 10px;
  font-weight: var(--nm-fw-bold); /* 700 */
  color: #b71c1c;
  background: #ffcdd2;
  cursor: pointer;
  transition: background 0.1s;
  font-family: var(--nm-font);
  white-space: nowrap;
  line-height: 1.5;
}
.nm-btn-danger-soft:hover { background: #ef9a9a; }

/* 知財ボタン（アンバー）— wireframe: label-warn bg #fff9c4 color #f57f17 */
.nm-btn-warn-soft {
  display: inline-block;
  padding: 1px 5px;
  border: none;
  border-radius: 3px;
  font-size: 10px;
  font-weight: var(--nm-fw-bold);
  color: #e65100;
  background: #fff3e0;
  cursor: pointer;
  transition: background 0.1s;
  font-family: var(--nm-font);
  white-space: nowrap;
  line-height: 1.5;
}
.nm-btn-warn-soft:hover { background: #ffe0b2; }

/* ===== モーダル ===== */
.nm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nmFadeIn 0.15s ease;
}
@keyframes nmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nm-modal {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  min-width: 360px;
  max-width: 560px;
  width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: nmSlideUp 0.15s ease;
}
@keyframes nmSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.nm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  font-weight: 600;
  color: var(--nm-c-heading);
  flex-shrink: 0;
}
.nm-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--nm-c-muted);
  cursor: pointer;
  padding: 0 4px;
  font-family: var(--nm-font);
}
.nm-modal-close:hover { color: var(--nm-c-heading); }
.nm-modal-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
  font-size: 13px;
  color: var(--nm-c-body);
}
.nm-modal-footer {
  padding: 10px 16px 12px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* =========================================================================
   アクション列 — 背景色付きラベル表現
   ========================================================================= */

/* 編集ラベル（青系） */
.nm-action-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: var(--nm-fw-semibold);
  white-space: nowrap;
  line-height: 1.6;
  cursor: pointer;
  transition: opacity 0.1s;
  font-family: var(--nm-font);
  text-decoration: none;
  border: none;
}
.nm-action-label:hover { opacity: 0.8; }

.nm-action-edit    { background: #dbeafe; color: #1e40af; }
.nm-action-delete  { background: #fee2e2; color: #991b1b; }
.nm-action-status  { background: #337ab7; color: #fff; }
.nm-action-log     { background: #f3f4f6; color: #374151; }

/* ASIN リンク — 青文字＋下線（テーブル内） */
.nm-asin-link {
  color: var(--nm-c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 11px;
  font-weight: var(--nm-fw-semibold);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}
.nm-asin-link:hover { color: var(--nm-c-link-h); }

/* 取り込み元ラベル */
.nm-label-source { background: #f0f9ff; color: #0369a1; }

/* フィルタラベル強調 */
.nm-filter-label-strong {
  display: block;
  font-size: var(--nm-sz-xs);
  font-weight: var(--nm-fw-bold);
  color: var(--nm-c-label);
  margin-bottom: 5px;
}

/* 数値入力フィールド — 右寄せ（S302価格・在庫系） */
.nm-input-number,
input[type="number"].nm-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* セクションパネル — ヘッダー（S302用、S301と統一） */
.nm-section-header {
  background: var(--nm-bg-header);
  padding: 10px 16px;
  border-bottom: 1px solid var(--nm-border);
  font-size: var(--nm-sz-md);
  font-weight: var(--nm-fw-bold);
  color: var(--nm-c-label);
}

/* 必須マーク */
.nm-req { color: #dc3545; margin-left: 2px; font-weight: var(--nm-fw-normal); }

/* ステータスバッジ色分け（data-status属性ベース） */
.nm-status-badge[data-status="UNDER_REVIEW"]  { background: #f59e0b !important; color: #333 !important; }
.nm-status-badge[data-status="JOOM_ACTIVE"]   { background: #16a34a !important; color: #fff !important; }
.nm-status-badge[data-status="JOOM_REJECTED"] { background: #dc2626 !important; color: #fff !important; }
.nm-status-badge[data-status="SYSTEM_ERROR"]  { background: #dc2626 !important; color: #fff !important; }
.nm-status-badge[data-status="PREPARATION"]   { background: #6b7280 !important; color: #fff !important; }
.nm-status-badge[data-status="REGISTRATION"]  { background: #3b82f6 !important; color: #fff !important; }
.nm-status-badge[data-status="SUSPENDED"]     { background: #9333ea !important; color: #fff !important; }
.nm-status-badge[data-status="OUT_OF_STOCK"]  { background: #ea580c !important; color: #fff !important; }
.nm-status-badge[data-status="UPDATE_PRODUCT"]{ background: #eab308 !important; color: #333 !important; }

/* スピナーアニメーション */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 商品画像（枠線なし） */
.nm-product-img {
  width: 65px;
  height: 65px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  margin: 0 auto;
}
.nm-product-img-placeholder {
  width: 65px;
  height: 65px;
  background: #f5f5f5;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 10px;
  color: #bbb;
  line-height: 1.4;
  margin: 0 auto;
}