/* ========================================
   Base / Reset
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f6f6f7;
  color: #1a1a1a;
  font-size: 14px;
}

/* ========================================
   Header
   ======================================== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #e1e3e5;
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header h1 {
  font-size: 18px;
  font-weight: 600;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 未保存インジケータ */
.dirty-indicator {
  font-size: 12px;
  color: #b54708;
  background: #fef3c7;
  padding: 4px 10px;
  border-radius: 4px;
  display: none;
}

.dirty-indicator.visible {
  display: inline-block;
}

/* ========================================
   Buttons
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: 1px solid #c4cdd5;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn:hover {
  background: #f4f6f8;
}

.btn-primary {
  background: #5c6ac4;
  color: #fff;
  border-color: #5c6ac4;
}

.btn-primary:hover {
  background: #4959bd;
}

.btn-secondary {
  background: #f4f6f8;
}

.btn-danger {
  color: #d72c0d;
  border-color: #d72c0d;
}

.btn-danger:hover {
  background: #fef1f1;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-back {
  text-decoration: none;
  color: #5c6ac4;
  border: none;
  padding: 4px;
}

/* 保存ボタンの状態表現 */
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   Sync Status
   ======================================== */
.sync-status {
  margin: 12px 20px;
  padding: 10px 16px;
  background: #eaf5ea;
  border: 1px solid #a4d4a4;
  border-radius: 6px;
  color: #1a7f37;
}

.sync-status.error {
  background: #fef1f1;
  border-color: #e8b4b4;
  color: #d72c0d;
}

/* ========================================
   App-wide Toggle (index page)
   ======================================== */
.app-toggle-section {
  margin: 20px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-toggle-section .toggle-label {
  font-size: 14px;
  font-weight: 600;
}

.app-toggle-section .toggle-hint {
  font-size: 12px;
  color: #6d7175;
  margin-top: 2px;
}

/* iOS風トグルスイッチ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #c4cdd5;
  border-radius: 24px;
  transition: 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #5c6ac4;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* ========================================
   Option Sets List (index page, table format)
   ======================================== */
.option-sets-section {
  margin: 20px;
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 8px;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e3e5;
}

.section-header h2 {
  font-size: 16px;
  font-weight: 600;
}

.option-sets-table {
  width: 100%;
  border-collapse: collapse;
}

.option-sets-table thead th {
  text-align: left;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #6d7175;
  background: #f6f6f7;
  border-bottom: 1px solid #e1e3e5;
}

.option-sets-table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: middle;
}

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

.option-sets-table tbody tr {
  cursor: move; /* D&D 用 */
}

.option-sets-table tbody tr.dragging {
  opacity: 0.3;
}

.option-sets-table tbody tr.drag-over {
  background: #f4f5fd;
  border-top: 2px solid #5c6ac4;
}

.option-sets-table .col-handle {
  width: 32px;
  color: #c4cdd5;
  cursor: grab;
  text-align: center;
}

.option-sets-table .col-name {
  font-weight: 600;
}

.option-sets-table .col-conditions {
  color: #6d7175;
  font-size: 12px;
  max-width: 320px;
}

.option-sets-table .col-choices {
  text-align: center;
  color: #6d7175;
}

.option-sets-table .col-status {
  width: 80px;
}

.option-sets-table .col-actions {
  width: 200px;
  text-align: right;
}

.option-sets-table .col-actions .btn {
  margin-left: 4px;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.status-badge.active {
  background: #eaf5ea;
  color: #1a7f37;
}

.status-badge.inactive {
  background: #f1f1f1;
  color: #6d7175;
}

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: #6d7175;
}

.empty-state p {
  margin-bottom: 12px;
}

.loading {
  padding: 40px;
  text-align: center;
  color: #6d7175;
}

/* ========================================
   Edit Page Layout (1 column, centered)
   ======================================== */
.edit-container {
  max-width: 62.375rem; /* 998px */
  margin: 0 auto;
  padding: 24px 20px;
}

.edit-section {
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.edit-section-header {
  padding: 14px 20px;
  border-bottom: 1px solid #e1e3e5;
  background: #fafbfc;
}

.edit-section-header h2 {
  font-size: 15px;
  font-weight: 600;
}

.edit-section-header .hint {
  font-size: 12px;
  color: #6d7175;
  margin-top: 2px;
}

.edit-section-body {
  padding: 20px;
}

/* フォームレイアウト */
.form-row {
  margin-bottom: 16px;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.form-row .field-hint {
  font-size: 11px;
  color: #8c9196;
  margin-top: 4px;
}

.form-row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-row-inline label {
  margin-bottom: 0;
  font-weight: 400;
}

/* ========================================
   Form Elements (shared)
   ======================================== */
.input,
.select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  font-family: inherit;
}

.input:focus,
.select:focus {
  outline: none;
  border-color: #5c6ac4;
  box-shadow: 0 0 0 1px #5c6ac4;
}

.input-sm {
  padding: 4px 8px;
  font-size: 12px;
}

/* ========================================
   Modal (shared)
   ======================================== */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  min-width: 400px;
  max-width: 90vw;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-content h3 {
  margin-bottom: 12px;
}

.modal-content label {
  display: block;
  font-size: 12px;
  color: #666;
  margin: 12px 0 4px;
}

.readonly-text {
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  word-break: break-all;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* マッチング商品プレビュー用 */
.match-products-list {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid #e1e3e5;
  border-radius: 4px;
}

.match-product-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f1f1;
}

.match-product-item:last-child {
  border-bottom: none;
}

.match-product-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  background: #f0f0f0;
  flex-shrink: 0;
}

