/* 発注可能リスト専用スタイル */
:root {
  --proc-primary: #b88a5d;
  --proc-primary-light: #f5eddd;
  --proc-bg: #fbf8f4;
  --proc-text: #3a2e26;
  --proc-muted: #7a665a;
  --proc-border: #e6dccf;
  --proc-warn: #c44;
}

.proc-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.proc-search-input {
  padding: 10px 14px;
  border: 1px solid var(--proc-border);
  border-radius: 24px;
  font-size: 0.95rem;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}
.proc-search-input:focus { outline: none; border-color: var(--proc-primary); box-shadow: 0 0 0 2px var(--proc-primary-light); }
.proc-filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.proc-checkbox { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--proc-text); cursor: pointer; }

.proc-list { display: flex; flex-direction: column; gap: 14px; }
.proc-empty { text-align: center; padding: 30px; color: var(--proc-muted); }
.proc-group {
  border: 1px solid var(--proc-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.proc-group-header {
  padding: 10px 14px;
  background: var(--proc-primary-light);
  color: var(--proc-primary);
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--proc-border);
}
.proc-group-count { color: var(--proc-muted); font-weight: 400; font-size: 0.8rem; margin-left: 4px; }
.proc-group-body { display: flex; flex-direction: column; }

.proc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--proc-border);
  transition: background 0.1s;
}
.proc-item:last-child { border-bottom: none; }
.proc-item:hover { background: var(--proc-bg); }
.proc-item-main { flex: 1; min-width: 0; }
.proc-item-title { font-size: 0.92rem; color: var(--proc-text); margin-bottom: 4px; word-break: break-word; }
.proc-brand { color: var(--proc-primary); font-weight: 600; margin-right: 6px; }
.proc-name { font-weight: 500; }
.proc-item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; color: var(--proc-muted); }
.proc-price { font-weight: 700; color: var(--proc-text); }
.proc-supplier { background: var(--proc-bg); padding: 2px 8px; border-radius: 10px; border: 1px solid var(--proc-border); }
.proc-badge { padding: 1px 6px; border-radius: 8px; font-size: 0.7rem; font-weight: 600; }
.proc-badge-initial { background: #fff7ee; color: var(--proc-primary); border: 1px solid var(--proc-primary); }
.proc-badge-store { background: #eef5ee; color: #4a7a4a; border: 1px solid #8aa48a; }
.proc-alt { margin-top: 6px; font-size: 0.78rem; color: var(--proc-warn); background: #fff5f5; padding: 4px 8px; border-radius: 4px; }

.proc-item-action { flex-shrink: 0; }
.proc-url-btn {
  display: inline-block;
  padding: 6px 12px;
  background: var(--proc-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.proc-url-btn:hover { background: #a0764e; }
.proc-no-url { font-size: 0.75rem; color: var(--proc-muted); }

@media (max-width: 600px) {
  .proc-item { flex-direction: column; align-items: stretch; }
  .proc-item-action { align-self: flex-end; }
}