.match-product-item .product-info {
  flex: 1;
  min-width: 0;
}

.match-product-item .product-title {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-product-item .product-meta {
  font-size: 11px;
  color: #6d7175;
  margin-top: 2px;
}

.modal-content.modal-large {
  min-width: 600px;
  max-width: 80vw;
}

/* 静的表示用テキスト（Input Type のような変更不可な項目） */
.field-static {
  padding: 8px 12px;
  background: #f6f6f7;
  border: 1px solid #e1e3e5;
  border-radius: 4px;
  font-size: 13px;
  color: #6d7175;
}

/* チェックボックス + ラベル横並び調整 */
.form-row-inline input[type="checkbox"] {
  width: auto;
  cursor: pointer;
}

.form-row-inline label {
  cursor: pointer;
  user-select: none;
}

/* ========================================
   Condition Rows
   ======================================== */
.condition-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.condition-row .condition-field {
  width: 140px;
  flex-shrink: 0;
}

.condition-row .condition-operator {
  width: 130px;
  flex-shrink: 0;
}

.condition-row .condition-value {
  flex: 1;
  min-width: 180px;
}

.condition-row .condition-operator-readonly {
  width: 130px;
  flex-shrink: 0;
  padding: 8px 12px;
  background: #f6f6f7;
  border: 1px solid #e1e3e5;
  border-radius: 4px;
  font-size: 13px;
  color: #6d7175;
  text-align: center;
}

/* AND/OR トグル */
.join-toggle {
  display: inline-flex;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.join-toggle button {
  border: none;
  background: #fff;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #6d7175;
  transition: background 0.15s;
}

.join-toggle button:hover {
  background: #f4f6f8;
}

.join-toggle button.active {
  background: #5c6ac4;
  color: #fff;
}

.join-toggle button + button {
  border-left: 1px solid #c4cdd5;
}

/* 条件削除ボタン */
.btn-remove-condition {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #c4cdd5;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #6d7175;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-condition:hover {
  background: #fef1f1;
  border-color: #d72c0d;
  color: #d72c0d;
}

/* 全商品モード時の条件UI無効化 */
#conditions-container.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* マッチングプレビュー */
.match-link {
  color: #5c6ac4;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.match-link:hover {
  text-decoration: underline;
}

.match-link.uncalculated {
  color: #8c9196;
}

#match-count {
  font-weight: 700;
}

/* ========================================
   Choices Group
   ======================================== */
.choices-group {
  border: 1px solid #e1e3e5;
  border-radius: 6px;
  background: #fafbfc;
}

.choices-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #f4f6f8;
  border-bottom: 1px solid #e1e3e5;
  border-radius: 6px 6px 0 0;
}

.choices-group-header h3 {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.choices-list {
  padding: 8px;
  min-height: 60px;
}

.choices-empty {
  padding: 16px;
  text-align: center;
  color: #8c9196;
  font-size: 12px;
}

/* 選択肢行（CSS Grid で列揃え） */
.choice-row {
  display: grid;
  grid-template-columns: 24px 1fr 1.4fr 1.2fr 80px 60px 32px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 4px;
  margin-bottom: 6px;
}

.choice-row:last-child {
  margin-bottom: 0;
}

.choice-row.dragging {
  opacity: 0.3;
}

.choice-row.drag-over {
  border-color: #5c6ac4;
  background: #f4f5fd;
}

.choice-row .choice-handle {
  color: #c4cdd5;
  cursor: grab;
  text-align: center;
  font-size: 14px;
  user-select: none;
}

.choice-row .input,
.choice-row .input-sm {
  margin: 0;
}

/* 列ヘッダー */
.choices-column-header {
  display: grid;
  grid-template-columns: 24px 1fr 1.4fr 1.2fr 80px 60px 32px;
  gap: 12px;
  padding: 6px 8px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #6d7175;
  border-bottom: 1px solid #e1e3e5;
}

.choices-column-header div {
  text-align: center;
}

.choices-column-header .col-center {
  text-align: center;
}

/* 列ヘッダー：狭い画面対応（choice-row のメディアクエリと合わせる） */
@media (max-width: 900px) {
  .choices-column-header {
    grid-template-columns: 24px 1fr 1.4fr 1fr 60px 50px 28px;
    gap: 4px;
    font-size: 10px;
  }
}

/* 商品選択ボタン（サムネ + 商品名） */
.choice-product-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  min-height: 32px;
  overflow: hidden;
}

.choice-product-btn:hover {
  background: #f4f6f8;
  border-color: #5c6ac4;
}

.choice-product-btn img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 3px;
  background: #f0f0f0;
  flex-shrink: 0;
}

.choice-product-btn .choice-product-name {
  /* flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.choice-variant-name {
  font-size: 11px;
  color: #6d7175;
  font-weight: normal;
}

.choice-product-btn.empty {
  color: #8c9196;
  font-style: italic;
}

/* デフォルト指定 */
.choice-default {
  text-align: center;
}

.choice-default input[type="checkbox"] {
  cursor: pointer;
}

/* 複製ボタン（ドロップダウンメニュー付き） */
.choice-duplicate-wrap {
  position: relative;
}

.choice-duplicate-btn {
  width: 100%;
  padding: 5px 4px;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  color: #1a1a1a;
}

.choice-duplicate-btn:hover {
  background: #f4f6f8;
}

.choice-duplicate-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 2px;
  background: #fff;
  border: 1px solid #c4cdd5;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 50;
  min-width: 160px;
}

.choice-duplicate-menu.open {
  display: block;
}

.choice-duplicate-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  color: #1a1a1a;
}

.choice-duplicate-menu button:hover {
  background: #f4f6f8;
}

/* 削除ボタン */
.btn-remove-choice {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #c4cdd5;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #6d7175;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-choice:hover {
  background: #fef1f1;
  border-color: #d72c0d;
  color: #d72c0d;
}

/* 狭い画面では列を圧縮 */
@media (max-width: 900px) {
  .choice-row {
    grid-template-columns: 24px 1fr 1.4fr 1fr 60px 50px 28px;
    gap: 4px;
  }
  .choice-row .input,
  .choice-row .input-sm,
  .choice-product-btn {
    font-size: 11px;
  }
}

/* ========================================
   input_type='checkbox' 時の表示制御
   ======================================== */

/* 在庫なしグループ全体を非表示 */
.choices-body--checkbox .choices-group[data-group="out_of_stock"] {
  display: none !important;
}

/* 列ヘッダーの「商品」「デフォルト」列を非表示 */
/* 既存の grid-template-columns: 24px 1fr 1.4fr 1.2fr 80px 60px 32px
   列の意味: ハンドル / ラベル / 商品 / 注釈 / デフォルト / 複製 / 削除
   checkbox 時の grid: ハンドル / ラベル / 注釈 / 複製 / 削除 */
.choices-body--checkbox .choices-column-header,
.choices-body--checkbox .choice-row {
  grid-template-columns: 24px 4fr 1.2fr 60px 32px !important;
}

/* 列ヘッダーの 3, 4, 5 番目（商品列、デフォルト列）を非表示 */
.choices-body--checkbox .choices-column-header > div:nth-child(3),
.choices-body--checkbox .choices-column-header > div:nth-child(4),
.choices-body--checkbox .choices-column-header > div:nth-child(5) {
  display: none !important;
}

/* 注釈inputも非表示 */
.choices-body--checkbox .choice-annotation {
  display: none !important;
}

/* 複製ボタンも非表示 */
.choices-body--checkbox .choice-duplicate-wrap {
  display: none !important;
}

/* choice-row 内の商品ボタンとデフォルトチェックを非表示 */
.choices-body--checkbox .choice-product-btn,
.choices-body--checkbox .choice-default {
  display: none !important;
}

/* 狭い画面用も grid 列数を合わせる */
@media (max-width: 900px) {
  .choices-body--checkbox .choices-column-header,
  .choices-body--checkbox .choice-row {
    grid-template-columns: 24px 1fr 50px 28px !important;
  }
}

/* ========================================
   Validation Errors
   ======================================== */

/* 警告メッセージバー（保存セクション上部に表示） */
.validation-warning {
  margin: 12px 0;
  padding: 10px 16px;
  background: #fef1f1;
  border: 1px solid #e8b4b4;
  border-radius: 6px;
  color: #d72c0d;
  font-size: 13px;
}

.validation-warning ul {
  margin-top: 4px;
  padding-left: 20px;
}

/* エラーのある入力欄 */
.input.has-error,
.choice-row.has-error {
  border-color: #d72c0d !important;
  background: #fef1f1;
}

.input.has-error:focus {
  box-shadow: 0 0 0 1px #d72c0d;
}

.choice-row.has-error {
  background: #fef9f9;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 720px) {
  .option-sets-table .col-conditions,
  .option-sets-table .col-choices {
    display: none;
  }
  .edit-container {
    padding: 12px;
  }
}